By Richie Lee

Hello!

I’ve been looking at publishing some html files to an Azure Static Web Site to be shared internally across the teams. A static website is great for this because I can integrate AAD into it and give out access as and when people need to have access to the site. Another bonus is that using jinja2 the html files can be generated in an Azure DevOps pipeline and then the results published to the website.

This however presented a bit of a challenge; the az staticwebapp create command only supports creating static webapps where the code is stored in GitHub. As an aside it is worth noting that if Azure Static WebApps offer support for GitHub over Azure DevOps then you know that Azure DevOps days are numbered… But at any rate, with my code being generated in an Azure DevOps pipeline, what can I do?

Come to find out that the az powershell cmdlet New-AzStaticWebApp will create a blank static webapp in Azure for you to then publish the html files to. The examples show that you need to access the deployment token to publish contents to the static webapp. And though this example add the deployment token as a variable to the pipeline, I’m reluctant to manage any webapp other than retrieving it in a pipeline.

If though I get the AppId of the static website I can then access the apiKey property, which is basically the deployment token. Handy! Below is a subset of my yaml pipeline: after the html files have been generated (step not shown) I can copy to a directory, create the web app if it does not exist, retrieve the AppId and then get the apiKey/deployment token:

      - task: CopyFiles@2
        displayName: "Copy Files to: $(build.artifactstagingdirectory)"
        inputs:
          SourceFolder: $(System.DefaultWorkingDirectory)
          Contents: |
            *.html
            staticwebapp.config.json
          TargetFolder: "$(build.artifactstagingdirectory)"

      - task: PublishBuildArtifacts@1
        displayName: "Publish Artifact: webappname"
        inputs:
          ArtifactName: webappname

      - bash: |
          mkdir webapphtmlfiles
          mv -f $(build.artifactstagingdirectory) webapphtmlfiles
          ls webapphtmlfiles
        env:
          PAT: $(System.AccessToken)
        displayName: Copy artifact to webapphtmlfiles

      - task: AzurePowerShell@5
        displayName: 'Create Static Site If Not Exists'
        inputs:
          azureSubscription: mySubscription
          ScriptType: InlineScript
          Inline: |
            $webappnameApp = $null
            $webappnameApp = Get-AzStaticWebApp -Name "webappname" -ResourceGroupName "MY-RESOURCE-GROUP"
            if ($null -eq $webappnameApp)
            {
                Write-Host "creating static webapp"
                New-AzStaticWebApp -Name "webappname" -ResourceGroupName "MY-RESOURCE-GROUP" -Location "eastus2"
                $webappnameApp = Get-AzStaticWebApp -Name "webappname" -ResourceGroupName "MY-RESOURCE-GROUP"
            }
            $webappnameAppId = $webappnameApp.id + "/listwebapp?api-version=2020-06-01"
            Write-Host "##vso[task.setvariable variable=webappnameAppId]$webappnameAppId"
          azurePowerShellVersion: latestVersion

      - task: AzureCLI@2
        displayName: "Get Deployment Token for Static Site"
        inputs:
          azureSubscription: mySubscription
          scriptType: 'bash'
          scriptLocation: 'inlineScript'
          inlineScript: |
            secret=$(az rest --method post --url $(webappnameAppId) --query properties.apiKey -o tsv)
            echo "##vso[task.setvariable variable=dep_token]$secret"
          addSpnToEnvironment: false

      - task: AzureStaticWebApp@0
        inputs:
          app_location: /webapphtmlfiles/a
          azure_static_web_apps_api_token: $(dep_token)
        displayName: Publish Static Web App

Once I have the token I then use the AzureStaticWebApp task to publish the results using the deployment token.