I recently needed to deploy a preview using Azure Static Web App with an Azure DevOps pipeline after creating a pull request. However, I found that Microsoft's documentation did not provide practical information on this specific topic.

The documentation only included an example of how to do it with a Github action, rather than within an Azure DevOps pipeline.

After some investigation, I discovered a simple solution. In this blog, I will demonstrate how to achieve the desired outcome.

Edit your azure-pipeline.yml

I won't teach you how to create the best YAML for an Azure Pipeline in this case, so I'll assume you already know this (explaining this is not my expertise 😅).

If you have something like this in your YAML file, you're off to a good start.

- task: AzureStaticWebApp@0
    inputs:
      skip_app_build: false
      app_build_command: 'npm run build && npm run build-storybook'
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_XXX)
      app_location: '/'
      output_location: 'storybook-static'

This example is for deploying Storybook to a Azure static web app.

How to deploy to a staging area?

The only line you have to add is deployment_environment: staging.

- task: AzureStaticWebApp@0
    inputs:
            deployment_environment: staging # <= Add this one
      skip_app_build: false
      app_build_command: 'npm run build && npm run build-storybook'
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_XXX)
      app_location: '/'
      output_location: 'storybook-static'

It's that simple. I can't believe no one documented this.

To set the value for this property, use the name of your preview environment. Once this pipeline finishes, you can find the preview URL in the Azure portal under your Static Web App. You can choose any name you like, such as preview or something else that suits your needs.

How to see the preview URL in the pipeline?

It is strange that nothing has been documented about this, but if you use a Github action with your Azure Static Web App, you will receive a free preview URL in the PR.

After some investigation, I found that in the task AzureStaticWebApp, they set the AZURESTATICWEBAPP_STATIC_WEB_APP_URL environment variable after a successful deployment. Therefore, all we need to do is echo this variable in the pipeline.

If someone knows how to add it as a comment in the PR with the URL in it, then I would love to know 👍

- script: echo ${AZURESTATICWEBAPP_STATIC_WEB_APP_URL}
  displayName: 'Set output variable'

In the pipeline, you will see the result like this.

Full YAML

To summarize everything, here is the full YAML file that you can copy to get a jump start.

My YAML file is divided into 2 stages:

• Test Build job
• Build and Deploy job

First, I test if the application builds. After that, the deployment for the staging starts.

name: 'Test and Deploy to staging'

# This specifies that the CI/CD pipeline should be triggered for pull requests targeting the `main` branch.
pr:
  - main

stages:
  - stage: deploy_staging
    displayName: Deploy to staging
    jobs:
      - job: test_build
        condition: or(eq(variables['Build.Reason'], 'Manual'), eq(variables['Build.Reason'], 'PullRequest'))
        displayName: Test Build Job
        pool:
          vmImage: ubuntu-latest
        steps:
          - checkout: self
            submodules: true

          - task: NodeTool@0
            inputs:
              versionSpec: '20.x'
            displayName: 'Install Node.js'

          - script: |
              npm ci --legacy-peer-deps
            displayName: 'Run npm install'

          - script: |
              npm ci --legacy-peer-deps
            displayName: 'Run npm install'

      - job: build_and_deploy_job
        condition: or(eq(variables['Build.Reason'], 'Manual'), eq(variables['Build.Reason'], 'PullRequest'))
        displayName: Build and Deploy Job
        pool:
          vmImage: ubuntu-latest
        steps:
          - checkout: self
            submodules: true

          - task: NodeTool@0
            inputs:
              versionSpec: '20.x'
            displayName: 'Install Node.js'

          - script: |
              npm ci --legacy-peer-deps
            displayName: 'Run npm install'

          - task: AzureStaticWebApp@0
            inputs:
              deployment_environment: staging
              skip_app_build: false
              app_build_command: 'npm run build && npm run build-storybook'
              azure_static_web_apps_api_token: $(STATIC_WEB_APP_TOKEN)
              app_location: '/'
              output_location: 'storybook-static'

          - script: echo ${AZURESTATICWEBAPP_STATIC_WEB_APP_URL}
            displayName: 'Set output variable'

If you have any suggestions, please reach out to me on Twitter 😉

Thanks

After reading this post, I hope you learned something new or are inspired to create something new! 🤗

If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM’s are always open 😁.