Azure Static Web Apps with C# API in 2023

This tutorial docks into what you should have learned by now in the first one:

Azure Static Web Apps In 2023 | John Maeda’s Blog

There’s a way to do it from the command line tool that only partially worked for me. So I also include a different way that worked for me if this doesn’t jive for you. I probably forgot a step in this first way I’ve documented — so do let me know what I did wrong!

Way 1: Using just the swa command line method as the main driver …

Next up we’re going to make an API in C#. This will get a little more gnarly.

Modify the return statement to read:

return new OkObjectResult(new { text = "Hello from the API" });

Go ahead and test this function:

% cd api
% dotnet build
% func start host

Go back to the main directory and do the following:

% nvm ls
% nvm use <set it to the node 16 version you've downloaded>
% npm install react-scripts

We now you need to login with your tenant-id with the -CC option

% swa login -CC --tenant-id <tenant id here>

Then go off and kick off the process

% swa

It will magically find the api folder and the fact that there’s a .NET/C# module there:

And it will offer to deploy it to the Web and let you create a new application …

For me in September of 2023, this didn’t seem to work on the deployed side. But it worked fine on the local side.

Way 2: Doing it all from the VS Code extension and a little swa command line action

Let’s do it this other way which seems to work okay for me in September of 2023.

Follow the first few steps of:

Azure Static Web Apps In 2023 | John Maeda’s Blog

Get through these:

  1. Clone this repo
  2. Move it to your own computer with git magic like gh repo clone johnmaeda/reponame
  3. Okay. You’re good to go! cd to the local directory and let’s get started!

Let’s next “Azure Static Web Apps: Create Static Web App… (Advanced)”

Select all the logical options like resource group etc.

Let it think you’re making an api

Keep going forward with defaults. And notice that this method will create a .github folder. That’s key.

Keep in mind that it will fail because you don’t have an api yet. Let’s fix that by creating an HTTP function from the command palette.

Name it ‘message’ …

Keep walking forward with defaults. And then look at the api/message.cs file and change the last line to:

return new OkObjectResult(new { text = "Hello from the beautiful API" });

Change src/App.js to

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    (async function () {
      const { text } = await( await fetch(`/api/message`)).json();
      setData(text);
    })();
  });

  return <div>Something should show up here: {data}</div>;
}

export default App;

At the command line, let’s do the stuff we’ve learned to do:

% nvm ls
% nvm use 16.20.2 (<-- that's in my case for a node 16 install)
% npm install react-scripts
% az logout (<-- not clear if you need to do this but it's for good luck)
% az login
% swa login -CC --tenant-id <your tenant id here> (<-- -CC clears past credentials)

How are you feeling champ? Now:

% swa

Use the defaults and it should look like:

Say Yes and then say no to deploying:

Now let’s run this locally for sanity’s sake:

% swa start

If you see this in the locally deployed instance, rejoice!

Now let’s attempt to deploy the site via the GitHub actions that have been setup to make this magic work on the Internet. Go to the GitHub tool on the left hand side of your VS Code, and commit the changes. Enter a message there, hit Commit, and tell it to Sync.

Switch to the Azure tool on the left hand side to watch it deploy over on GitHub:

You can open the action up on GitHub to bite your fingernails while it deploys. And later on when you think you were only dreaming, you can also just open the site directly.

It feels so good. Doesn’t it? Enjoy!

Related Posts