Using a custom build pipeline with Azure Static Web Apps

Azure Static Web Apps allows to host static web sites and their API. They also provide a GitHub action to build and deploy your application. The GitHub action automatically detects the kind of project from the sources and builds it. It currently supports many JavaScript frameworks and static site generators like Hugo, Gastby, Angular, React, Svelte, Vue, or Blazor. While this magic works most of the time, it may fail if your project has specific requirements.

Most of the time the default template works great and you can just use it as-is:

name: Azure Static Web Apps CI/CD
on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Build And Deploy
      id: builddeploy
      uses: Azure/static-web-apps-deploy@v1
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
        repo_token: ${{ secrets.GITHUB_TOKEN }}
        action: "upload"
        app_location: "Blazor"
        api_location: ""
        output_location: "wwwroot"

But, you may encounter build errors if your project has specific requirements. For instance, you cannot use npx in the build (GitHub issue). In this case, you need to first build the app manually. Then, you can configure the Azure/static-web-apps-deploy step to skip the build and use the artifacts built previously to deploy the application. To do so, you need to use skip_app_build: true.

name: Publish Site

on:
  push:
    branches:
      - 'main'
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  deploy_website_azure_swa:
    if: github.event_name == 'schedule' || github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    needs: [build_website]
    steps:
    - uses: actions/checkout@v2

    # build the app manually
    - name: 'Artifact: azure-swa'
      run: dotnet publish --output dist

    # Deploy the app to Azure Static Web Apps using the artifacts built previously
    - name: Build And Deploy
      id: builddeploy
      uses: Azure/static-web-apps-deploy@v1
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
        repo_token: ${{ secrets.GITHUB_TOKEN }}
        action: "upload"
        app_location: "dist/wwwroot"
        output_location: ''
        skip_app_build: true
        skip_api_build: true

#Additional resources

• Skip building front-end app

Do you have a question or a suggestion about this post? Contact me!