Skip to content

Version Packages

Version Packages #7343

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:wrangler-devtools | packages/wrangler-devtools
# 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:wrangler-devtools') || 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:wrangler-devtools')
run: |
output=$(pnpm --filter @cloudflare/wrangler-devtools 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:wrangler-devtools')
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:wrangler-devtools') && 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