feat: add support for redirecting Wrangler to a generated config when running deploy commands #9100
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Deploy Pages Previews | |
| # This workflow is designed to deploy a "preview" version of a Pages project based on PR labels. | |
| # Triggers: | |
| # - update to a PR that has one of the `preview:...` labels | |
| # | |
| # Actions: | |
| # - deploy the matching Pages project to Cloudflare. | |
| # | |
| # PR Label | Pages Project | |
| # --------------------------------------------------------- | |
| # preview:chrome-devtools-patches | packages/chrome-devtools-patches | |
| # preview:quick-edit | packages/quick-edit | |
| # preview:workers-playground | packages/workers-playground | |
| # | |
| # Note: this workflow does not run tests against these packages, only for deploys previews. | |
| on: | |
| pull_request: | |
| types: [synchronize, opened, reopened, labeled, unlabeled] | |
| jobs: | |
| deploy-pages-projects: | |
| # Only run this on PRs that are for the "cloudflare" org and not "from" `main` | |
| # - non-Cloudflare PRs will not have the secrets needed | |
| # - PRs "from" main would accidentally do a production deployment | |
| if: github.repository_owner == 'cloudflare' && github.head_ref != 'main' && (contains(github.event.*.labels.*.name, 'preview:chrome-devtools-patches') || contains(github.event.*.labels.*.name, 'preview:quick-edit') || contains(github.event.*.labels.*.name, 'preview:workers-playground')) | |
| timeout-minutes: 60 | |
| concurrency: | |
| group: ${{ github.workflow }}-${{ github.ref }} | |
| cancel-in-progress: true | |
| runs-on: ubuntu-22.04 | |
| steps: | |
| - name: Checkout Repo | |
| uses: actions/checkout@v4 | |
| with: | |
| fetch-depth: 0 | |
| - name: Install Dependencies | |
| uses: ./.github/actions/install-dependencies | |
| with: | |
| node-version: 18.18 | |
| - name: Build tools and libraries | |
| run: pnpm run build | |
| env: | |
| NODE_ENV: "production" | |
| CI_OS: ${{ runner.os }} | |
| - name: Deploy Wrangler DevTools preview | |
| if: contains(github.event.*.labels.*.name, 'preview:chrome-devtools-patches') | |
| run: | | |
| output=$(pnpm --filter @cloudflare/chrome-devtools-patches run deploy) | |
| echo "Extracting deployed URL from command output" | |
| url=$(echo "$output" | grep -oP 'Take a peek over at \K\S+') | |
| echo "Extracted URL: $url" | |
| echo "VITE_DEVTOOLS_PREVIEW_URL=$url" >> $GITHUB_ENV | |
| env: | |
| CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }} | |
| - name: Build and Deploy Quick Edit preview | |
| if: contains(github.event.*.labels.*.name, 'preview:quick-edit') | |
| # Quick Edit requires yarn and VS Code build deps, so needs fairly specific logic | |
| run: pnpm --filter quick-edit run deploy | |
| env: | |
| DEBIAN_FRONTEND: noninteractive | |
| CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }} | |
| - name: Deploy Workers Playground preview | |
| if: contains(github.event.*.labels.*.name, 'preview:workers-playground') | |
| run: | | |
| output=$(pnpm --filter workers-playground run build:testing && pnpm --filter workers-playground run deploy) | |
| echo "Extracting deployed URL from command output" | |
| url=$(echo "$output" | grep -oP 'Take a peek over at \K\S+') | |
| echo "Extracted URL: $url" | |
| echo "PLAYGROUND_URL=$url" >> $GITHUB_ENV | |
| env: | |
| CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }} | |
| VITE_DEVTOOLS_PREVIEW_URL: ${{ env.VITE_DEVTOOLS_PREVIEW_URL }} | |
| - name: "Comment on PR with Devtools Link" | |
| if: contains(github.event.*.labels.*.name, 'preview:chrome-devtools-patches') | |
| uses: marocchino/sticky-pull-request-comment@v2 | |
| with: | |
| header: ${{ steps.finder.outputs.pr }} | |
| message: | | |
| The Wrangler DevTools preview is now live. You can access it directly at: ${{ env.VITE_DEVTOOLS_PREVIEW_URL }}/js_app | |
| In order to test the DevTools preview in `wrangler`: | |
| 1. `npx wrangler dev`. | |
| 2. Hit `d` to open the DevTools in a fresh browser window. | |
| 3. Paste the DevTools preview URL into the address bar (keeping all existing query parameters), e.g: | |
| ``` | |
| - https://devtools.devprod.cloudflare.dev/js_app?theme=systemPreferred&ws=127.0.0.1%3A9229%2Fws&domain=tester&debugger=true | |
| + https://8afc7d3d.cloudflare-devtools.pages.dev/js_app?theme=systemPreferred&ws=127.0.0.1%3A9229%2Fws&domain=tester&debugger=true | |
| ``` | |
| - name: "Comment on PR with Workers Playground Link" | |
| if: contains(github.event.*.labels.*.name, 'preview:chrome-devtools-patches') && contains(github.event.*.labels.*.name, 'preview:workers-playground') | |
| uses: marocchino/sticky-pull-request-comment@v2 | |
| with: | |
| header: ${{ steps.finder.outputs.pr }} | |
| append: true | |
| message: | | |
| --- | |
| The Workers Playground preview is also now live. The Playground preview embeds the above DevTools preview, so you can see them working together at: | |
| ${{ env.PLAYGROUND_URL }}/playground |