Hi !

Yesterday I wrote a quick tutorial about how to publish a static website using Azure Static Web Pages, using GitHub and GitHub Actions. Really simple, and all from Visual Studio Code !

Azure ☁ – Adding an API to an Azure Static Web Apps 🕸 1/N

Today, I’ll show how to also add a new interestin feature:

Add APIs to our Azure Static Web App

So, let’s review our current folder structure:

• We have a folder named [app] with the static HTML content.
• In the [app] folder we have an HTML page and a CSS style file. (the codeswing.json file is mostly used to preview)

All this code is hosted in a GitHub repo, and is published as a Azure Static Web App:

Now let’s add an Api to return a “Hello World” message. Open the command palette, and search for the command:

“Azure Static Web Apps: Create HTTP Function”

First we need to define which language we want to use for our function. Even if it not my prefered one, I’ll use JavaScript for this one:

Now le’ts provide the name of the function. This will define our api location in the format [/api/]

And we can see how we have a new [api] folder in our project structure, and how we also have a new subfolder [samplemessage] for the new api that we just created.

Once we commit these changes, a new workflow will be triggered and the Azure Static Web App will be published including the new API.

Let’s call the api using the published url and our API prefix.

This is so cool ! We can add several APIs to our Static Web Page and make amazing apps !

Happy coding!

Greetings

El Bruno

More posts in my blog ElBruno.com.