Deploying a Static Web App via Azure DevOps Pipeline

History

Since mid 2020, it was possible to use Static Web Apps (Preview) from a GitHub hosted project which uses a CI/CD GitHub Action to build & deploy a Static Web App (= static content + an Azure Function) to the Azure infrastructure.

This is visualized in picture below:

GitHub, Actions and Azure Static Web Apps

However, it was not yet possible to build and deploy Static Web Apps from a Azure DevOps pipeline.

DevOps Pipelines “Preview”

This is now (mid March 2021) made possible by the hard working team at Microsoft. Note that is still a preview, but it actually works fine!

The new flow looks as follows:

Azure DevOps, Pipelines and Azure Static Web Apps

How-To: Migrate from GitHub Action to Azure DevOps

The easiest way to get this working is to use an existing Azure Static Web App project on GitHub (e.g. based on this template). An existing Static Web App (Preview) resource should also be already defined in Azure. The GitHub project will have an GitHub Action which will build and deploy the Static Web App to the correct infrastructure in Azure.

In the GitHub Action, the part which actually builds and deploys the project is defined like this:

Excerpt from GitHub Action to Build and Deploy an Azure Static WebApp

More information about all the parameters can be found here.

To switch the build and deployment from the Azure Static WebApp from an GitHub Action to a DevOps Azure Pipeline, create a new .yml pipeline with the following content

Complete Azure Pipeline .yml which Builds and Deploys an Azure Static WebApp

For the “app_location”, “api_location” and “output_location”, you can just use the exact same values as used in the GitHub Action.

For the “API_TOKEN” just use the same token as defined in the deployed Azure Static WebApp in Azure.

Click the ‘Manage deployment token’ to open the window where you can copy the token to the clipboard.

Make sure to add this API_TOKEN as a secret variable in the Azure Pipeline.

When this pipeline is configured to be be triggered on a check-in, the “AzureStaticWebApp@0” task will make sure to build and deploy the Azure Static Web App to the Azure infrastructure.

How-To: Create a new Azure Static Web App in Azure and deploy from Azure DevOps

It’s also possible to create a new Azure Static Web App in Azure that’s not based on a project in GitHub, but is based on any project in your Azure DevOps environment.

First create a new project in Azure which uses a different source control:

Create a new Azure Static WebApp based on source located in DevOps

Now follow the same steps which are described in the previous chapter:

• Create a new .yml pipeline
• Use the correct token
• Save the .yml file as a new Azure Pipeline
• Run the Azure Pipeline

How-To: Create a new Azure Static Web App in Azure and deploy from Azure DevOps (alternative)

Note that instead of using the UI in Azure DevOps to create the resources, it’s also possible to manually create the required resources in Azure. These two resources are needed:

• Resource Group
• Static Web App (Preview)

Use the ‘az’ commands to create the required resources:

Manually create the required resources in Azure

For more details see this post.

Or you can use an ARM-template to deploy a Azure Static Web App:

ARM template to deploy an Azure Static Web App to Azure

References

• The main discussion thread at the Azure/static-web-apps GitHub project
• My example project, including the GitHub Action and Azure Pipeline .yml file can be found here.