Tutorial: Publish Azure Static Web Apps with Azure DevOps

This article demonstrates how to deploy to Azure Static Web Apps using Azure DevOps.

In this tutorial, you learn to:

  • Set up an Azure Static Web Apps site
  • Create an Azure Pipeline to build and publish a static web app

Prerequisites

  • Active Azure account: If you don't have one, you can create an account for free.
  • Azure DevOps project: If you don't have one, you can create a project for free.
    • Azure DevOps includes Azure Pipelines. If you need help getting started with Azure Pipelines, see Create your first pipeline.
    • The Static Web App Pipeline Task currently only works on Linux machines. When running the pipeline mentioned below, please ensure it is running on a Linux VM.

Create a static web app in an Azure DevOps

Note

If you have an existing app in your repository, you may skip to the next section.

  1. Navigate to your repository in Azure Repos.

  2. Select Import to begin importing a sample application.

    DevOps Repo

  3. In Clone URL, enter https://github.com/staticwebdev/vanilla-api.git.

  4. Select Import.

Create a static web app

  1. Navigate to the Azure portal.

  2. Select Create a Resource.

  3. Search for Static Web Apps.

  4. Select Static Web Apps.

  5. Select Create.

  6. Create a new static web app with the following values.

    Deployment details - other

    Setting Value
    Subscription Your Azure subscription name.
    Resource Group Select an existing group name, or create a new one.
    Name Enter myDevOpsApp.
    Hosting plan type Select Free.
    Region Select a region closest to you.
    Source Select Other.
  7. Select Review + create

  8. Select Create.

  9. Once the deployment is successful, select Go to resource.

  10. Select Manage deployment token.

  11. Copy the deployment token and paste the deployment token value into a text editor for use in another screen.

    Note

    This value is set aside for now because you'll copy and paste more values in coming steps.

    Deployment token

Create the Pipeline Task in Azure DevOps

  1. Navigate to the repository in Azure Repos that was created earlier.

  2. Select Set up build.

    Build pipeline

  3. In the Configure your pipeline screen, select Starter pipeline.

    Configure pipeline

  4. Copy the following YAML and replace the generated configuration in your pipeline with this code.

    trigger:
      - main
    
    pool:
      vmImage: ubuntu-latest
    
    steps:
      - checkout: self
        submodules: true
      - task: AzureStaticWebApp@0
        inputs:
          app_location: '/src'
          api_location: 'api'
          output_location: '/src'
          azure_static_web_apps_api_token: $(deployment_token)
    

    Note

    If you are not using the sample app, the values for app_location, api_location, and output_location need to change to match the values in your application.

    Property Description Example Required
    app_location Location of your application code. Enter / if your application source code is at the root of the repository, or /app if your application code is in a directory called app. Yes
    api_location Location of your Azure Functions code. Enter /api if your app code is in a folder called api. If no Azure Functions app is detected in the folder, the build doesn't fail, the workflow assumes you don't want an API. No
    output_location Location of the build output directory relative to the app_location. If your application source code is located at /app, and the build script outputs files to the /app/build folder, then set build as the output_location value. No

    The azure_static_web_apps_api_token value is self managed and is manually configured.

  5. Select Variables.

  6. Select New variable.

  7. Name the variable deployment_token (matching the name in the workflow).

  8. Copy the deployment token that you previously pasted into a text editor.

  9. Paste in the deployment token in the Value box.

    Variable token

  10. Select Keep this value secret.

  11. Select OK.

  12. Select Save to return to your pipeline YAML.

  13. Select Save and run to open the Save and run dialog.

    Pipeline

  14. Select Save and run to run the pipeline.

  15. Once the deployment is successful, navigate to the Azure Static Web Apps Overview which includes links to the deployment configuration. Note how the Source link now points to the branch and location of the Azure DevOps repository.

  16. Select the URL to see your newly deployed website.

    Deployment location

Clean up resources

Clean up the resources you deployed by deleting the resource group.

  1. From the Azure portal, select Resource group from the left menu.
  2. Enter the resource group name in the Filter by name field.
  3. Select the resource group name you used in this tutorial.
  4. Select Delete resource group from the top menu.

Next steps