Using a custom build pipeline with Azure Static Web Apps

Azure Static Web Apps lets you host static websites and their APIs, and includes a GitHub Action to build and deploy your application. The action automatically detects the project type and builds it, supporting many JavaScript frameworks and static site generators such as Hugo, Gatsby, Angular, React, Svelte, Vue, and Blazor. While this works well in most cases, it can fail if your project has specific requirements.

In most cases, the default template works well and can be used 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"

However, you may encounter build errors when your project has specific requirements. For example, npx cannot be used in the build (GitHub issue). In that case, build the app manually first, then configure the Azure/static-web-apps-deploy step to skip the built-in build and deploy the pre-built artifacts by setting 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!