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:
However, it was not yet possible to build and deploy Static Web Apps from a Azure DevOps pipeline.
DevOps Pipelines “Preview”
This is now (31 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:
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:
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:
output_location, you can just use the exact same values as used in the GitHub Action.
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:
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 to build and deploy
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)
az commands to create the required resources:
For more details see this comment.
Or you can use an ARM-template to deploy a Azure Static Web App: