Hi !

Ok, this is so cool. I’ve showing and talking about Azure Static Web Apps for a while, and now when I added the capability to add APIs to Static Web Pages, a huge set of questions were there to be answered. So, I will host a new Reactor Session focused on solve the most common ones. And, in the meantime, I’ll show how you can test this in a quick way.

Let’s start with a simple folder that contains an HTML page and a CSS style. Not a fancy one, just my demo for an online CV.

Now it’s time to directly publish this folder to GitHub

We now have the repo with our files in GitHub !

And, let’s use the Azure Static Web Apps extension for Visual Studio Code, to publish this as a website !

As easy as to search for “Create Static Web App” in the VS Code command.s

We need to select the Azure Subscription and then the name and Azure Region for our Azure Static Web App.

In my demo, I am not using any web framework, so I’ll choose “Custom”. However, we can host web apps running with Angular, Vue.js, etc.

I’ll select “app” as the folder where my app is hosted. And, because my app is just HTML pages, I won’t define a build directory.

And that’s it ! All my pieces are running, and now I can check my actions in GitHub.

In the action section in my GitHub repository, I can see that now I have a running (or already completed) workflow. This one will publish the content of my “app” folder to a new Azure Static Web App.

This is the app up and running !

In my next post, I’ll show how we can add some APIs, and also explain a little more about the differences about hosting plans and differences between Azure Functions and this model.

API support in Azure Static Web Apps with Azure Functions

Happy coding!

Greetings

El Bruno

More posts in my blog ElBruno.com.