Tutorial: Publish Azure Static Web Apps with Azure DevOps
In this tutorial, you learn to:
- Set up an Azure Static Web Apps site
- Create an Azure DevOps Pipeline to build and publish a static web app
- 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 Pipeline: If you need help getting started, see Create your first pipeline.
Create a static web app in an Azure DevOps repository
If you have an existing app in your repository, you may skip to the next section.
Navigate to your Azure DevOps repository.
Select Import to begin importing a sample application.
In Clone URL, enter
Create a static web app
Navigate to the Azure portal.
Select Create a Resource.
Search for Static Web Apps.
Select Static Web Apps (Preview).
Under Deployment details ensure that you select Other. This enables you to use the code in your Azure DevOps repository.
Once the deployment is successful, navigate to the new Static Web Apps resource.
Select Manage deployment token.
Copy the deployment token and paste it into a text editor for use in another screen.
This value is set aside for now because you'll copy and paste more values in coming steps.
Create the Pipeline Task in Azure DevOps
Navigate to the Azure DevOps repository that was created earlier.
Select Set up build.
In the Configure your pipeline screen, select Starter pipeline.
Copy and paste the following YAML into your pipeline.
trigger: - main pool: vmImage: ubuntu-latest steps: - checkout: self submodules: true - task: AzureStaticWebApp@0 inputs: app_location: "/" api_location: "api" output_location: "" env: azure_static_web_apps_api_token: $(deployment_token)
If you are not using the sample app, the values for
output_locationneed to change to match the values in your application.
Property Description Example Required
Location of your application code. Enter
/if your application source code is at the root of the repository, or
/appif your application code is in a directory called
Location of your Azure Functions code. Enter
/apiif 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.
Location of the build output directory relative to the
If your application source code is located at
/app, and the build script outputs files to the
/app/buildfolder, then set
azure_static_web_apps_api_tokenvalue is self managed and is manually configured.
Create a new variable.
Name the variable deployment_token (matching the name in the workflow).
Copy the deployment token that you previously pasted into a text editor.
Paste in the deployment token in the Value box.
Select Keep this value secret.
Select Save to return to your pipeline YAML.
Select Save and run to open the Save and run dialog.
Select Save and run to run the pipeline.
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.
Select the URL to see your newly deployed website.