Azure Static Web App Preview Environments

If you’re using something like GitHub actions to deploy your static web app to Azure, you might not realise that you can have the PR’s deployed to “Preview” Environments.

Go to your static web app and select Settings | Environment and your PR’s will have a deployment listed in the preview environment section.

If the URL for your site is something like this

https://green-bat-01ba34c03-26.westeurope.3.azurestaticapps.net

The 26 is the PR number so

https://green-bat-01ba34c03-{PR Number}.westeurope.3.azurestaticapps.net

And you can simply open that PR via your browser and verify all looks/works before merging to main.

If you’ve set your PR close to correctly delete these preview environments, for example from GitHub actions

- name: Close Pull Request
  id: closepullrequest
  uses: Azure/static-web-apps-deploy@v1
  with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
    app_location: "./dist"
    action: "close"

then this will be delete the preview envirnoment once your PR is merged.

However as I found, if you PR close is not working correctly these preview environments increase until you get an error trying to build the PR and the PR cannot be deployed to the preview environment until you select and delete them, i.e. you’ve reached the max number of preview environments.