diff --git a/VERCEL_DEPLOYMENT_GUIDE.md b/VERCEL_DEPLOYMENT_GUIDE.md new file mode 100644 index 00000000..b9ab4493 --- /dev/null +++ b/VERCEL_DEPLOYMENT_GUIDE.md @@ -0,0 +1,206 @@ +# 🚀 Vercel Frontend Deployment Guide + +## 📋 Prerequisites + +- ✅ Backend deployed on Render at: `https://alwrity.onrender.com` +- ✅ GitHub repository connected +- ✅ Vercel account created + +--- + +## 🎯 Step-by-Step Deployment + +### **1. Initial Setup** + +1. Go to [vercel.com](https://vercel.com) +2. Click "New Project" +3. Import your GitHub repository: `AJaySi/ALwrity` + +### **2. Configure Project Settings** + +#### **Framework Preset:** +- Select: **Create React App** + +#### **Root Directory:** +- Leave as: **.** (root) +- The `vercel.json` will handle the frontend directory + +#### **Build Settings:** +- **Build Command:** `cd frontend && npm install && npm run build` +- **Output Directory:** `frontend/build` +- **Install Command:** `npm install` (auto-detected) + +### **3. Environment Variables** + +Add these in Vercel dashboard under "Environment Variables": + +```bash +# Required +REACT_APP_API_URL=https://alwrity.onrender.com +REACT_APP_ENVIRONMENT=production + +# Clerk (from your Clerk dashboard) +REACT_APP_CLERK_PUBLISHABLE_KEY=pk_test_... +``` + +**Important:** +- Get your Clerk publishable key from: https://dashboard.clerk.com +- After deployment, update OAuth redirect URIs in: + - Google Search Console + - WordPress + - Wix + +--- + +## 🔧 Post-Deployment Configuration + +### **1. Update Backend CORS** + +After getting your Vercel URL (e.g., `https://alwrity.vercel.app`), update backend CORS: + +Edit `backend/app.py`: +```python +app.add_middleware( + CORSMiddleware, + allow_origins=[ + "http://localhost:3000", + "https://alwrity.vercel.app", # Add your Vercel URL + "https://your-custom-domain.com" # If using custom domain + ], + allow_credentials=True, + allow_methods=["*"], + allow_headers=["*"], +) +``` + +### **2. Update OAuth Redirect URIs** + +Update these in respective platforms: + +**Google Search Console:** +- Redirect URI: `https://alwrity.vercel.app/gsc/callback` + +**WordPress:** +- Redirect URI: `https://alwrity.vercel.app/wp/callback` + +**Wix:** +- Redirect URI: `https://alwrity.vercel.app/wix/callback` + +**Clerk:** +- Add allowed origins in Clerk dashboard + +### **3. Update Backend Environment Variables** + +On Render, update these environment variables: +```bash +GSC_REDIRECT_URI=https://alwrity.vercel.app/gsc/callback +WORDPRESS_REDIRECT_URI=https://alwrity.vercel.app/wp/callback +WIX_REDIRECT_URI=https://alwrity.vercel.app/wix/callback +``` + +--- + +## ✅ Verification Checklist + +After deployment: + +- [ ] Frontend loads at Vercel URL +- [ ] Health check works: `https://alwrity.vercel.app` +- [ ] Backend API accessible from frontend +- [ ] Clerk authentication works +- [ ] Google Search Console OAuth works +- [ ] WordPress OAuth works +- [ ] Wix OAuth works +- [ ] All routes work (React Router) + +--- + +## 🔍 Troubleshooting + +### **Issue: Blank page or 404 errors** +- Check browser console for errors +- Verify `REACT_APP_API_URL` is set correctly +- Check that `vercel.json` has proper rewrites + +### **Issue: API calls failing** +- Verify backend CORS includes Vercel URL +- Check backend is deployed and healthy +- Verify `REACT_APP_API_URL` doesn't have trailing slash + +### **Issue: OAuth redirects failing** +- Verify redirect URIs match exactly (including https://) +- Check environment variables in Vercel dashboard +- Verify Clerk allowed origins + +### **Issue: Build failures** +- Check TypeScript errors (we fixed Wix issue) +- Verify all dependencies install correctly +- Check build logs in Vercel dashboard + +--- + +## 📊 Performance Optimization + +Vercel automatically provides: +- ✅ Global CDN +- ✅ Automatic HTTPS +- ✅ Edge caching +- ✅ Gzip compression +- ✅ Brotli compression + +Additional optimizations in `vercel.json`: +- Static asset caching (1 year) +- Security headers +- SPA routing support + +--- + +## 🎨 Custom Domain (Optional) + +1. Go to your Vercel project +2. Click "Settings" → "Domains" +3. Add your custom domain +4. Update DNS records as instructed +5. Update all OAuth redirect URIs with new domain + +--- + +## 🚀 Continuous Deployment + +Vercel is now set up for automatic deployments: + +- **Push to `main`** → Deploys to production +- **Pull requests** → Creates preview deployments +- **Any branch** → Can create preview deployments + +--- + +## 📝 Quick Commands + +```bash +# Test build locally +cd frontend +npm run build +npx serve -s build + +# Check for TypeScript errors +npm run build + +# Clear node_modules if issues +rm -rf node_modules package-lock.json +npm install +``` + +--- + +## 🔗 Important URLs + +- **Vercel Dashboard:** https://vercel.com/dashboard +- **Backend (Render):** https://alwrity.onrender.com +- **Backend Health:** https://alwrity.onrender.com/health +- **Backend API Docs:** https://alwrity.onrender.com/api/docs + +--- + +Your ALwrity frontend is now ready to deploy on Vercel! 🎉 + diff --git a/vercel.json b/vercel.json index 566c9691..182cfcfa 100644 --- a/vercel.json +++ b/vercel.json @@ -1,21 +1,40 @@ { "version": 2, - "builds": [ + "buildCommand": "cd frontend && npm install && npm run build", + "outputDirectory": "frontend/build", + "framework": null, + "rewrites": [ { - "src": "frontend/package.json", - "use": "@vercel/static-build", - "config": { - "distDir": "build" - } + "source": "/(.*)", + "destination": "/index.html" } ], - "routes": [ + "headers": [ { - "src": "/(.*)", - "dest": "/frontend/$1" + "source": "/(.*)", + "headers": [ + { + "key": "X-Content-Type-Options", + "value": "nosniff" + }, + { + "key": "X-Frame-Options", + "value": "DENY" + }, + { + "key": "X-XSS-Protection", + "value": "1; mode=block" + } + ] + }, + { + "source": "/static/(.*)", + "headers": [ + { + "key": "Cache-Control", + "value": "public, max-age=31536000, immutable" + } + ] } - ], - "env": { - "REACT_APP_ENVIRONMENT": "production" - } + ] }