When deploying the API and web app as separate Vercel projects, you need to configure CORS properly to allow cross-origin requests.
Environment Variables for API (apps/api):
# MongoDB (use MongoDB Atlas for production)
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/gitstream
# Privy Auth
PRIVY_APP_ID=your_privy_app_id
PRIVY_APP_SECRET=your_privy_app_secret
# GitHub OAuth
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
GITHUB_CALLBACK_URL=https://your-frontend-url.vercel.app/api/auth/github/callback
# Yellow Network
YELLOW_PRIVATE_KEY=your_wallet_private_key
YELLOW_USE_SANDBOX=true
# Contracts
GITSTREAM_RECEIVER_ADDRESS=0x...
USDC_ADDRESS=0x...
# Chain
CHAIN_ID=84532
RPC_URL=https://sepolia.base.org
# Auth
JWT_SECRET=your-secure-random-secret
# CORS - Frontend URLs (IMPORTANT!)
# Use comma-separated list for multiple origins
FRONTEND_URL=https://your-frontend-url.vercel.app,https://www.your-domain.com
# Note: Vercel preview deployments (*.vercel.app) are automatically allowedVercel Settings:
- Framework Preset: Other
- Root Directory:
apps/api - Build Command:
pnpm build - Output Directory:
dist - Install Command:
pnpm install --filter=api...
Environment Variables for Web (apps/web):
# API URL - Use your deployed API URL
NEXT_PUBLIC_API_URL=https://your-api-url.vercel.app
# Privy (must match API configuration)
NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id
# Chain
NEXT_PUBLIC_CHAIN_ID=84532
# Contracts (must match API configuration)
NEXT_PUBLIC_GITSTREAM_RECEIVER_ADDRESS=0x...
NEXT_PUBLIC_USDC_ADDRESS=0x...Vercel Settings:
- Framework Preset: Next.js
- Root Directory:
apps/web - Build Command:
pnpm build - Output Directory:
.next - Install Command:
pnpm install --filter=web...
The API now supports:
-
Multiple origins: Set
FRONTEND_URLwith comma-separated URLsFRONTEND_URL=https://app.example.com,https://www.example.com -
Vercel preview deployments: All
*.vercel.appdomains are automatically allowed- This means preview branches will work without additional configuration
-
Custom domains: Add your production domain to the
FRONTEND_URLlist
After deployment:
- Open your frontend URL in a browser
- Open DevTools Console
- Try making an API call (e.g., login)
- Check for CORS errors - they should be gone!
Still getting CORS errors?
- Verify
FRONTEND_URLis set correctly in the API deployment - Check that the frontend is calling the correct API URL (
NEXT_PUBLIC_API_URL) - Ensure credentials are included in fetch requests (should be handled by
apps/web/lib/api.ts) - Check browser DevTools Network tab to see the actual Origin header being sent
Preview deployments not working?
The *.vercel.app pattern should catch all Vercel preview URLs. If it doesn't work:
- Add the specific preview URL to
FRONTEND_URL(comma-separated) - Check that the preview URL matches the pattern in index.ts:38
If you prefer deploying as a single project:
- Deploy the entire monorepo to Vercel
- Configure
vercel.jsonto route API calls to the API app - Set the root directory to the monorepo root
- CORS won't be needed as everything is on the same domain