Add PR preview deployments for website changes by Copilot · Pull Request #172 · RazorConsole/RazorConsole

Copilot · 2025-11-23T16:17:03Z

Enables automated preview deployments when PRs modify the website, allowing contributors and reviewers to see changes before merging.

Implementation

A unified workflow provides both artifact uploads and optional Cloudflare deployment:

Combined preview workflow (.github/workflows/pr-preview-artifact.yml)

Triggers on website/** changes or manual workflow dispatch
Always uploads built site as GitHub Actions artifact (30-day retention)
Optionally deploys to Cloudflare Pages (if secrets configured)
Posts PR comment with download instructions and/or live preview link
Zero configuration required for artifact-based previews
Cloudflare deployment requires CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID secrets

The workflow updates existing comments rather than creating duplicates and gracefully handles missing Cloudflare secrets.

Example PR Comment

Without Cloudflare configured:

## 🚀 Preview Deployment

A preview build has been generated for this PR!

**Download the artifact:** [website-preview-123](https://github.com/...)

To view the preview locally:
1. Download the artifact from the workflow run
2. Extract the ZIP file
3. Serve with local web server (e.g., `npx serve dist`)

> 💡 **Tip:** For automatic live preview deployments, see `.github/PREVIEW_DEPLOYMENT.md`

With Cloudflare configured:

## 🚀 Preview Deployment

A preview build has been generated for this PR!

**Download the artifact:** [website-preview-123](https://github.com/...)

To view the preview locally:
1. Download the artifact from the workflow run
2. Extract the ZIP file
3. Serve with local web server (e.g., `npx serve dist`)

**Live Preview URL:** https://abc123.razorconsole.pages.dev

The live preview will be automatically updated when you push new commits to this PR.

Files Changed

.github/workflows/pr-preview-artifact.yml - Combined workflow (artifact + optional Cloudflare)
.github/PREVIEW_DEPLOYMENT.md - Setup guide for optional Cloudflare deployment
CONTRIBUTING.md - Preview deployment documentation

Fixes #171

Original prompt

This section details on the original issue you should resolve

<issue_title>Enable GitHub page preview on PR pipelines</issue_title>
<issue_description></issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Enable GitHub page preview on PR pipelines #171

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

- Add Cloudflare Pages deployment workflow (preview-deploy.yml) - Add artifact-based preview workflow (pr-preview-artifact.yml) - Add documentation for setup (PREVIEW_DEPLOYMENT.md) - Update CONTRIBUTING.md with preview deployment info Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

github-actions · 2025-11-23T16:29:44Z

🚀 Preview Deployment

A preview build has been generated for this PR!

Download the artifact:
website-preview-pr-172

To view the preview locally:

Download the artifact from the workflow run
Extract the ZIP file
Serve the files with a local web server
(e.g., npx serve dist)

Live Preview URL: https://b95d7f26.razorconsole.pages.dev

The live preview will be automatically updated when you push new
commits to this PR.

LittleLittleCloud

@copilot resolve comments

.github/workflows/pr-preview-artifact.yml

- Merge pr-preview-artifact.yml and preview-deploy.yml - Single workflow now uploads artifacts AND deploys to Cloudflare - Add workflow_dispatch for manual invocation - Update documentation to reflect combined workflow - Cloudflare deployment continues on error if secrets not configured Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

- Use descriptive artifact names for manual runs (branch-runNumber) - Add 'main' as final fallback for branch detection - Better support for workflow_dispatch scenarios Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

cloudflare-workers-and-pages · 2025-11-23T16:45:47Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	website	`3255333`	Nov 23 2025, 04:46 PM

Signed-off-by: Xiaoyun Zhang <bigmiao.zhang@gmail.com>

Simplified the pages deploy command in the workflow. Signed-off-by: Xiaoyun Zhang <bigmiao.zhang@gmail.com>

Copilot

Pull request overview

This PR adds automated preview deployments for website changes, enabling contributors and reviewers to see changes before merging. The implementation provides a unified workflow that always uploads build artifacts and optionally deploys to Cloudflare Pages when secrets are configured.

Key Changes:

Combined GitHub Actions workflow supporting both artifact uploads and optional Cloudflare deployment
Automatic PR comments with download links and optional live preview URLs
Documentation for setup and usage in CONTRIBUTING.md and .github/PREVIEW_DEPLOYMENT.md

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
`.github/workflows/pr-preview-artifact.yml`	New workflow that builds website on PR changes, uploads artifacts, optionally deploys to Cloudflare Pages, and comments on PRs with preview information
`.github/PREVIEW_DEPLOYMENT.md`	Comprehensive setup guide for optional Cloudflare Pages integration, including credentials configuration and workflow testing
`CONTRIBUTING.md`	Added section documenting the automated preview deployment feature for contributors

Copilot · 2025-11-23T17:20:16Z

.github/workflows/pr-preview-artifact.yml

+            3. Serve the files with a local web server
+               (e.g., \`npx serve dist\`)


The instruction references serving dist directory, but after extracting the artifact ZIP file, the directory structure may differ. The artifact is created from website/dist, so after extraction, the files might be at the root of the extracted folder or in a subdirectory.

Consider clarifying the instruction to be more explicit:

3. Serve the extracted files with a local web server (e.g., `cd website-preview-123` && `npx serve .`)

Or provide clearer guidance about the expected directory structure after extraction.

Suggested change

3. Serve the files with a local web server

(e.g., \`npx serve dist\`)

3. Serve the extracted files with a local web server

(e.g., \`cd website-preview-pr-${prNumber}\` && \`npx serve .\`)

Copilot · 2025-11-23T17:20:16Z

.github/workflows/pr-preview-artifact.yml

+      - name: Deploy to Cloudflare Pages
+        id: deploy
+        continue-on-error: true
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: |
+            pages project list
+            pages deploy website/dist --project-name=razorconsole --branch=${{ github.head_ref || github.ref_name || 'main' }}
+
+      - name: Comment PR with preview info
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const prNumber = context.issue.number;
+            const runId = context.runId;
+            const owner = context.repo.owner;
+            const repo = context.repo.repo;
+            const artifactUrl =
+              `https://github.com/${owner}/${repo}/actions/runs/${runId}`;
+            const deploymentUrl = '${{ steps.deploy.outputs.deployment-url }}';


The deployment-url output from the wrangler-action step may not be populated when using a custom command parameter. The action's outputs are typically only available when using its built-in deployment parameters rather than raw CLI commands.

This means the live preview URL might not appear in PR comments even when Cloudflare deployment succeeds. The workflow would need to either:

Parse the deployment URL from the wrangler CLI output and set it as a step output

Use wrangler-action's native parameters if they support Pages deployment

Accept that users must check workflow logs for the deployment URL

Consider testing whether steps.deploy.outputs.deployment-url is actually populated with the current configuration.

Copilot · 2025-11-23T17:20:17Z

.github/workflows/pr-preview-artifact.yml

+            const botComment = comments.find(comment =>
+              comment.user.type === 'Bot' &&
+              (comment.body.includes('Preview Deployment') ||
+               comment.body.includes('Preview Build Artifact'))


[nitpick] Variable shadowing: the inner comment variable in the find callback (line 108) shadows the outer comment variable declared on line 72. While this works correctly in JavaScript, it can reduce code clarity.

Consider renaming the callback parameter to avoid confusion:

const botComment = comments.find(c => c.user.type === 'Bot' && (c.body.includes('Preview Deployment') || c.body.includes('Preview Build Artifact')) );

This makes it clearer that you're iterating over individual comment objects to find a specific one.

Suggested change

const botComment = comments.find(comment =>

comment.user.type === 'Bot' &&

(comment.body.includes('Preview Deployment') ||

comment.body.includes('Preview Build Artifact'))

const botComment = comments.find(c =>

c.user.type === 'Bot' &&

(c.body.includes('Preview Deployment') ||

c.body.includes('Preview Build Artifact'))

Copilot · 2025-11-23T17:20:17Z

.github/workflows/pr-preview-artifact.yml

+            A preview build has been generated for this PR!
+
+            **Download the artifact:**
+            [website-preview-pr-${prNumber}](${artifactUrl})


The artifact name in the PR comment (website-preview-pr-${prNumber}) doesn't match the actual artifact name format defined in line 43 (website-preview-${{ github.event.pull_request.number || format('{0}-{1}', github.ref_name, github.run_number) }}).

For a pull request, the actual artifact name would be website-preview-123 (not website-preview-pr-123). This inconsistency could confuse users trying to locate the artifact.

Suggested fix: Change line 77 to use website-preview-${prNumber} to match the actual artifact naming pattern.

Suggested change

[website-preview-pr-${prNumber}](${artifactUrl})

[website-preview-${prNumber}](${artifactUrl})

Copilot · 2025-11-23T17:20:17Z

.github/workflows/pr-preview-artifact.yml

+          command: |
+            pages project list
+            pages deploy website/dist --project-name=razorconsole --branch=${{ github.head_ref || github.ref_name || 'main' }}


The pages project list command on line 55 appears to be unnecessary before the actual deployment. This command lists all pages projects but doesn't contribute to the deployment process.

Consider removing this command and simplifying the deployment to just:

command: pages deploy website/dist --project-name=razorconsole --branch=${{ github.head_ref || github.ref_name || 'main' }}

This will reduce execution time and potential noise in logs.

Suggested change

command: |

pages project list

pages deploy website/dist --project-name=razorconsole --branch=${{ github.head_ref || github.ref_name || 'main' }}

command: pages deploy website/dist --project-name=razorconsole --branch=${{ github.head_ref || github.ref_name || 'main' }}

Initial plan

23463c4

Copilot AI assigned Copilot and LittleLittleCloud Nov 23, 2025

Copilot started work on behalf of LittleLittleCloud November 23, 2025 16:17 View session

Copilot AI and others added 3 commits November 23, 2025 16:23

Use npm install for consistency with deploy-pages workflow

f05cd5d

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Remove accidentally committed actionlint binary

9b83a6b

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Enable GitHub page preview on PR pipelines~~ Add PR preview deployments for website changes Nov 23, 2025

Copilot AI requested a review from LittleLittleCloud November 23, 2025 16:33

Copilot finished work on behalf of LittleLittleCloud November 23, 2025 16:33

LittleLittleCloud reviewed Nov 23, 2025

View reviewed changes

.github/workflows/pr-preview-artifact.yml Outdated Show resolved Hide resolved

Copilot started work on behalf of LittleLittleCloud November 23, 2025 16:40 View session

Copilot AI and others added 2 commits November 23, 2025 16:44

Copilot AI requested a review from LittleLittleCloud November 23, 2025 16:47

Copilot finished work on behalf of LittleLittleCloud November 23, 2025 16:47

LittleLittleCloud added 3 commits November 23, 2025 09:01

Add command to list Cloudflare pages projects

3662982

Signed-off-by: Xiaoyun Zhang <bigmiao.zhang@gmail.com>

Update pr-preview-artifact.yml

64d961c

Signed-off-by: Xiaoyun Zhang <bigmiao.zhang@gmail.com>

Refactor deploy command in PR preview workflow

8d60772

Simplified the pages deploy command in the workflow. Signed-off-by: Xiaoyun Zhang <bigmiao.zhang@gmail.com>

LittleLittleCloud marked this pull request as ready for review November 23, 2025 17:16

Copilot AI review requested due to automatic review settings November 23, 2025 17:16

LittleLittleCloud approved these changes Nov 23, 2025

View reviewed changes

LittleLittleCloud merged commit e4914d4 into main Nov 23, 2025
10 checks passed

LittleLittleCloud deleted the copilot/enable-github-page-preview branch November 23, 2025 17:17

github-actions bot added this to the v0.2.0 milestone Nov 23, 2025

Copilot started reviewing on behalf of LittleLittleCloud November 23, 2025 17:17 View session

Copilot finished reviewing on behalf of LittleLittleCloud November 23, 2025 17:19

Copilot AI reviewed Nov 23, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add PR preview deployments for website changes#172

Add PR preview deployments for website changes#172
LittleLittleCloud merged 9 commits intomainfrom
copilot/enable-github-page-preview

Copilot AI commented Nov 23, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 23, 2025 •

edited

Loading

Uh oh!

LittleLittleCloud left a comment

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Nov 23, 2025 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 23, 2025

Uh oh!

Copilot AI Nov 23, 2025

Uh oh!

Copilot AI Nov 23, 2025

Uh oh!

Copilot AI Nov 23, 2025

Uh oh!

Copilot AI Nov 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		3. Serve the files with a local web server
		(e.g., \`npx serve dist\`)

	[website-preview-pr-${prNumber}](${artifactUrl})
	[website-preview-${prNumber}](${artifactUrl})

Conversation

Copilot AI commented Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementation

Example PR Comment

Files Changed

Comments on the Issue (you are @copilot in this section)

Uh oh!

github-actions bot commented Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Preview Deployment

Uh oh!

LittleLittleCloud left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Nov 23, 2025 •

edited

Loading

github-actions bot commented Nov 23, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Nov 23, 2025 •

edited

Loading