207 lines
4.6 KiB
Markdown
207 lines
4.6 KiB
Markdown
# 🚀 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! 🎉
|
|
|