#Azure ☁️ – Adding an API to an Azure Static Web Apps 🕸️ 1/N
Tags: englishpost
Published: 2022-06-28 15:34:38

---
title: #Azure ☁️ – Adding an API to an Azure Static Web Apps 🕸️ 1/N
published: true
date: 2022-06-28 14:01:54 UTC
tags: EnglishPost
canonical_url: 
---

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](https://brunocapuano.files.wordpress.com/2022/06/simple-html-page-with-css-in-a-folder.jpg?w=1024)

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

![publish the demo html to GitHub](https://brunocapuano.files.wordpress.com/2022/06/publish-the-demo-html-to-github.jpg?w=1024)

We now have the repo with our files in GitHub !

![repo published to GitHub](https://brunocapuano.files.wordpress.com/2022/06/repo-published-to-github.jpg?w=1024)

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](https://brunocapuano.files.wordpress.com/2022/06/create-a-new-static-web-app-in-vs-code.jpg?w=1024)

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](https://brunocapuano.files.wordpress.com/2022/06/name-for-the-azure-static-web-app.jpg?w=1024)

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](https://brunocapuano.files.wordpress.com/2022/06/select-web-framework.jpg?w=1024)

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](https://brunocapuano.files.wordpress.com/2022/06/select-the-location-of-the-app-code.jpg?w=1024)

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](https://brunocapuano.files.wordpress.com/2022/06/sucessfully-created-a-new-azure-static-web-app.jpg?w=835)

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](https://brunocapuano.files.wordpress.com/2022/06/azure-static-web-app-published-and-running.jpg?w=1024)

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](https://docs.microsoft.com/en-gb/azure/static-web-apps/apis-functions)

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *