#Azure ☁️ – Adding an API to an Azure Static Web Apps 🕸️ 2/N

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”

vscode command to add an 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:

new http function choose language

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

provide function name

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.

new api new files and folders in the current folder structure

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.

sample call to published api

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.


1 comment

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: