Add preview deployments for pull requests

.github/workflows/build.yml

@@ -6,19 +6,20 @@ on:
     push:
         branches:
             - main
+    pull_request:
+        types: [opened, synchronize, reopened]
 
-# Allow one concurrent deployment
 concurrency:
-    group: "pages"
+    group: deploy-${{ github.event.pull_request.number || github.ref }}
     cancel-in-progress: true
 
-env:
-    VITE_BASE: "/toys/"
-
 jobs:
     build:
         runs-on: ubuntu-latest
         timeout-minutes: 30
+        env:
+            VITE_BASE:
+                ${{ github.event_name == 'pull_request' && '/' || '/toys/' }}
         steps:
             - name: Setup Node
               uses: actions/setup-node@v3
@@ -85,9 +86,10 @@ jobs:
               uses: actions/upload-artifact@v4
               with:
                   path: dist/
-                  name: github-pages
+                  name: build-output
 
-    deploy:
+    deploy-pages:
+        if: github.event_name == 'push'
         environment:
             name: github-pages
             url: ${{ steps.deployment.outputs.page_url }}
@@ -112,7 +114,7 @@ jobs:
             - name: Download
               uses: actions/download-artifact@v4
               with:
-                  name: github-pages
+                  name: build-output
 
             - name: Commit & push changes
               run: |
@@ -123,3 +125,70 @@ jobs:
                   commit_ref="$(git commit-tree "$tree_ref" -p HEAD -p "$GITHUB_SHA" -m "[automated] publish from $GITHUB_SHA on $(date)")"
                   git update-ref refs/heads/gh-pages "$commit_ref"
                   git push
+
+    deploy-preview:
+        if: github.event_name == 'pull_request'
+        runs-on: ubuntu-latest
+        needs: build
+        permissions:
+            pull-requests: write
+        steps:
+            - uses: actions/checkout@v3
+
+            - uses: actions/download-artifact@v4
+              with:
+                  name: build-output
+                  path: dist/
+
+            - name: Deploy to Cloudflare Workers
+              id: deploy
+              uses: cloudflare/wrangler-action@v3
+              with:
+                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  command:
+                      deploy --name toys-pr-${{ github.event.pull_request.number
+                      }}
+
+            - name: Comment preview URL on PR
+              uses: actions/github-script@v7
+              with:
+                  script: |
+                      const marker = '<!-- preview-deploy -->';
+                      const workerName = `toys-pr-${context.payload.pull_request.number}`;
+                      const url = `https://${workerName}.${process.env.CLOUDFLARE_ACCOUNT_ID}.workers.dev`;
+                      const deployUrl = '${{ steps.deploy.outputs.deployment-url }}';
+                      const previewUrl = deployUrl || url;
+                      const body = [
+                          marker,
+                          `**Preview deploy** is ready!`,
+                          '',
+                          `${previewUrl}`,
+                          '',
+                          `_Built from ${context.sha.slice(0, 7)}_`,
+                      ].join('\n');
+
+                      const { data: comments } = await github.rest.issues.listComments({
+                          owner: context.repo.owner,
+                          repo: context.repo.repo,
+                          issue_number: context.payload.pull_request.number,
+                      });
+
+                      const existing = comments.find(c => c.body.includes(marker));
+                      if (existing) {
+                          await github.rest.issues.updateComment({
+                              owner: context.repo.owner,
+                              repo: context.repo.repo,
+                              comment_id: existing.id,
+                              body,
+                          });
+                      } else {
+                          await github.rest.issues.createComment({
+                              owner: context.repo.owner,
+                              repo: context.repo.repo,
+                              issue_number: context.payload.pull_request.number,
+                              body,
+                          });
+                      }
+              env:
+                  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

.github/workflows/preview-cleanup.yml

@@ -0,0 +1,18 @@
+name: Cleanup preview deploy
+
+on:
+    pull_request:
+        types: [closed]
+
+jobs:
+    cleanup:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+
+            - name: Delete preview worker
+              uses: cloudflare/wrangler-action@v3
+              with:
+                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  command: delete --name toys-pr-${{ github.event.pull_request.number }} --force

wrangler.toml

@@ -0,0 +1,5 @@
+name = "toys-preview"
+compatibility_date = "2025-01-01"
+
+[assets]
+directory = "./dist"