How to create a static web app in Azure

Azure Static Web Apps is a service that automatically builds and deploys full stack web applications to Azure from a code repository (either Github or Azure Devops).

Prerequisites

• Have an Azure Account. If you do not have one, you can create an account here.
• A Github or Azure Devops Account to host your code. (This article would describe the Github workflow)

Step 1: Create the code repository

To host the application code, you need to have a repository either on Github or Azure Devops. In this article, I used Github and created a repository using this template.

Step 2: Create a static web app (Using Github)

1. From the azure portal, search for Static Web Apps and select the Static Web Apps service in the dropdown.
2. Select Create or Create static web app button has shown below.
3. On the basic tab, fill in the required fields

• Subscription: Select your Azure subscription
• Resource Group: Select a resource group if you have one created or use the Create new link, and enter a resource group name.
• Name: This is the name of the application. I used moyin-static-web-app. Enter your desired name in the textbox.
• Plan type: Select Free.
• Azure Functions and staging details: Select a region closest to you.I left it as default.
• Source: Select GitHub and authenticate by clicking Sign in with Github button.
• Once authenticated, select the code Organization, Repository and Branch from the dropdowns.
• Build Presets: Select the framework or language used to write the code. I used React.
• App location: Put the path of your application. Mine is the root folder so I left it as default('/).
• Api location: If you are working with an api, you can add the path here.
• Output location: Enter the path of your build.

Once done, review and create the application

When deployment is complete, select the Go to resource button

Step 3: Viewing the web application

The deployment build must be completed before the site can be viewed.You can select the banner with Click here to check the status of your github action runs.

Once the build (Github Actions workflow) is completed, select the url and view the deployed web application as shown below.

Step 4: Cleaning up resources

If you are not going to be using the application, then delete the Azure Static Web Apps instance to avoid incurring unnecessary costs.