5.0 KiB

Raw Permalink Blame History

Migrating from Vercel to Cloudflare Pages

This guide will help you migrate your site from Vercel to Cloudflare Pages.

Overview

Current Setup:

✅ Frontend: Vercel (static site)
✅ Backend: Cloudflare Worker (jeffemmett-canvas.jeffemmett.workers.dev)

Target Setup:

✅ Frontend: Cloudflare Pages (canvas-website.pages.dev)
✅ Backend: Cloudflare Worker (unchanged)

Step 1: Configure Cloudflare Pages

In Cloudflare Dashboard:

Go to Cloudflare Dashboard
Navigate to Pages → Create a project
Connect your GitHub repository: Jeff-Emmett/canvas-website
Configure build settings:
- Project name: canvas-website (or your preferred name)
- Production branch: main
- Build command: npm run build
- Build output directory: dist
- Root directory: / (leave empty)
Click Save and Deploy

Step 2: Configure Environment Variables

In Cloudflare Pages Dashboard:

Go to your Pages project → Settings → Environment variables

Add all your VITE_* environment variables from Vercel:

Required variables (if you use them):

VITE_WORKER_ENV=production
VITE_GITHUB_TOKEN=...
VITE_QUARTZ_REPO=...
VITE_QUARTZ_BRANCH=...
VITE_CLOUDFLARE_API_KEY=...
VITE_CLOUDFLARE_ACCOUNT_ID=...
VITE_QUARTZ_API_URL=...
VITE_QUARTZ_API_KEY=...
VITE_DAILY_API_KEY=...

Note: Only add variables that start with VITE_ (these are exposed to the browser)

Set different values for Production and Preview environments if needed

Step 3: Configure Custom Domain (Optional)

If you have a custom domain:

Go to Pages → Your project → Custom domains
Click Set up a custom domain
Add your domain (e.g., jeffemmett.com)
Follow DNS instructions to add the CNAME record

Step 4: Verify Routing

The _redirects file has been created to handle SPA routing. This replaces the rewrites from vercel.json.

Routes configured:

/board/* → serves index.html
/inbox → serves index.html
/contact → serves index.html
/presentations → serves index.html
/dashboard → serves index.html
All other routes → serves index.html (SPA fallback)

Step 5: Update Worker URL for Production

Make sure your production environment uses the production worker:

In Cloudflare Pages → Settings → Environment variables
Set VITE_WORKER_ENV=production for Production environment
This will make the frontend connect to: https://jeffemmett-canvas.jeffemmett.workers.dev

Step 6: Test the Deployment

After the first deployment completes, visit your Pages URL
Test all routes:
- /board
- /inbox
- /contact
- /presentations
- /dashboard
Verify the canvas app connects to the Worker
Test real-time collaboration features

Step 7: Update DNS (If Using Custom Domain)

If you're using a custom domain:

Update your DNS records to point to Cloudflare Pages
Remove Vercel DNS records
Wait for DNS propagation (can take up to 48 hours)

Step 8: Disable Vercel Deployment (Optional)

Once everything is working on Cloudflare Pages:

Go to Vercel Dashboard
Navigate to your project → Settings → Git
Disconnect the repository or delete the project

Differences from Vercel

Headers

Vercel: Configured in vercel.json
Cloudflare Pages: Configured in _headers file (if needed) or via Cloudflare dashboard

Redirects/Rewrites

Vercel: Configured in vercel.json → rewrites
Cloudflare Pages: Configured in _redirects file ✅ (already created)

Environment Variables

Vercel: Set in Vercel dashboard
Cloudflare Pages: Set in Cloudflare Pages dashboard (same process)

Build Settings

Vercel: Auto-detected from vercel.json
Cloudflare Pages: Configured in dashboard (already set above)

Troubleshooting

Issue: Routes return 404

Solution: Make sure _redirects file is in the dist folder after build, or configure it in Cloudflare Pages dashboard

Issue: Environment variables not working

Solution:

Make sure variables start with VITE_
Rebuild after adding variables
Check browser console for errors

Issue: Worker connection fails