DEV Community

El Bruno for Microsoft Azure

Posted on • Originally published at elbruno.com on

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

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.

Simple HTML Page with Css in a Folder

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

publish the demo html to GitHub

We now have the repo with our files in GitHub !

repo published to 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

create a new static web app in vs code

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

name for the 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.

select web framework

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.

select the location of the app code

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

sucessfully created a new azure static web app

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 !

azure static web app published 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.


Discussion (0)