ALwrity + Wordpress + Wix + GSC integration

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! 🎉
+

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",
+      "source": "/(.*)",
-      "use": "@vercel/static-build",
+      "destination": "/index.html"
-      "config": {
-        "distDir": "build"
-      }
     }
   ],
-  "routes": [
+  "headers": [
     {
-      "src": "/(.*)",
+      "source": "/(.*)",
-      "dest": "/frontend/$1"
+      "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"
-  }
 }