Skip to content

Click on each book below to review & buy on Amazon.

As an Amazon Associate, I earn from qualifying purchases.

Azure Static Web App - Preview Environments

Follow this runbook to add preview environments to an Azure Static Web App, then push a preview environment into production.

This is currently only possible with Static Web Apps linked to GitHub repositories


To create a Static Web App from a GitHub repository, follow runbook:

In the top search bar type static web apps.

Select Static Web Apps under Services.


Click on the Static Web App that requires environments adding.



Under Settings, select Environments.


There is currently no Preview environments.


Create Branch

Login to your GitHub account.

Create a new branch in GitHub.

Set Branch name.

Set Branch source as main. (Older repositories may need this to be master).

Select Create branch to create a new dev branch.


Create Pull Request

Make a change to the code in the dev branch, either through GitHub or by pushing changes locally to the dev branch.

Under Pull requests, select New pull request.


Change compare branch to dev.

Select Create pull request.


Write a comment for the pull request.

Select Create pull request.


New Environment & Testing

An environment is now being created in Azure for your Static Web App called dev.

You will need to wait for All checks to have passed.


Within Azure you can refresh the Static Web App environments page which will show the new Preview environment called dev.

Selecting Browse on the dev branch line will open a preview of the Static Web App site where acceptance testing can be performed.


Merge Pull Request (Go Live)

Once acceptance testing is complete, back in GitHub, select Merge pull request.

Select Confirm merge.


This will start the main branch workflow to put the new code live.

A workflow will run for the dev branch to decommision the Azure Static Web App Preview Environment. Once it completes, refresh the Static Web Apps environments page to see that it has gone.

Support DTV Linux

Click on each book below to review & buy on Amazon. As an Amazon Associate, I earn from qualifying purchases.

NordVPN ®: Elevate your online privacy and security. Grab our Special Offer to safeguard your data on public Wi-Fi and secure your devices. I may earn a commission on purchases made through this link.