Automatically deploy application with Github Actions and Azure Static Web Apps

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

This image is adapted from File:010-Democracy Monument.jpg by Photograph: Nawit science

What is Azure Static Web Apps?

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

from Azure Static Web Apps documentation

Prerequisites

• GitHub repository
• Azure account

Steps to Create a Static Web App

1.Go to Microsoft Azure portal

2. Select Static Web Apps

Select Static Web Apps

3. Select Create

Select Create

4. In the Basics tab, fill in the configuration information and link it to a GitHub repository.

Project Details

• Subscription: select your Azure subscription
• Resource Group: select your resource group, if you have, or select the Create new — you can consider the Resource Group as a folder to put this app

Static Web App Details

• Name: enter your app name

Hosting plan:

• Plan Type: select Free (or Standard if you wish — you can see Compare plans)

Azure Functions and staging details

• Region: select a region closest to you

Deployment details: select GitHub. Then, click the Sign-in with GitHub button to authenticate with GitHub.

• Organization: select your preferred Organization name.
• Repository: select your GitHub Repository that you want to create the Static Web App from
• Branch: select main branch — or a branch that you want the GitHub Actions to trigger the deployment when there is code change on that branch

Build Details:

• Build Presets: select Svelte, as I use Svelte for this demo, unless select your JavaScript framework.
• App location: keep the default value (“/”) if the application is under the root directory.
• Api location: leave blank if you haven’t created the API yet (and this can be updated later)
• Output location: select public — Svelte generates the built artifact inside the public folder. As the output location depends on the framework you choose, please check before filling in

Fill in the configuration information and link it to a GitHub repository

5. select review and create button at the bottom of the page

Select review and create

6. Select Create.

Select Create.

7.Select Go to resource.

Select Go to resource

8. Navigate to the the application by clicking the below URL. At this step, Azure builds and deploys the application, and automatically generates the URL for you.

9. Application is up and running!

application is successfully deployed

Remark: Underneath the hood, Azure commits the Azure Static Web App workflow file to your repository — see latest commit in your repo. This is the yaml file which dictates the build and deployment process for your Static Web App. You will see some configurations that you provided there and you can update if you need e.g. API location.

Steps to update a Static Web App

Push the new codes to master (or any specified branch), it will trigger the new deployment automatically.

Conclusion

Azure Static Web Apps is very simple and easy to work with. There are 3 ways to create the Azure Static Web Apps, i.e., VS Code, Azure portal, and Azure CLI. I demonstrate using Azure portal but all of them are very simple. After creation, the application will be automatically built and deployed as code changes — super easy!!!

References

1. Let’s get started with Azure static web apps
2. Azure Static Web Apps documentation