Production Deployment Configuration
🚨 Critical: Required Environment Variables for Waitlist
The waitlist functionality requires these environment variables to be configured in Vercel:
Required Variables
| Variable | Description | Where to Get It |
|---|---|---|
NEXT_PUBLIC_CONVEX_URL | Convex production deployment URL | Convex Dashboard |
CLERK_SECRET_KEY | Clerk secret key for API access | Clerk Dashboard |
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY | Clerk publishable key | Clerk Dashboard |
Step-by-Step Configuration
1. Configure Convex for Production
-
Deploy Convex to Production:
cd apps/homepage npx convex deploy --prodThis will create a production deployment and output your production URL.
-
Get your production Convex URL:
- Go to Convex Dashboard
- Select your project
- Click on "Settings"
- Copy the "Production Deployment URL" (looks like:
https://xxxxx.convex.cloud)
2. Configure Clerk for Production
- Go to Clerk Dashboard
- Select your application (or create a production instance)
- Get your keys:
- Navigate to "API Keys"
- Copy the Secret Key (starts with
sk_live_for production) - Copy the Publishable Key (starts with
pk_live_for production)
3. Add Environment Variables to Vercel
- Go to your Vercel Dashboard
- Select your project
- Navigate to Settings → Environment Variables
- Add the following variables:
# Convex (Required for waitlist)
NEXT_PUBLIC_CONVEX_URL=https://your-production-deployment.convex.cloud
# Clerk (Required for waitlist and auth)
CLERK_SECRET_KEY=sk_live_xxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxxxxxxxxxxxxxxx
# Clerk Routes (Required)
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/app
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/app
# Site Configuration
NEXT_PUBLIC_SITE_URL=https://homepage.dev
SITE_URL=https://homepage.dev- Important: Make sure to:
- Set these for Production environment
- Click "Save" after adding each variable
- Redeploy your application after adding all variables
4. Redeploy Your Application
After adding all environment variables:
- Go to the "Deployments" tab in Vercel
- Click on the three dots menu on your latest deployment
- Select "Redeploy"
- Choose "Redeploy with existing Build Cache"
Troubleshooting
Still getting 500 errors?
-
Check Vercel Function Logs:
- Go to Vercel Dashboard → Functions tab
- Look for errors in
/api/waitlistfunction logs
-
Verify Convex is deployed:
npx convex dashboardCheck that you have a production deployment
-
Verify Clerk configuration:
- Ensure you're using production keys (not test keys)
- Check that your domain is added to Clerk's allowed origins
Common Issues
- Using test keys in production: Make sure you're using
sk_live_andpk_live_keys, notsk_test_keys - Convex not deployed: Run
npx convex deploy --prodfrom theapps/homepagedirectory - Missing CORS configuration: The domain needs to be whitelisted in Clerk settings
Testing the Fix
After configuration:
- Clear your browser cache
- Try submitting the waitlist form again
- Check the Network tab for the
/api/waitlistrequest - It should return a 200 status with success message
Security Notes
- Never commit these keys to your repository
- Use Vercel's environment variables feature to keep them secure
- Rotate keys regularly for security
- Consider using different Clerk instances for dev/staging/production