Setting up preview links for prototypes

When Rezonant builds a production prototype, it opens a pull request against your repository and watches GitHub for a preview link — a live URL where you can click around the result. Rezonant doesn't deploy anything itself: your own deploy provider builds each pull request, and Rezonant picks up the link the provider posts back to GitHub (as a deployment, a check, or a PR comment).

If your repository has no deploy provider connected, prototypes still build — but no preview link ever appears. The build-prototype card flags this as "Preview links not set up" on the repository. This page covers your options for setting one up.

Option 1 — Vercel

Best fit for Next.js and most React/Vite apps. Vercel deploys every pull request out of the box and comments the preview URL on the PR.

1. Go to vercel.com/new and sign in with your GitHub account.
2. Import your repository — if it isn't listed, grant the Vercel GitHub App access to it when prompted.
3. Accept the default build settings (Vercel detects most frameworks) and click Deploy.

That's it: every PR gets a preview link automatically, and Rezonant picks it up with no further configuration.

Option 2 — Netlify

1. Go to app.netlify.com/start and sign in with GitHub.
2. Pick your repository from the list — grant the Netlify GitHub App access if it isn't shown.
3. Accept the detected build settings and deploy the site.

Netlify's Deploy Previews are on by default — each PR gets a preview link posted automatically.

caution

Don't use a "Deploy to Netlify" button link for this — that flow clones the repository into your account and deploys the copy, so previews would never appear on your real repository.

Option 3 — Cloudflare Pages

1. Open the Cloudflare dashboard and connect your GitHub account if prompted.
2. Select your repository and set the build command and output directory for your framework (Cloudflare suggests presets).
3. Save and deploy.

Preview deployments run for every PR automatically.

Option 4 — GitHub Pages (no external provider)

If you'd rather not connect a hosting provider, a GitHub Actions workflow can deploy each PR to GitHub Pages and comment the link. This suits apps that build to static files (Vite, Create React App); server-rendered frameworks like Next.js or Nuxt need a static-export step first.

Add this workflow to your repo as .github/workflows/deploy-preview.yml:

name: Deploy PR preview to GitHub Pages

on:
  pull_request:
    types: [opened, reopened, synchronize, closed]

permissions:
  contents: write
  pull-requests: write

concurrency:
  group: pr-preview-${{ github.ref }}
  cancel-in-progress: true

jobs:
  deploy-preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        if: github.event.action != 'closed'
      - uses: actions/setup-node@v4
        if: github.event.action != 'closed'
        with:
          node-version: 20
      - run: npm ci
        if: github.event.action != 'closed'
      - run: npm run build
        if: github.event.action != 'closed'
      # v1.8.1, pinned to a commit SHA since it runs in your repository.
      - uses: rossjrw/pr-preview-action@ffa7509e91a3ec8dfc2e5536c4d5c1acdf7a6de9
        with:
          source-dir: ./dist

Before committing it, check:

• source-dir matches your build output (./dist for Vite, ./build for Create React App).
• Your app uses relative asset paths (e.g. Vite base: './') — previews are served under /<repo>/pr-preview/pr-<number>/, so absolute paths load a blank page.
• The package manager commands match your repo (swap npm ci / npm run build for pnpm, yarn, or bun).
• In a monorepo, run the install/build steps in the frontend's directory and point source-dir there.

After the first workflow run, enable Pages in your repo's Settings → Pages with the gh-pages branch as the source.

Option 5 — your own CI

Any deploy setup works as long as it posts one of the signals Rezonant watches for after each push to a PR:

• a GitHub deployment with a successful status carrying the preview URL,
• a check or commit status whose target URL is the preview, or
• a PR comment containing the preview link.

Verifying it works

Once your provider's first deploy finishes, build a prototype: the preview link should appear on the PR within a few minutes of the build completing. You can also re-assess the repository from the build-prototype card (the refresh icon next to it) — once GitHub shows deployment activity, the "Preview links not set up" warning clears.