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 (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:

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
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.

Token

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 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:

1
2
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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
    "$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