ci: add PR previews, update guidelines, fix router basename#166
Open
Atharva0506 wants to merge 3 commits into
Open
ci: add PR previews, update guidelines, fix router basename#166Atharva0506 wants to merge 3 commits into
Atharva0506 wants to merge 3 commits into
Conversation
- Migrate production deploy from actions/deploy-pages API to gh-pages branch via peaceiris/actions-gh-pages (preserves pr-preview/ directories) - Add new preview-pages.yml workflow for automated PR previews - Builds frontend with correct base path for subdirectory routing - Posts/updates PR comment with live preview URL - Cleans up preview directory when PR is closed or merged - Fix 12+ hardcoded absolute image paths (src='/...') to use import.meta.env.BASE_URL for correct resolution in subdirectories - Remove unnecessary \�asename\ from HashRouter in App.jsx to prevent 404 routing issues in PR preview subdirectory deployments - Restructure CONTRIBUTING.md to establish clear General, Smart Contract, and Frontend contribution standards (including PR preview guidelines)
…tecture The original single-workflow PR preview (preview-pages.yml) failed on the StabilityNexus org with 'Permission denied to github-actions[bot]' because org-level settings restrict GITHUB_TOKEN to read-only. Split into two workflows: - pr-build.yml: runs on pull_request with read-only permissions (fork-safe), uploads only metadata — no build, no secrets needed. - pr-deploy.yml: runs on workflow_run in base repo context with write access. Checks out PR code, builds with secrets (wallet connect works in previews), deploys to gh-pages, and comments preview URL on the PR. Security: - pr-deploy.yml always runs from main — forks cannot modify deploy logic - PR code checked out with persist-credentials: false - GITHUB_TOKEN only passed to peaceiris deploy action, never to build steps - Metadata validated (PR number, action, SHA) to prevent injection Cleanup: - On PR close/merge: removes pr-preview/pr-N/ from gh-pages - Updates PR comment to indicate preview removal Production impact: None. deploy.yml restores pr-preview/ dirs before deploying, and PR previews use keep_files: true. Requires org admin to enable 'Read and write permissions' for GITHUB_TOKEN at Settings > Actions > General > Workflow permissions.
Contributor
WalkthroughAdds CI workflows for PR preview build and deploy, refactors main deploy to use peaceiris/actions-gh-pages, removes Router basename, and updates frontend image paths and PDF logo loading to use import.meta.env.BASE_URL. ChangesPR Preview Deployment & Asset Base Paths
Sequence DiagramsequenceDiagram
participant PR as Pull Request
participant BuildWF as "PR Preview: Build"
participant DeployWF as "PR Preview: Deploy"
participant GHPages as "gh-pages branch"
PR->>BuildWF: open/synchronize/reopen/close (frontend/**)
BuildWF->>BuildWF: write pr-metadata artifact (PR#, SHA, action)
BuildWF->>DeployWF: workflow_run completed (artifact available)
DeployWF->>DeployWF: download pr-metadata, validate PR#/SHA/action
alt action == deploy
DeployWF->>DeployWF: checkout PR SHA, build (VITE secrets, base /pr-preview/pr-N/)
DeployWF->>GHPages: deploy frontend/dist to pr-preview/pr-N/ (keep other files)
DeployWF->>PR: post or update preview comment with URL and short SHA
else action == cleanup
DeployWF->>GHPages: remove pr-preview/pr-N/ if present
DeployWF->>PR: update existing preview comment to "preview removed"
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Atharva0506
force-pushed
the
ci/gh-pages-preview
branch
from
9fa0b90 to
ddc4823
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/components/InvoicePreview.jsx (1)
246-247:⚠️ Potential issue | 🟠 Major | ⚡ Quick winRoot cause: incomplete base-path migration for token fallback assets.
These locations still hardcode
"/tokenImages/generic.png"while the app now targets subpath deployments (PR preview/gh-pages). Convert all token fallback asset paths to${import.meta.env.BASE_URL}tokenImages/generic.pngto avoid 404s outside root hosting.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/InvoicePreview.jsx` around lines 246 - 247, Replace the hardcoded fallback path "/tokenImages/generic.png" used when setting e.target.src in the image error handler inside the InvoicePreview component with the BASE_URL-aware path by using import.meta.env.BASE_URL + "tokenImages/generic.png" (i.e. set e.target.src to `${import.meta.env.BASE_URL}tokenImages/generic.png`), ensuring all occurrences in InvoicePreview.jsx that assign e.target.src on error or fallback use this BASE_URL-prefixed path so subpath deployments don't 404.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.github/workflows/deploy.yml:
- Line 79: Multiple workflow steps reference mutable action tags
(peaceiris/actions-gh-pages@v4, actions/upload-artifact@v4,
actions/github-script@v7, actions/checkout@v4, actions/setup-node@v4); replace
each tag reference with the corresponding commit SHA from the action's GitHub
repo to pin to an immutable commit, updating all occurrences across the
workflows (e.g., every peaceiris/actions-gh-pages@v4,
actions/upload-artifact@v4, actions/github-script@v7, actions/checkout@v4,
actions/setup-node@v4 instances), and add a note or config to enable
Dependabot/renovate to regularly update these SHAs going forward.
- Line 13: Add an inline explanatory comment next to the workflow-level
permission declaration `contents: write` in the deploy workflow to state that
this permission is required so `peaceiris/actions-gh-pages` can push to the
gh-pages branch and to call out the security boundary (e.g., only used for
publishing, not for other repo data). Locate the `permissions` block containing
`contents: write` and add a brief comment referencing
`peaceiris/actions-gh-pages` and why write access is limited/required.
---
Outside diff comments:
In `@frontend/src/components/InvoicePreview.jsx`:
- Around line 246-247: Replace the hardcoded fallback path
"/tokenImages/generic.png" used when setting e.target.src in the image error
handler inside the InvoicePreview component with the BASE_URL-aware path by
using import.meta.env.BASE_URL + "tokenImages/generic.png" (i.e. set
e.target.src to `${import.meta.env.BASE_URL}tokenImages/generic.png`), ensuring
all occurrences in InvoicePreview.jsx that assign e.target.src on error or
fallback use this BASE_URL-prefixed path so subpath deployments don't 404.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 7baf445b-3546-4532-b3f5-c9f5e4ac7f99
📒 Files selected for processing (13)
.github/workflows/deploy.yml.github/workflows/pr-build.yml.github/workflows/pr-deploy.ymlCONTRIBUTING.mdfrontend/src/App.jsxfrontend/src/components/InvoicePreview.jsxfrontend/src/components/Navbar.jsxfrontend/src/page/About.jsxfrontend/src/page/BatchPayment.jsxfrontend/src/page/Landing.jsxfrontend/src/page/ReceivedInvoice.jsxfrontend/src/page/SentInvoice.jsxfrontend/src/utils/generateInvoicePDF.js
Member
Author
|
@coderabbitai review |
Contributor
✅ Action performedReview finished.
|
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
.github/workflows/deploy.yml (2)
67-72: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick winMisleading error message when copy fails.
The error message "No pr-preview directory on gh-pages yet" is printed both when
git checkoutfails (pr-preview doesn't exist) and when checkout succeeds butcporrmfails. If the copy fails, this message is inaccurate and the build state may be incomplete.♻️ Refactor to distinguish failure modes
- git checkout origin/gh-pages -- pr-preview/ 2>/dev/null && { + if git checkout origin/gh-pages -- pr-preview/ 2>/dev/null; then + echo "Found pr-preview directory on gh-pages, restoring..." cp -r pr-preview ./frontend/dist/pr-preview rm -rf pr-preview - } || { + else echo "No pr-preview directory on gh-pages yet — skipping restore." - } + fi🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.github/workflows/deploy.yml around lines 67 - 72, The current block prints the same "No pr-preview..." message for both a failed git checkout and failures of the subsequent cp/rm steps; update the logic to distinguish those cases by first attempting git checkout origin/gh-pages -- pr-preview and if that fails print the existing "No pr-preview directory on gh-pages yet — skipping restore." message, but if checkout succeeds then run cp -r pr-preview ./frontend/dist/pr-preview and rm -rf pr-preview and check their exit statuses separately, emitting a different, accurate error message (and non-zero exit if desired) when the copy or remove commands fail; reference the commands "git checkout origin/gh-pages -- pr-preview", "cp -r pr-preview ./frontend/dist/pr-preview", and "rm -rf pr-preview" when making these checks.
56-85:⚠️ Potential issue | 🟠 Major | 🏗️ Heavy liftRace condition: production gh-pages deploy can overwrite concurrent PR previews
In
.github/workflows/deploy.yml, production deploy runsRestore PR preview directories from gh-pages(git fetch origin gh-pagesand copypr-preview/into./frontend/dist/pr-preview, then deletes the localpr-preview/). It then publishes./frontend/disttogh-pagesviapeaceiris/actions-gh-pages@v4withoutkeep_files: true, so whatever gets pushed in the meantime can be lost.
concurrencygroups don’t coordinate across workflows (deploy.yml:gh-pages-deploy;pr-deploy.yml:pr-preview-deploy), so these can run concurrently. Meanwhile, PR previews are deployed topr-preview/pr-${{ env.PR_NUMBER }}withkeep_files: true.Race window
- Main deploy fetches/restores
pr-preview/from gh-pages.- PR deploy publishes/updates
pr-preview/pr-N/.- Main deploy publishes the refreshed production
publish_dirtogh-pages, overwriting the branch contents with the olderpr-preview/snapshot from step 1.Potential impact
- PR preview links can 404/break until the next update.
- Preview deployments may appear “lost” temporarily.
Mitigation options
- Use a shared
concurrency.groupacross bothdeploy.ymlandpr-deploy.ymlto serialize gh-pages writes.- Alternatively, set
keep_files: trueon the productionpeaceiris/actions-gh-pages@v4step (requires evaluating stale-file behavior).- If intentionally accepted, document the overwrite window and expected frequency.
The two-workflow setup is security-conscious, but this overwrite risk should be explicitly addressed.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.github/workflows/deploy.yml around lines 56 - 85, Add protection against gh-pages race by configuring the peaceiris/actions-gh-pages@v4 publish to preserve existing files and by serializing gh-pages writes across workflows: in the "Deploy to gh-pages branch" step add with: keep_files: true to ensure restored pr-preview dirs aren’t clobbered, and add a shared concurrency.group (e.g. gh-pages-deploy) to both this workflow and the PR preview workflow (pr-deploy.yml) so gh-pages publishes are serialized.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In @.github/workflows/deploy.yml:
- Around line 67-72: The current block prints the same "No pr-preview..."
message for both a failed git checkout and failures of the subsequent cp/rm
steps; update the logic to distinguish those cases by first attempting git
checkout origin/gh-pages -- pr-preview and if that fails print the existing "No
pr-preview directory on gh-pages yet — skipping restore." message, but if
checkout succeeds then run cp -r pr-preview ./frontend/dist/pr-preview and rm
-rf pr-preview and check their exit statuses separately, emitting a different,
accurate error message (and non-zero exit if desired) when the copy or remove
commands fail; reference the commands "git checkout origin/gh-pages --
pr-preview", "cp -r pr-preview ./frontend/dist/pr-preview", and "rm -rf
pr-preview" when making these checks.
- Around line 56-85: Add protection against gh-pages race by configuring the
peaceiris/actions-gh-pages@v4 publish to preserve existing files and by
serializing gh-pages writes across workflows: in the "Deploy to gh-pages branch"
step add with: keep_files: true to ensure restored pr-preview dirs aren’t
clobbered, and add a shared concurrency.group (e.g. gh-pages-deploy) to both
this workflow and the PR preview workflow (pr-deploy.yml) so gh-pages publishes
are serialized.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 8a4d91fa-ceea-475f-bd94-8089f2101bd7
📒 Files selected for processing (1)
.github/workflows/deploy.yml
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addressed Issues:
Fixes #(TODO:issue number)
Adds automated PR preview deployments (with a secure, fork-safe architecture), updates contribution guidelines, and fixes routing bugs.
Description of Changes:
pr-build.yml: Runs onpull_requestwith read-only permissions. Uploads PR metadata as an artifact.pr-deploy.yml: Runs onworkflow_runin the base repository context with write access. Safely checks out PR code (without git credentials), builds the frontend with secrets (so Wallet Connect works in previews), deploys togh-pagesbranch, and posts a bot comment with the preview URL.gh-pagesand updates the PR comment when the PR is closed or merged.deploy.yml): Migrated production deploy to usepeaceiris/actions-gh-pagesto preserve PR preview directories during redeploys.src="/...") withimport.meta.env.BASE_URLfor correct resolution in preview subdirectories.basenamefrom theHashRouterinApp.jsxwhich would have caused broken routes (404s) in subdirectory deployments.CONTRIBUTING.md: Restructured the document to establish a clear "General Contribution & Review Process", including rules for passing local tests, resolving CodeRabbit reviews, and properly dropping links in the Discord channel.Architecture & Security Details:
Click to view Architecture & Security details (Why Two Workflows?)
✅ Secure Architecture (Fork-Safe)
flowchart TD subgraph "pr-build.yml — Fork Context" A["PR opened / updated / closed"] --> B["pull_request trigger"] B --> C["🔒 Read-only, no secrets"] C --> D["📄 Upload metadata only\n(PR number, SHA, action)"] end subgraph "pr-deploy.yml — Base Repo Context" E["workflow_run trigger\n🔒 Always runs from main"] --> F["Download + validate metadata"] F --> G{"action?"} G -->|"deploy"| H["Checkout PR code\n(persist-credentials: false)"] H --> I["Build with secrets ✅\n(wallet connect works)"] I --> J["Deploy to gh-pages\npr-preview/pr-N/"] J --> K["💬 Comment preview URL"] G -->|"cleanup"| L["🗑️ Remove pr-preview/pr-N/"] L --> M["💬 Update: Preview removed"] end D --> E style C fill:#4ecdc4,color:#fff style E fill:#45b7d1,color:#fff style I fill:#2ecc71,color:#fff style J fill:#45b7d1,color:#fff style L fill:#f7dc6f,color:#000Security Benefits:
VITE_WALLETCONNECT_PROJECT_IDworks in previews.pr-deploy.ymlALWAYS runs from themainbranch. A malicious fork cannot alter the deploy logic or steal theGITHUB_TOKEN.Screenshots/Recordings:
Example
Because we are deploying to
gh-pagesfrom a GitHub Action, a repository administrator must update the Workflow permissions before the PR preview action will succeed.Steps to apply:
(Note: This only raises the maximum allowed permission. The
pr-build.ymlworkflow still explicitly restricts itself tocontents: readto remain secure.)AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: I used AI to generate and explore edge cases for CI testing, and to architect a secure, fork-safe two-workflow deployment pipeline.
Checklist
Summary by CodeRabbit
New Features
Chores
Documentation