build-and-deploy-static-web-app.yml

name: Static Web App - Build and Deploy 🏗️

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

permissions:
  id-token: write
  contents: write
  pull-requests: write

env:
  RESOURCE_GROUP: rg-blog-johnnyreilly-com
  LOCATION: westeurope
  STATICWEBAPPNAME: blog.johnnyreilly.com
  ROOTCUSTOMDOMAINNAME: johnnyreilly.com
  BLOGCUSTOMDOMAINNAME: blog.johnnyreilly.com
  TAGS: '{"owner":"johnnyreilly", "email":"johnny_reilly@hotmail.com"}'
  BRANCH_NAME: ${{ github.head_ref || github.ref_name }}

jobs:
  build_and_deploy_swa_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Site build and deploy 🏗️
    steps:
      - name: Checkout 📥
        uses: actions/checkout@v4
        with:
          # Number of commits to fetch. 0 indicates all history for all branches and tags.
          fetch-depth: 0
          submodules: true

      - name: AZ CLI login 🔑
        uses: azure/login@v1
        with:
          client-id: ${{ secrets.AZURE_CLIENT_ID }}
          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

      - name: Set deployment name 📝
        id: deployment_name
        run: |
          GIT_SHA='${{ github.sha }}'
          SHORT_SHA=${GIT_SHA:0:7}
          BRANCH_NAME='${{ env.BRANCH_NAME }}'

          DEPLOYMENT_NAME="${BRANCH_NAME////-}.$SHORT_SHA"

          echo "DEPLOYMENT_NAME=$DEPLOYMENT_NAME" >> $GITHUB_OUTPUT

      - name: Lint Bicep
        if: github.event_name == 'pull_request'
        uses: azure/CLI@v1
        with:
          inlineScript: |
            az version
            az bicep install
            az bicep version
            az bicep lint --file ./infra/main.bicep --diagnostics-format sarif > bicep.sarif
            echo '::warning::Bicep linting results:'
            cat bicep.sarif

      - name: Upload SARIF
        if: github.event_name == 'pull_request' && (success() || failure())
        uses: github/codeql-action/upload-sarif@v3
        with:
          category: bicep
          sarif_file: bicep.sarif

      - name: Infra - detect changes & validate 📝
        id: static_web_app_what_if
        if: github.event_name == 'pull_request'
        uses: azure/CLI@v1
        with:
          inlineScript: |
            # https://github.com/Azure/azure-cli/issues/25710
            az config set bicep.use_binary_from_path=false

            complexData='{"allowedIPAddresses": ${{ secrets.ALLOWEDIPADDRESS }} }'

            az deployment group what-if \
              --resource-group ${{ env.RESOURCE_GROUP }} \
              --name "${{ steps.deployment_name.outputs.DEPLOYMENT_NAME }}" \
              --template-file ./infra/main.bicep \
              --parameters \
                  branch='main' \
                  location='${{ env.LOCATION }}' \
                  staticWebAppName='${{ env.STATICWEBAPPNAME }}' \
                  tags='${{ env.TAGS }}' \
                  repositoryToken='${{ secrets.WORKFLOW_TOKEN }}' \
                  rootCustomDomainName='${{ env.ROOTCUSTOMDOMAINNAME }}' \
                  blogCustomDomainName='${{ env.BLOGCUSTOMDOMAINNAME }}' \
                  complexData="$complexData"

            az deployment group validate \
              --resource-group ${{ env.RESOURCE_GROUP }} \
              --name "${{ steps.deployment_name.outputs.DEPLOYMENT_NAME }}" \
              --template-file ./infra/main.bicep \
              --parameters \
                  branch='main' \
                  location='${{ env.LOCATION }}' \
                  staticWebAppName='${{ env.STATICWEBAPPNAME }}' \
                  tags='${{ env.TAGS }}' \
                  repositoryToken='${{ secrets.WORKFLOW_TOKEN }}' \
                  rootCustomDomainName='${{ env.ROOTCUSTOMDOMAINNAME }}' \
                  blogCustomDomainName='${{ env.BLOGCUSTOMDOMAINNAME }}' \
                  complexData="$complexData"

      - name: Infra - deploy 🔧
        id: static_web_app_deploy
        if: github.event_name != 'pull_request'
        uses: azure/CLI@v1
        with:
          inlineScript: |
            # https://github.com/Azure/azure-cli/issues/25710
            az config set bicep.use_binary_from_path=false

            complexData='{"allowedIPAddresses": ${{ secrets.ALLOWEDIPADDRESS }} }'

            az deployment group create \
              --resource-group ${{ env.RESOURCE_GROUP }} \
              --name "${{ steps.deployment_name.outputs.DEPLOYMENT_NAME }}" \
              --template-file ./infra/main.bicep \
              --parameters \
                  branch='main' \
                  location='${{ env.LOCATION }}' \
                  staticWebAppName='${{ env.STATICWEBAPPNAME }}' \
                  tags='${{ env.TAGS }}' \
                  repositoryToken='${{ secrets.WORKFLOW_TOKEN }}' \
                  rootCustomDomainName='${{ env.ROOTCUSTOMDOMAINNAME }}' \
                  blogCustomDomainName='${{ env.BLOGCUSTOMDOMAINNAME }}' \
                  complexData="$complexData"

      - name: Get preview URL 📝
        id: static_web_app_preview_url
        uses: azure/CLI@v1
        with:
          inlineScript: |
            DEFAULTHOSTNAME=$(az staticwebapp show -n '${{ env.STATICWEBAPPNAME }}' | jq -r '.defaultHostname')

            PREVIEW_URL="https://${DEFAULTHOSTNAME/.[1-9]./-${{github.event.pull_request.number }}.${{ env.LOCATION }}.1.}"

            echo "PREVIEW_URL=$PREVIEW_URL" >> $GITHUB_OUTPUT

      - name: Setup Node.js 🔧
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'yarn'

      - name: Setup bun 🔧
        uses: oven-sh/setup-bun@v1
        with:
          bun-version: latest

      - name: Install and build site 🔧
        run: |
          cd blog-website
          yarn install --frozen-lockfile
          DOCUSAURUS_SSR_CONCURRENCY=5 IS_LIVE_SITE=${{ github.event_name != 'pull_request' }} yarn run build
          cp staticwebapp.config.json build/staticwebapp.config.json

      - name: Get API key 🔑
        id: static_web_app_apikey
        uses: azure/CLI@v1
        with:
          inlineScript: |
            APIKEY=$(az staticwebapp secrets list --name '${{ env.STATICWEBAPPNAME }}' | jq -r '.properties.apiKey')
            echo "APIKEY=$APIKEY" >> $GITHUB_OUTPUT

      - name: Deploy site 🚀
        id: static_web_app_build_and_deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ steps.static_web_app_apikey.outputs.APIKEY }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: 'upload'
          skip_app_build: true
          app_location: '/blog-website/build' # App source code path
          api_location: '/blog-website/api' # Api source code path - optional

    outputs:
      preview-url: ${{steps.static_web_app_preview_url.outputs.PREVIEW_URL}}

  integration_tests_job:
    name: Integration tests 💡🏠
    needs: build_and_deploy_swa_job
    if: github.event_name == 'pull_request' && github.event.action != 'closed'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Wait for preview ${{ needs.build_and_deploy_swa_job.outputs.preview-url }} ⌚
        id: static_web_app_wait_for_preview
        uses: nev7n/wait_for_response@v1
        with:
          url: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}'
          responseCode: 200
          timeout: 600000
          interval: 1000

      - uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci
        working-directory: ./blog-website-tests

      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
        working-directory: ./blog-website-tests

      - name: Run Playwright tests
        env:
          PLAYWRIGHT_TEST_BASE_URL: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}'
        run: npx playwright test
        working-directory: ./blog-website-tests

      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: blog-website-tests/playwright-report/
          retention-days: 30

  lighthouse_report_job:
    name: Lighthouse report 💡🏠
    needs: build_and_deploy_swa_job
    if: github.event_name == 'pull_request' && github.event.action != 'closed'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Wait for preview ${{ needs.build_and_deploy_swa_job.outputs.preview-url }} ⌚
        id: static_web_app_wait_for_preview
        uses: nev7n/wait_for_response@v1
        with:
          url: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}'
          responseCode: 200
          timeout: 600000
          interval: 1000

      - name: Audit URLs 🧐
        id: lighthouse_audit
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: |
            ${{ needs.build_and_deploy_swa_job.outputs.preview-url }}
            ${{ needs.build_and_deploy_swa_job.outputs.preview-url }}/about
            ${{ needs.build_and_deploy_swa_job.outputs.preview-url }}/blog
            ${{ needs.build_and_deploy_swa_job.outputs.preview-url }}/tags
            ${{ needs.build_and_deploy_swa_job.outputs.preview-url }}/definitely-typed-the-movie
          configPath: ./.github/workflows/lighthousesrc.json
          uploadArtifacts: true
          temporaryPublicStorage: true
          runs: 1

      # - name: Dump steps.lighthouse_audit.outputs
      #   id: github_context_step
      #   run: echo '${{ toJSON(steps.lighthouse_audit.outputs) }}'

      - name: Format lighthouse score
        id: format_lighthouse_score
        uses: actions/github-script@v6
        with:
          script: |
            const lighthouseCommentMaker = require('./.github/workflows/lighthouseCommentMaker.js');

            const lighthouseOutputs = {
              manifest: ${{ steps.lighthouse_audit.outputs.manifest }},
              links: ${{ steps.lighthouse_audit.outputs.links }}
            };

            const comment = lighthouseCommentMaker({ lighthouseOutputs });
            core.setOutput("comment", comment);

      - name: Add Lighthouse stats as comment ✍️
        id: comment_to_pr
        uses: marocchino/sticky-pull-request-comment@v2
        with:
          number: ${{ github.event.pull_request.number }}
          header: lighthouse
          message: ${{ steps.format_lighthouse_score.outputs.comment }}

  structured_data_report_job:
    name: Structured data report 📝
    needs: build_and_deploy_swa_job
    if: github.event_name == 'pull_request' && github.event.action != 'closed'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Wait for preview ${{ needs.build_and_deploy_swa_job.outputs.preview-url }} ⌚
        id: static_web_app_wait_for_preview
        uses: nev7n/wait_for_response@v1
        with:
          url: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}'
          responseCode: 200
          timeout: 600000
          interval: 1000

      - name: Audit URLs for structured data 🧐
        id: structured_data_audit
        uses: johnnyreilly/schemar@v0.1.1
        with:
          urls: |
            ${{ needs.build_and_deploy_swa_job.outputs.preview-url }}
            ${{ needs.build_and_deploy_swa_job.outputs.preview-url }}/about
            ${{ needs.build_and_deploy_swa_job.outputs.preview-url }}/blog
            ${{ needs.build_and_deploy_swa_job.outputs.preview-url }}/definitely-typed-the-movie

      # - name: Dump steps.structured_data_audit.outputs
      #   run: echo '${{ toJSON(steps.structured_data_audit.outputs) }}'

      - name: Format structured data results
        id: format_structured_data_results
        if: always()
        uses: actions/github-script@v7
        with:
          script: |
            const structuredDataCommentMaker = (await import('${{ github.workspace }}/.github/workflows/structuredDataCommentMaker.mjs')).default;
            const results = ${{ steps.structured_data_audit.outputs.results }};
            core.setOutput("comment", structuredDataCommentMaker('${{ needs.build_and_deploy_swa_job.outputs.preview-url }}', results));

      - name: Add structured data results as comment ✍️
        id: structured_data_comment_to_pr
        if: always()
        uses: marocchino/sticky-pull-request-comment@v2
        with:
          number: ${{ github.event.pull_request.number }}
          header: structured_data
          message: ${{ steps.format_structured_data_results.outputs.comment }}

  # deploy_to_devto_job:
  #   name: Publish to dev.to 🗞️
  #   needs: build_and_deploy_swa_job
  #   if: github.event_name != 'pull_request'
  #   runs-on: ubuntu-latest
  #   steps:
  #     - uses: actions/checkout@v3

  #     - name: Setup Node.js 🔧
  #       uses: actions/setup-node@v3
  #       with:
  #         node-version: '18'
  #         cache: 'yarn'

  #     - name: Publish to dev.to 🗞️
  #       run: |
  #         cd from-docusaurus-to-devto
  #         yarn install --frozen-lockfile
  #         DEVTO_APIKEY=${{ secrets.DEVTO_APIKEY }} yarn start

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Cleanup staging 💥
    steps:
      - name: AZ CLI login 🔑
        uses: azure/login@v1
        with:
          client-id: ${{ secrets.AZURE_CLIENT_ID }}
          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

      - name: Get API key 🔑
        id: apikey
        uses: azure/CLI@v1
        with:
          inlineScript: |
            APIKEY=$(az staticwebapp secrets list --name '${{ env.STATICWEBAPPNAME }}' | jq -r '.properties.apiKey')
            echo "APIKEY=$APIKEY" >> $GITHUB_OUTPUT

      - name: Destroy staging environment 💥
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ steps.apikey.outputs.APIKEY }}
          action: 'close'