Production Deployment Configuration

🚨 Critical: Required Environment Variables for Waitlist

The waitlist functionality requires these environment variables to be configured in Vercel:

Required Variables

VariableDescriptionWhere to Get It
NEXT_PUBLIC_CONVEX_URLConvex production deployment URLConvex Dashboard
CLERK_SECRET_KEYClerk secret key for API accessClerk Dashboard
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEYClerk publishable keyClerk Dashboard

Step-by-Step Configuration

1. Configure Convex for Production

  1. Deploy Convex to Production:

    cd apps/homepage
    npx convex deploy --prod

    This will create a production deployment and output your production URL.

  2. 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

  1. Go to Clerk Dashboard
  2. Select your application (or create a production instance)
  3. 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

  1. Go to your Vercel Dashboard
  2. Select your project
  3. Navigate to Settings → Environment Variables
  4. 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
  1. 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:

  1. Go to the "Deployments" tab in Vercel
  2. Click on the three dots menu on your latest deployment
  3. Select "Redeploy"
  4. Choose "Redeploy with existing Build Cache"

Troubleshooting

Still getting 500 errors?

  1. Check Vercel Function Logs:

    • Go to Vercel Dashboard → Functions tab
    • Look for errors in /api/waitlist function logs
  2. Verify Convex is deployed:

    npx convex dashboard

    Check that you have a production deployment

  3. 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_ and pk_live_ keys, not sk_test_ keys
  • Convex not deployed: Run npx convex deploy --prod from the apps/homepage directory
  • Missing CORS configuration: The domain needs to be whitelisted in Clerk settings

Testing the Fix

After configuration:

  1. Clear your browser cache
  2. Try submitting the waitlist form again
  3. Check the Network tab for the /api/waitlist request
  4. 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

On this page