Azure Static Web Apps: named preview environments with Azure DevOps

Azure Static Web Apps have just released a new feature for Azure DevOps users called "named preview environments". They allow users to deploy changes to an environment, prior to merging.

What are named preview environments?

The announcement describes them like so:

You can configure your site to deploy every change to a named environment. This preview deployment is published at a stable URL that includes the environment name. For example, if the environment is named release, then the preview is available at a location like -release..azurestaticapps.net.

I'd previously written about how to hand roll preview environments with Azure DevOps using Bicep. But now there's dedicated functionality that covers this, let's see if we can test it out.

Deploy Static Web App with Bicep

We'll start with an empty repo in Azure DevOps and we'll create the Bicep template for deploying a Static Web App to Azure:

The above deploys a Static Web App configured for Azure DevOps.

We are now outputting the defaultHostname, id and name of our newly provisioned SWA. Doing this allows us to do build things in the pipeline around our SWA should we choose to.

Azure Pipelines

We're going to need an Azure Pipeline for this. We'll create an azure-pipelines.yml file in the root of our repo:

There's two significant parts to the above pipeline. First the trigger, which ensures we run the pipeline on each change:

Next the two AzureStaticWebApp@0 tasks:

Depending upon whether we're using the main branch or not, we either use or do not use the deployment_environment property. When it is not the main branch we supply the deployment_environment property with a value of 'pullrequest'. This is the name of our preview environment; and the value will be used in the URL we end up with. In my own experiments it seems that using hyphens in the name can be problematic - so I would advise avoiding this.

Creating a site

So we can test this out, we need a static web app to deploy. We'll spin up a simple Docusaurus site:

Upon the initial commit of our main branch we end up with a website, once the pipeline has run:

Note the URL:

Testing the preview

Now our main site is deployed, let's test out the preview environment. We'll create a new branch:

And we'll update the pages.index.js file to include this message: "Hello from preview environment!". Once we commit and push our changes, we see the pipeline run:

Note that this time we are deploying to our preview environment instead.

As we can see, this preview is showing our "Hello from preview environment!" changes as well; whilst the main environment is unchanged.

Conclusion

Azure DevOps now has support for named preview environments for Azure Static Web Apps; a powerful addition to the product.

You can see further discussion of this feature on the Azure/static-web-apps repo.