Blog
Deploying a Static Web App via Azure DevOps Pipeline
This blogpost describes how to deploy a Static Web App (= static content + an Azure Function) via an Azure DevOps pipeline to the Azure infrastructure.
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:
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:
build_and_deploy_job:
name: Build and Deploy Job
steps:
# ...
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v0.0.1-preview
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_*** }}
app_location: "Client" # App source code path
api_location: "Api" # Api source code path
output_location: "wwwroot" # Built app content directory
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:
pool:
vmImage: ubuntu-latest
steps:
- task: AzureStaticWebApp@0
inputs:
app_location: "Client" # App source code path
api_location: "Api" # Api source code path
output_location: "wwwroot" # Built app content directory
env:
azure_static_web_apps_api_token: $(API_TOKEN)
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:
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)
Use the az
commands to create the required resources:
az group create -n test-azuredevops -l westus2
az staticwebapp create -l westus2 -n test-azuredevops -g test-azuredevops -s "" -b "" --token "-"
For more details see this comment.
Or you can use an ARM-template to deploy a Azure Static Web App:
{
"$schema": "http://schema.management.azure.com/schemas/2015-01-01/deploymentTemplate.json#",
"contentVersion": "1.0.0.0",
"parameters": {
"name": {
"type": "string"
},
"location": {
"type": "string"
},
"sku": {
"type": "string"
},
"skucode": {
"type": "string"
}
},
"resources": [
{
"apiVersion": "2019-12-01-preview",
"name": "[parameters('name')]",
"type": "Microsoft.Web/staticSites",
"location": "[parameters('location')]",
"tags": null,
"properties": { },
"sku": {
"Tier": "[parameters('sku')]",
"Name": "[parameters('skuCode')]"
}
}
]
}
References
- The announcement
- The documentation
- 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.