Publish to a static web app from a git repository

In the Azure portal it may be possible to create a Static Web App and a pipeline to publish to it at the same time. I find it easier to split the two actions and create the Static Web App first. In all of my projects the pipeline has to do much more than just publishing a few files to Azure. It does not make sense to combine the actions; it is more efficient to create the pipeline separately.

Assume that you already have a git repository with a branch that has the content for the website and perhaps a tool to create the actual website.

Create the pipeline specification

• Create a YAML file for the pipeline that is going to publish the website. In most examples people create a azure-pipeline.yml file in the root of the repository, but that is not required. You can use any name (although .yml may be required) and you can put it in any directory you want. And you can have as many pipeline specifications in the git repository as you want.
• Enter the tasks in the YAML file:

trigger:
  - main # This must be the name of the branch

pool:
  vmImage: ubuntu-latest

steps:
  - checkout: self

  # Put tasks to create the website here

  - task: AzureStaticWebApp@0
    inputs:
      app_location: 'wwwroot' # App source code path relative to the root of the repository
      azure_static_web_apps_api_token: $(deployment_token)
      deployment_environment: Test # Name of the environment to create.

• Some remarks about the YAML:
  • Instead of the branch name in the trigger section you can also enter none. The pipeline then has to be run manually. That may be preferable if you are still configuring the pipeline and the Static Web App. Enter the branch name once you're done.
  • Instead of ubuntu-latest you can also choose something else, e.g., windows-latest. That may be necessary if you have windows specific tools to create the website - but there is a catch.
  • It is a good idea to use wwwroot as the website source directory. The directory is not ignored in the Visual Studio .gitignore file; uncomment the line and it will never be present in the repository. It is also the directory to publish for Blazor web assemblies.
  • The deployment_environment provides the name for the environment to create. Omit this line for the default (production) environment.
• Commit and push the YAML file.

At the moment there is no useful editor for YAML files other than a text editor. Azure DevOps has support to place tasks in the YAML file and modify the settings for some of them, but has no guidance on how to set the arguments of the task. A full list of tasks can be found here.

Create the pipeline

• Go in the Azure portal to the Overview of the static web app

  • In 2025: click Manage deployment token in the top menu and copy the token to the clipboard.

• Go to Azure DevOps and create/select the project the pipeline should be part of. If the git repository is hosted in Azure DevOps, use the same project for pipelines and repositories.

• Go to the Pipelines section of the Azure DevOps project.

• Create a new pipeline:

  • Select the git repository as a source.
  • Select the YAML file (e.g., azure-pipeline.yml) in the correct branch as source.
  • Create a secret variable deployment_token_ with the Azure deployment token as value.
  • Save the pipeline (or run it immediately).

If the pipeline is for a new environment: run the pipeline at least once, as that will create the environment.