ALwrity/VERCEL_DEPLOYMENT_GUIDE.md

🚀 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
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":

# 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:

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:

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

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