DEV Community

Cover image for Static Web Apps from Azure DevOps Releases
Blair Lierman
Blair Lierman

Posted on

Static Web Apps from Azure DevOps Releases

Azure Static Web Apps is an awesome new option for deploying single page applications, however I had specific goals that the current documentation didn't quite address.

My Goals

  1. Deploy to Azure Static Web Apps
  2. Deploy the same code to different environments (i.e. Sandbox, Test, Production)
  3. Automatically deploy to Sandbox (aka Test/Staging)
  4. Require approval to deploy to Production

The Microsoft Documentation for publishing from Azure Static Web Apps builds and deploys in a single step via Pipelines, however that doesn't support multiple deployments from same artifacts or an approval step.

All of those goals are possible using Azure DevOps, however it took some additional steps to get them working together.

Prerequisites

  1. A Single Page Application published as an Artifact built using Azure Pipelines
    • My artifact contains two builds of an Angular app, 'sandbox' and 'prod'
    • I happened to use an Angular app, but you can apply this to any single page application framework, such as React, Vue, Ember.js or Svelte.
  2. The Deployment Token from an already-created Azure Static Web App

Configure Your Release

  1. In your Azure DevOps project, go to Pipelines, then Releases
  2. Create a new Release (using the "Create Release" button)
  3. In the Artifacts, select the Artifact that you already built
  4. In Stages, add a new Stage
    1. Add an Empty Job, as we will create the tasks manually
    2. The Name can be whatever you like. I used 'Production Deployment'
  5. Once that Stage is created, click the "View stage tasks" link ("1 job, 0 tasks") Task Link Click
  6. Next to "Agent Job", click the "+" button to add a new Task Add Task to Job
    1. Find the "Deploy Azure Static Web App" task (from Microsoft Corporation) and click "Add" Add Deploy Azure Static Web App Task
      • At the time of this blog post, it is currently in PREVIEW and at version 0.* (preview)
    2. Fill in the following fields of the task:
      1. Display Name - Can be anything you want
      2. App Location - Set to path of your built app in the artifact
        • Use the form "<ArtifactName>/<BuildName>/", i.e. AngularBuildArtifact/prod/
      3. Output Location - Set to path of your built app in the artifact,
        • Use the form "<ArtifactName>/<BuildName>/", i.e. AngularBuildArtifact/prod/
      4. Skip App Build - Set to true/checked. (The app is already being built and stored as an Artifact)
      5. Azure Static Web Apps Api Token - Fill in with your Deployment Token variable: $(deployment_token)
      6. Save your Release
  • Note: I didn't have an Azure Functions API or routes.json, so I have left the remaining fields blank. We are also skipping the app build, so we don't need to provide an App Build Command.
  • Note: If you run this task now, it will fail with an error in the task:

docker: Error response from daemon: OCI runtime create failed: invalid mount {Destination::/working_dir Type:bind Source:/var/lib/docker/volumes/8d90060c5907d68a281862c7f31dcb71efe24e52511ac78682a1e5e5dd27b0af/_data Options:[rbind]}: mount destination :/working_dir not absolute: unknown.

As of the writing of this post, unfortunately there is a known issue within the Azure DevOps Static Web Apps task, however there is a workaround.

  • More information can be found in this GitHub issue. The workaround is based on this comment in a related pull request.
  • If the issue is resolved, please leave a comment on this post and I will update it.

Workaround Steps

  1. Add a Bash Script task above the Static Web Apps task Add Second Task to Release Add Bash Script Task Move Bash Script Task First
  2. Change the Type to 'Inline'
  3. For the script command to run add the following command: echo '##vso[task.setvariable variable=BUILD_SOURCESDIRECTORY]$(System.DefaultWorkingDirectory)'
    • This command will set the necessary environment variable that the Static Web Apps requires.

Congratulations! You can now run the Release to deploy to Azure Static Web Apps.


Bonus Content - Adding Approval to the Stage

  1. On the Pipelines tab, click the Pre-deployment Conditions button (at the left of the Stage button) Location of Pre-Deployment Conditions
  2. Enable Pre-Deployment Approvals Location of Pre-deployment approvals
  3. Fill in Approvers from your organization Demonstration of Required Approvers
  4. Feel free to set the rest of the settings as necessary for your situation.

YAML for the Static Web App Task

variables:
  deployment_token: '<YourDeploymentToken>'

steps:
- task: AzureStaticWebApp@0
  displayName: 'Static Web App - Production Deployment'
  inputs:
    app_location: AngularBuildArtifact/prod/
    output_location: AngularBuildArtifact/prod/
    skip_app_build: true
    azure_static_web_apps_api_token: '$(deployment_token)'
Enter fullscreen mode Exit fullscreen mode

Discussion (0)