build-and-deploy-test.yml

name: Build test link and Deploy to Cloudflare Pages

permissions:
    actions: write # Necessary to cancel workflow executions
    checks: write # Necessary to write reports
    pull-requests: write # Necessary to comment on PRs
    contents: read

on:
    pull_request_target:
        types: [opened, synchronize]
        branches:
            - '**'

concurrency:
    group: cloudflare-pages-build-${{github.head_ref}}
    cancel-in-progress: true

jobs:
    build_to_cloudflare_pages:
        timeout-minutes: 30
        runs-on: ubuntu-latest
        steps:
            - name: Checkout to branch
              uses: actions/checkout@v3
              with:
                  ref: ${{ github.event.pull_request.head.sha }}

            - name: Setup node
              uses: actions/setup-node@v3
              with:
                  node-version: 20.x
                  cache: 'npm'

            - name: Create npmrc file
              shell: bash
              run: echo "@deriv-com:registry=https://npm.pkg.github.com" >> .npmrc

            - name: Get cached dependencies
              id: cache-npm
              uses: actions/cache/restore@e12d46a63a90f2fae62d114769bbf2a179198b5c
              with:
                  path: node_modules
                  key: npm-${{ hashFiles('./package-lock.json') }}

            - name: Install dependencies
              if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
              run: npm ci
              shell: bash

            - name: Build staging
              run: npm run build
              env:
                VITE_PROJECT_NAME: ${{ vars.VITE_PROJECT_NAME }}
                VITE_CROWDIN_BRANCH_NAME: ${{ vars.VITE_CROWDIN_BRANCH_NAME }}
                VITE_TRANSLATIONS_CDN_URL: ${{ vars.VITE_TRANSLATIONS_CDN_URL }}

            - name: Run tests for Eslint
              run: npm run test:lint

            - name: Retrieve PR information
              env:
                  EVENT_NUMBER: ${{ github.event.number }}
                  EVENT_USERNAME: ${{ github.event.pull_request.user.login }}
                  HEAD_REF: ${{ github.head_ref }}
                  DRAFT: ${{ github.event.pull_request.draft }}
              run: |
                  mkdir -p .pr
                  echo "$EVENT_NUMBER" > .pr/NR
                  echo "$EVENT_USERNAME" > .pr/USERNAME
                  echo "$HEAD_REF" > .pr/BRANCHNAME
                  echo "$DRAFT" > .pr/DRAFT

            - name: Publish to Cloudflare Pages
              id: publish-to-pages
              env:
                  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
                  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
                  HEAD_BRANCH: ${{ github.head_ref }}
              run: |
                  echo "Installing Wrangler CLI"
                  npm i -g wrangler
                  echo "Deploying build to Cloudflare Pages"
                  directory='dist'
                  projectName=${{ secrets.CLOUDFLARE_PROJECT_NAME }}
                  branch=$(echo "$HEAD_BRANCH" | head -c 20 | sed 's/[\/_\.]/-/g; s/[^a-zA-Z0-9]$/1/')
                  cf_preview_url=$(wrangler pages deploy $directory --project-name=$projectName --branch=$branch > log.txt 2>&1; echo $?)
                  echo "------"
                  preview_url=https://$branch.$projectName.pages.dev
                  cat log.txt
                  if grep -q "Deployment complete" log.txt; then
                    echo "preview_url=$preview_url" >> "$GITHUB_OUTPUT"
                    echo $preview_url > .pr/PREVIEW_URL
                  else
                    echo "Deployment to Cloudflare Pages failed."
                    exit 1
                  fi

            - name: 'Generate preview link comment'
              if: success()
              id: generate_preview_url
              uses: actions/github-script@ffc2c79a5b2490bd33e0a41c1de74b877714d736
              with:
                  github-token: ${{ github.token }}
                  script: |
                      const action_url = "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"
                      const preview_url = "${{steps.publish-to-pages.outputs.preview_url}}"
                      const comment = [
                          `**Preview Link**: ${preview_url}`,
                          '| Name | Result |',
                          '| :--- | :------ |',
                          `| **Build status**  | Completed ✅ |`,
                          `| **Preview URL**  | [Visit Preview](${preview_url}) |`,
                          `| **Action URL**  | [Visit Action](${action_url}) |`,
                          ''
                        ].join('\n')
                      core.setOutput("comment", comment);
            - name: 'Generate failure comment'
              if: failure()
              id: generate_failure_comment
              uses: actions/github-script@ffc2c79a5b2490bd33e0a41c1de74b877714d736
              with:
                  github-token: ${{ github.token }}
                  script: |
                      const action_url = "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"
                      const comment = [
                        '| Name | Result |',
                        '| :--- | :------ |',
                        `| **Build status**  | Failed ❌ |`,
                        `| **Action URL**  | [Visit Action](${action_url}) |`,
                        ''
                      ].join('\n')
                      core.setOutput("comment", comment);

            - name: Post Cloudflare Pages Preview comment
              if: success() || failure()
              uses: marocchino/sticky-pull-request-comment@331f8f5b4215f0445d3c07b4967662a32a2d3e31
              with:
                  header: Cloudflare Pages Preview Comment
                  number: ${{github.event.number}}
                  message: ${{steps.generate_preview_url.outputs.comment || steps.generate_failure_comment.outputs.comment }}
                  recreate: true

            - name: Upload PR information to artifact
              uses: actions/upload-artifact@82c141cc518b40d92cc801eee768e7aafc9c2fa2
              with:
                  name: 'pr-${{github.run_id}}'
                  path: .pr