AzureStaticWebApp@0 push from artifacts

Question

I've a CD pipeline that builds a project (multiple times for different environments) and publishes / saves the ./dist directories as one stage. I can download each environment and run locally as expected.

Each environment build is a stage that needs a manual approval. This is where I am getting lost. Each stage shows the correct artifact being pulled into the stage BUT the AzureStaticWebApp@0 -> app_location input results in a "Could not detect this directory." error.

To recap: After building the project and saving as an artifact (I can manually download and verify) I am unable to push that built code to Azure Static Web App as it cannot be found. I've tried any number of combinations to no effect. Any advice?

I'm using templates, here is the Push Built Project to Azure Static Web Apps template

When this template runs, I can see jobs running and successfully pulling down the right artifact with this output:

Successfully downloaded artifacts to /home/vsts/work/1/
Finishing: Download Artifact

But the AzureStaticWebApp@0 task gives this error:

App Directory Location: '/home/vsts/work/1/DEV' is invalid. Could not detect this directory. Please verify your deployment configuration file reflects your repository structure.

parameters:
  - name: environment
    default: development
    type: string
  - name: variableGroup
    default: development-variables-group
    type: string

jobs:
  - deployment: 
    displayName: 'Deploy to'
    environment: ${{parameters.environment}}
    variables:
      - group: ${{parameters.variableGroup}}
    pool:
      vmImage: ubuntu-latest
    strategy:
      runOnce:
        deploy:
          steps:
            - task: AzureStaticWebApp@0
              inputs:
                app_location: '$(Pipeline.Workspace)/DEV'
                api_location: 'api'
                output_location: 'dist'
                skip_app_build: true
              env:
                azure_static_web_apps_api_token: $(deployment-token)

EDIT

Does the task AzureStaticWebApp not have access to anything outside the project?

 - deployment: 
    displayName: 'Deploy to'
    environment: ${{parameters.environment}}
    variables:
      - group: ${{parameters.variableGroup}}
    pool:
      vmImage: ubuntu-latest
    strategy:
      runOnce:
        deploy:
          steps:
            - checkout: self
              submodules: true
            # This step pulls down a complied site. E.g DEV/index.htm, ./images, staticwebapp.config.json
            # That has an output like:
            # Downloading DEV/index.html to /home/vsts/work/1/DEV/index.html
            # Successfully downloaded artifacts to /home/vsts/work/1/
            - download: current
              artifact: DEV
            - task: AzureStaticWebApp@0
              inputs:
              # I've tried many different values for app_location but all return back not found error
                app_location: '/DEV'
                api_location: 'api'
                output_location: 'dist'
                skip_app_build: true
              env:
                azure_static_web_apps_api_token: $(deploymenttoken)

Answer 1

A complete example on building an JS-App and deploying it to a static website. Building and deploying are separated. Please read the inline comments.

jobs:
- job: BuildJob
  steps:

  - task: UseNode@1
    inputs:
      version: '20.x'
    displayName: 'Install Node.js'

  - script: |
      cd reactweb
      npm install
      npm run build
    displayName: 'Build React Application to dist'

  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: '$(Build.SourcesDirectory)/reactweb/dist' # just publish content of dist
      ArtifactName: 'ReactApp' # name of artifact
    displayName: 'Publish React Application Artifact'

- deployment: DeployJobReact # automatically download artifacts to $(Pipeline.Workspace)
  dependsOn: BuildJob
  environment: 'Production'
  strategy:
    runOnce:
      deploy:
        steps:
          - task: AzureStaticWebApp@0
            inputs:
              app_location: / # relative path inside ReactApp
              output_location: ''
              skip_app_build: true # already done in build
              skip_api_build: true
              azure_static_web_apps_api_token: $(SWA_DEPLOYMENT_TOKEN)
              workingDirectory: $(Pipeline.Workspace)/ReactApp # absolute path, contains the content of dist

Answer 2

There are two other solutions described in #552 that do not require adding the DownloadPipelineArtifact@2 step.

The solution that worked for me was to set the workingDirectory to the pipeline's artifact location. Then set the app_location value relative to the workingDirectory

For example, if your artifact was downloaded to $(Pipeline.Workspace)/MyBuild/drop

Your properties would be:

app_location: /drop

workingDirectory: $(Pipeline.Workspace)/MyBuild

yml snippet:

- task: AzureStaticWebApp@0
  displayName: Publish Static Web App
  inputs:
    app_location: /drop # The name of your artifact
    output_location: "" # Leave this empty
    skip_app_build: true
    azure_static_web_apps_api_token: $(deployment-token)
    # The path where your artifact was downloaded
    workingDirectory: $(Pipeline.Workspace)/MyBuild 

This is really confusing because every other pipeline task accepts absolute paths but AzureStaticWebApp@0 requires a relative path for app_location.

Answer 3

Solved --- well found a way to make it work.

1. The build step created 'app/dist' directory and content
2. The 'app/dist' folder only is published as an artifact
3. When downloading the artifact you need to 'put it back' into the project. In this case DEV/ -> app/dist.

 - task: DownloadPipelineArtifact@2
              inputs:
                artifact: DEV
                path: ./app/dist # Put build artifact back into the project
                displayName: "Download artifacts"
            - task: AzureStaticWebApp@0
              inputs:
                app_location: 'app/dist'
                api_location: 'api'
                output_location: 'dist'
                skip_app_build: true
              env:
                azure_static_web_apps_api_token: $(deploymenttoken)

Answer 4

app_location specifies the root of your application code. The property should point to a location in your repo.

Check the documentation here: https://learn.microsoft.com/en-us/azure/static-web-apps/publish-devops

Also, https://github.com/Azure/static-web-apps/issues/5#issuecomment-855309544