Step 8 - Configure CI/CD

If you deploy directly from the Azure portal or the Cloudflare dashboard, the GitHub connection is made from the CSP itself and the CI/CD workflow is created automatically in your repository. The following steps only apply if you prefer to configure it manually.

Create the GitHub Actions workflow for your deployment platform. The project already generates the static site in out/ with pnpm build.

Create the .github/workflows/azure-swa.yml file:

.github/workflows/azure-swa.yml

name: Deploy Azure Static Web App

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
        with:
          version: 9

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm

      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm build

      - name: Deploy
        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: /
          output_location: out
          skip_app_build: true

Add the AZURE_STATIC_WEB_APPS_API_TOKEN secret in GitHub → Settings → Secrets and variables → Actions. You get the token in the Azure portal when you create the Static Web App resource.