diff --git a/.github/workflows/deploy-worker.yml b/.github/workflows/deploy-worker.yml index e32847a..2a51a2f 100644 --- a/.github/workflows/deploy-worker.yml +++ b/.github/workflows/deploy-worker.yml @@ -21,14 +21,12 @@ jobs: - name: Install Dependencies run: npm ci - working-directory: ./worker - name: Deploy to Cloudflare Workers run: | - npm install -g wrangler@3.107.3 - # Uses default wrangler.toml (production config) + npm install -g wrangler@latest + # Uses default wrangler.toml (production config) from root directory wrangler deploy - working-directory: ./worker env: CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }} CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} diff --git a/.github/workflows/quartz-sync.yml b/.github/workflows/quartz-sync.yml index 19f3d7e..0c2f9a6 100644 --- a/.github/workflows/quartz-sync.yml +++ b/.github/workflows/quartz-sync.yml @@ -1,3 +1,7 @@ +# DISABLED: This workflow is preserved for future use in another repository +# To re-enable: Remove the `if: false` condition below +# This workflow syncs notes to a Quartz static site (separate from the canvas website) + name: Quartz Sync on: @@ -14,6 +18,8 @@ on: jobs: sync-quartz: + # DISABLED: Set to false to prevent this workflow from running + if: false runs-on: ubuntu-latest steps: diff --git a/CLOUDFLARE_PAGES_MIGRATION.md b/CLOUDFLARE_PAGES_MIGRATION.md new file mode 100644 index 0000000..313f221 --- /dev/null +++ b/CLOUDFLARE_PAGES_MIGRATION.md @@ -0,0 +1,168 @@ +# 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 + diff --git a/DEPLOYMENT_GUIDE.md b/DEPLOYMENT_GUIDE.md new file mode 100644 index 0000000..34a6763 --- /dev/null +++ b/DEPLOYMENT_GUIDE.md @@ -0,0 +1,90 @@ +# Deployment Guide + +## Frontend Deployment (Cloudflare Pages) + +The frontend is deployed to **Cloudflare Pages** (migrated from Vercel). + +### Configuration +- **Build command**: `npm run build` +- **Build output directory**: `dist` +- **SPA routing**: Handled by `_redirects` file + +### Environment Variables +Set in Cloudflare Pages dashboard → Settings → Environment variables: +- All `VITE_*` variables needed for the frontend +- `VITE_WORKER_ENV=production` for production + +See `CLOUDFLARE_PAGES_MIGRATION.md` for detailed migration guide. + +## Worker Deployment Strategy + +**Recommendation: Use GitHub Actions only** to avoid conflicts and duplication. + +### Current Setup +- ✅ **GitHub Actions**: Deploys worker on push to `main` branch +- ❌ **Cloudflare Workers Builds**: Also deploying (causing conflicts) + +### How to Disable Cloudflare Workers Builds + +1. Go to [Cloudflare Dashboard](https://dash.cloudflare.com/) +2. Navigate to **Workers & Pages** → **jeffemmett-canvas** +3. Go to **Settings** → **Builds & Deployments** +4. **Disable** "Automatically deploy from Git" or remove the Git integration +5. Alternatively, go to **Settings** → **Integrations** and disconnect GitHub if connected + +### Why Use GitHub Actions? + +**Advantages:** +- ✅ Single source of truth for deployments +- ✅ Better control over deployment process +- ✅ Can add tests, checks, and conditional deployments +- ✅ Version tracking in GitHub +- ✅ No conflicts between two deployment systems + +**Cloudflare Workers Builds:** +- ❌ Can conflict with GitHub Actions +- ❌ Less control over the process +- ❌ Harder to debug when issues occur + +### Migration Fix + +The worker now includes a migration to rename `TldrawDurableObject` → `AutomergeDurableObject`: + +```toml +[[migrations]] +tag = "v2" +renamed_classes = [ + { from = "TldrawDurableObject", to = "AutomergeDurableObject" } +] +``` + +This fixes the error: "New version of script does not export class 'TldrawDurableObject'" + +### Manual Deployment (if needed) + +If you need to deploy manually: + +```bash +# Production +npm run deploy:worker + +# Development +npm run deploy:worker:dev +``` + +Or directly: +```bash +wrangler deploy # Production (uses wrangler.toml) +wrangler deploy --config wrangler.dev.toml # Dev +``` + +## Pages Deployment + +Pages deployment is separate and should be configured in Cloudflare Pages dashboard: +- **Build command**: `npm run build` +- **Build output directory**: `dist` +- **Root directory**: `/` (or leave empty) + +**Note**: `wrangler.toml` is for Workers only, not Pages. + + diff --git a/FATHOM_INTEGRATION.md b/FATHOM_INTEGRATION.md index 718afe6..56b2073 100644 --- a/FATHOM_INTEGRATION.md +++ b/FATHOM_INTEGRATION.md @@ -134,6 +134,8 @@ The Fathom transcript shape includes: + + diff --git a/MIGRATION_CHECKLIST.md b/MIGRATION_CHECKLIST.md new file mode 100644 index 0000000..2736d4b --- /dev/null +++ b/MIGRATION_CHECKLIST.md @@ -0,0 +1,79 @@ +# Vercel → Cloudflare Pages Migration Checklist + +## ✅ Completed Setup + +- [x] Created `_redirects` file for SPA routing (in `src/public/`) +- [x] Updated `package.json` to remove Vercel from deploy script +- [x] Created migration guide (`CLOUDFLARE_PAGES_MIGRATION.md`) +- [x] Updated deployment documentation + +## 📋 Action Items + +### 1. Create Cloudflare Pages Project +- [ ] Go to [Cloudflare Dashboard](https://dash.cloudflare.com/) +- [ ] Navigate to **Pages** → **Create a project** +- [ ] Connect GitHub repository: `Jeff-Emmett/canvas-website` +- [ ] Configure: + - **Project name**: `canvas-website` + - **Production branch**: `main` + - **Build command**: `npm run build` + - **Build output directory**: `dist` + - **Root directory**: `/` (leave empty) + +### 2. Set Environment Variables +- [ ] Go to Pages project → **Settings** → **Environment variables** +- [ ] Add all `VITE_*` variables from Vercel: + - `VITE_WORKER_ENV=production` (for production) + - `VITE_WORKER_ENV=dev` (for preview) + - Any other `VITE_*` variables you use +- [ ] Set different values for **Production** and **Preview** if needed + +### 3. Test First Deployment +- [ ] Wait for first deployment to complete +- [ ] Visit Pages URL (e.g., `canvas-website.pages.dev`) +- [ ] Test routes: + - [ ] `/board` + - [ ] `/inbox` + - [ ] `/contact` + - [ ] `/presentations` + - [ ] `/dashboard` +- [ ] Verify canvas app connects to Worker +- [ ] Test real-time collaboration + +### 4. Configure Custom Domain (if applicable) +- [ ] Go to Pages project → **Custom domains** +- [ ] Add your domain (e.g., `jeffemmett.com`) +- [ ] Update DNS records to point to Cloudflare Pages +- [ ] Wait for DNS propagation + +### 5. Clean Up Vercel (after confirming Cloudflare works) +- [ ] Verify everything works on Cloudflare Pages +- [ ] Go to Vercel Dashboard +- [ ] Disconnect repository or delete project +- [ ] Update DNS records if using custom domain + +## 🔍 Verification Steps + +After migration, verify: +- ✅ All routes work (no 404s) +- ✅ Canvas app loads and connects to Worker +- ✅ Real-time collaboration works +- ✅ Environment variables are accessible +- ✅ Assets load correctly +- ✅ No console errors + +## 📝 Notes + +- The `_redirects` file is in `src/public/` and will be copied to `dist/` during build +- Worker deployment is separate and unchanged +- Environment variables must start with `VITE_` to be accessible in the browser +- Cloudflare Pages automatically deploys on push to `main` branch + +## 🆘 If Something Goes Wrong + +1. Check Cloudflare Pages build logs +2. Check browser console for errors +3. Verify environment variables are set +4. Verify Worker is accessible +5. Check `_redirects` file is in `dist/` after build + diff --git a/WORKER_ENV_GUIDE.md b/WORKER_ENV_GUIDE.md index 33bfe23..6f13eef 100644 --- a/WORKER_ENV_GUIDE.md +++ b/WORKER_ENV_GUIDE.md @@ -85,6 +85,8 @@ You can also manually edit the environment by: + + diff --git a/_redirects b/_redirects new file mode 100644 index 0000000..7ca73b2 --- /dev/null +++ b/_redirects @@ -0,0 +1,14 @@ +# Cloudflare Pages redirects and rewrites +# This file handles SPA routing and URL rewrites (replaces vercel.json rewrites) + +# SPA fallback - all routes should serve index.html +/* /index.html 200 + +# Specific route rewrites (matching vercel.json) +/board/* /index.html 200 +/board /index.html 200 +/inbox /index.html 200 +/contact /index.html 200 +/presentations /index.html 200 +/dashboard /index.html 200 + diff --git a/package.json b/package.json index 3dd79d4..b1f9f3d 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "build": "tsc && vite build", "build:worker": "wrangler build --config wrangler.dev.toml", "preview": "vite preview", - "deploy": "tsc && vite build && vercel deploy --prod && wrangler deploy", + "deploy": "tsc && vite build && wrangler deploy", + "deploy:pages": "tsc && vite build", "deploy:worker": "wrangler deploy", "deploy:worker:dev": "wrangler deploy --config wrangler.dev.toml", "types": "tsc --noEmit" diff --git a/src/components/location/LocationDashboard.tsx b/src/components/location/LocationDashboard.tsx index 9135784..2853fac 100644 --- a/src/components/location/LocationDashboard.tsx +++ b/src/components/location/LocationDashboard.tsx @@ -262,6 +262,8 @@ export const LocationDashboard: React.FC = () => { + + diff --git a/src/components/location/LocationMap.tsx b/src/components/location/LocationMap.tsx index 797ef20..3415ad9 100644 --- a/src/components/location/LocationMap.tsx +++ b/src/components/location/LocationMap.tsx @@ -233,6 +233,8 @@ export const LocationMap: React.FC = ({ + + diff --git a/src/components/location/LocationViewer.tsx b/src/components/location/LocationViewer.tsx index 999eaab..d568356 100644 --- a/src/components/location/LocationViewer.tsx +++ b/src/components/location/LocationViewer.tsx @@ -175,6 +175,8 @@ export const LocationViewer: React.FC = ({ shareToken }) => + + diff --git a/src/components/location/ShareSettings.tsx b/src/components/location/ShareSettings.tsx index 5c1f6f6..9788772 100644 --- a/src/components/location/ShareSettings.tsx +++ b/src/components/location/ShareSettings.tsx @@ -142,6 +142,8 @@ export const ShareSettingsComponent: React.FC = ({ onSetting + + diff --git a/src/css/location.css b/src/css/location.css index e5c4981..def7d81 100644 --- a/src/css/location.css +++ b/src/css/location.css @@ -417,6 +417,8 @@ + + diff --git a/src/lib/location/types.ts b/src/lib/location/types.ts index 5aed206..f8ff797 100644 --- a/src/lib/location/types.ts +++ b/src/lib/location/types.ts @@ -47,6 +47,8 @@ export interface GeolocationPosition { + + diff --git a/src/public/_redirects b/src/public/_redirects new file mode 100644 index 0000000..7ca73b2 --- /dev/null +++ b/src/public/_redirects @@ -0,0 +1,14 @@ +# Cloudflare Pages redirects and rewrites +# This file handles SPA routing and URL rewrites (replaces vercel.json rewrites) + +# SPA fallback - all routes should serve index.html +/* /index.html 200 + +# Specific route rewrites (matching vercel.json) +/board/* /index.html 200 +/board /index.html 200 +/inbox /index.html 200 +/contact /index.html 200 +/presentations /index.html 200 +/dashboard /index.html 200 + diff --git a/src/routes/LocationDashboardRoute.tsx b/src/routes/LocationDashboardRoute.tsx index 7d5a78f..0a93be9 100644 --- a/src/routes/LocationDashboardRoute.tsx +++ b/src/routes/LocationDashboardRoute.tsx @@ -29,6 +29,8 @@ export const LocationDashboardRoute: React.FC = () => { + + diff --git a/src/routes/LocationShareCreate.tsx b/src/routes/LocationShareCreate.tsx index dd11ea6..4b4cb86 100644 --- a/src/routes/LocationShareCreate.tsx +++ b/src/routes/LocationShareCreate.tsx @@ -29,6 +29,8 @@ export const LocationShareCreate: React.FC = () => { + + diff --git a/src/routes/LocationShareView.tsx b/src/routes/LocationShareView.tsx index 42266f5..4ca7ccf 100644 --- a/src/routes/LocationShareView.tsx +++ b/src/routes/LocationShareView.tsx @@ -43,6 +43,8 @@ export const LocationShareView: React.FC = () => { + + diff --git a/switch-worker-env.sh b/switch-worker-env.sh index d0606a8..8a94be4 100644 --- a/switch-worker-env.sh +++ b/switch-worker-env.sh @@ -64,6 +64,8 @@ echo " npm run dev" + + diff --git a/wrangler.toml b/wrangler.toml index 7a1b61e..b3763d7 100644 --- a/wrangler.toml +++ b/wrangler.toml @@ -23,6 +23,12 @@ bindings = [ tag = "v1" new_classes = ["AutomergeDurableObject"] +[[migrations]] +tag = "v2" +renamed_classes = [ + { from = "TldrawDurableObject", to = "AutomergeDurableObject" } +] + [[r2_buckets]] binding = 'TLDRAW_BUCKET' bucket_name = 'jeffemmett-canvas'