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 !
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”
Now le’ts provide the name of the function. This will define our api location in the format [/api/<api 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.
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 !
More posts in my blog ElBruno.com.