169 lines
5.0 KiB
Markdown
169 lines
5.0 KiB
Markdown
# 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:
|
|
|
|
1. Go to [Cloudflare Dashboard](https://dash.cloudflare.com/)
|
|
2. Navigate to **Pages** → **Create a project**
|
|
3. Connect your GitHub repository: `Jeff-Emmett/canvas-website`
|
|
4. 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)
|
|
|
|
5. Click **Save and Deploy**
|
|
|
|
## Step 2: Configure Environment Variables
|
|
|
|
### In Cloudflare Pages Dashboard:
|
|
|
|
1. Go to your Pages project → **Settings** → **Environment variables**
|
|
2. 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)
|
|
|
|
3. Set different values for **Production** and **Preview** environments if needed
|
|
|
|
## Step 3: Configure Custom Domain (Optional)
|
|
|
|
If you have a custom domain:
|
|
|
|
1. Go to **Pages** → Your project → **Custom domains**
|
|
2. Click **Set up a custom domain**
|
|
3. Add your domain (e.g., `jeffemmett.com`)
|
|
4. 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:
|
|
|
|
1. In Cloudflare Pages → **Settings** → **Environment variables**
|
|
2. Set `VITE_WORKER_ENV=production` for **Production** environment
|
|
3. This will make the frontend connect to: `https://jeffemmett-canvas.jeffemmett.workers.dev`
|
|
|
|
## Step 6: Test the Deployment
|
|
|
|
1. After the first deployment completes, visit your Pages URL
|
|
2. Test all routes:
|
|
- `/board`
|
|
- `/inbox`
|
|
- `/contact`
|
|
- `/presentations`
|
|
- `/dashboard`
|
|
3. Verify the canvas app connects to the Worker
|
|
4. Test real-time collaboration features
|
|
|
|
## Step 7: Update DNS (If Using Custom Domain)
|
|
|
|
If you're using a custom domain:
|
|
|
|
1. Update your DNS records to point to Cloudflare Pages
|
|
2. Remove Vercel DNS records
|
|
3. Wait for DNS propagation (can take up to 48 hours)
|
|
|
|
## Step 8: Disable Vercel Deployment (Optional)
|
|
|
|
Once everything is working on Cloudflare Pages:
|
|
|
|
1. Go to Vercel Dashboard
|
|
2. Navigate to your project → **Settings** → **Git**
|
|
3. 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
|
|
**Solution**:
|
|
- Verify `VITE_WORKER_ENV=production` is set
|
|
- Check Worker is deployed and accessible
|
|
- Check CORS settings in Worker
|
|
|
|
## Files Changed
|
|
|
|
- ✅ Created `_redirects` file (replaces `vercel.json` rewrites)
|
|
- ✅ Created this migration guide
|
|
- ⚠️ `vercel.json` can be kept for reference or removed
|
|
|
|
## Next Steps
|
|
|
|
1. ✅ Configure Cloudflare Pages project
|
|
2. ✅ Add environment variables
|
|
3. ✅ Test deployment
|
|
4. ⏳ Update DNS (if using custom domain)
|
|
5. ⏳ Disable Vercel (once confirmed working)
|
|
|
|
## Support
|
|
|
|
If you encounter issues:
|
|
- Check Cloudflare Pages build logs
|
|
- Check browser console for errors
|
|
- Verify Worker is accessible
|
|
- Check environment variables are set correctly
|
|
|