Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a GitHub repository.

The workflow of Azure Static Web Apps is tailored to a developer’s daily workflow. Apps are built and deployed based off GitHub interactions. When you create an Azure Static Web Apps resource, Azure sets up a GitHub Actions workflow in the app’s source code repository that monitors a branch of your choice. Every time you push commits or accept pull requests into the watched branch, the GitHub Action automatically builds and deploys your app and its API to Azure.

Static web apps are commonly built using libraries and frameworks like Angular, React, Svelte, or Vue. These apps include HTML, CSS, JavaScript, and image assets that make up the application. With a traditional web server, these assets are served from a single server alongside any required API endpoints. With Static Web Apps, static assets are separated from a traditional web server and are instead served from points geographically distributed around the world. This distribution makes serving files much faster as files are physically closer to end users. In addition, API endpoints are hosted using a serverless architecture, which avoids the need for a full back-end server all together.

The flow.

Let’s dive into the demo now.

• We need to start with a GitHub repository that contains a static website. There are template repositories that you can start with. Some of which are build with Angular, React and Vue. We are going to start with a basic HTML website.

First of all, make sure you are logged into your GitHub account.

Next, navigate to this URL –> https://github.com/staticwebdev/vanilla-basic/generate

It will automatically take you to the page where you can create a repository from the template. Next, give your repository a name. Keep everything else as default and click the button – Create Repository from template.

The repository will be a very simple one. With just an index.html file and a CSS file.

And the index.html file will have this code.

• That is all we need right now outside of the Azure Portal to create the Static Web App. Let’s go to the portal and create the static web app now.

Go to the Azure Portal –> Create a resource. Search for Static Web App. You will see that at the time of writing this article, this feature is still in preview. Click create.

Create a new resource group for the same. Give a name to the static web app. Choose region. Right now the closest one to my location is East Asia. Then, we need to sign in to GitHub. Click Sign in.

It will redirect you to the GitHub Authorization page. Authorize the app.

Choose your organization, repository that you just create and the master branch. There will be just one branch – the master branch. Click review + create.

Once your static web app gets created, click the browse button.

And there it will run. That is how easy it is to deploy a static web using GitHub and Azure.

There is GitHub action couple to it that deploys the static website from GitHub to the static web app.

You can configure it if you want to. We are not going to do that in this demo.

• The website is running free. Also, it doesn’t run on just one server, but on multiple geographically distributed nodes. It makes this website always close and accessible to your users and also pretty fast because of that.
• Static web apps can do more than just host files.

You can configure application settings for your site. You can also set up a custom domain name and along with that, you can also call Azure functions from it. It also can have staging environments just like a deployment slot which is automatically created when a pull request is generated from GitHub repo.

That’s for this demo of Azure Static Web Apps. Did you follow along and try it?