Skip to content

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

Prerequisites

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.

static-web-apps-search

Click on the Static Web App that requires environments adding.

static-web-apps-list

Environments

Under Settings, select Environments.

static-web-apps-settings-environments

There is currently no Preview environments.

static-web-apps-environments-nopreview

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.

static-web-apps-environments-git-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.

static-web-apps-environments-git-branch-request

Change compare branch to dev.

Select Create pull request.

static-web-apps-environments-git-branch-request2

Write a comment for the pull request.

Select Create pull request.

static-web-apps-environments-git-branch-request3

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.

static-web-apps-environments-git-branch-env-created

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.

static-web-apps-environments-preview

Merge Pull Request (Go Live)

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

Select Confirm merge.

static-web-apps-environments-git-branch-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.