Skip to main content

Vercel Environment Variables Setup

Admin Panel (civ-start-admin.vercel.app)​

The admin panel requires environment variables to be configured in the Vercel dashboard to connect to the production API.

Required Environment Variables​

Navigate to: Vercel Dashboard → civ-start-admin project → Settings → Environment Variables

Add the following environment variables for Production, Preview, and Development environments:

# API Configuration
NEXT_PUBLIC_API_URL=https://api.civstart.ventures
NEXT_PUBLIC_API_BASE_URL=https://api.civstart.ventures

# Clerk Authentication (use production keys)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your_production_clerk_publishable_key>
CLERK_SECRET_KEY=<your_production_clerk_secret_key>
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

# Environment
NODE_ENV=production
NEXT_PUBLIC_APP_ENV=production

Frontend (www.civstart.ventures)​

Required Environment Variables​

Navigate to: Vercel Dashboard → civstart-frontend project → Settings → Environment Variables

Add the following for Production, Preview, and Development:

# API Configuration
NEXT_PUBLIC_API_URL=https://api.civstart.ventures
NEXT_PUBLIC_API_BASE_URL=https://api.civstart.ventures

# Clerk Authentication (use production keys)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your_production_clerk_publishable_key>
CLERK_SECRET_KEY=<your_production_clerk_secret_key>

# PostHog Analytics
NEXT_PUBLIC_POSTHOG_KEY=<your_posthog_project_key>
NEXT_PUBLIC_POSTHOG_HOST=<your_posthog_host>

Important Notes​

  1. .env.local files are NOT deployed to Vercel - they are only for local development
  2. All environment variables must be set in the Vercel dashboard for each environment (Production/Preview/Development)
  3. After adding/updating environment variables, you need to trigger a new deployment:
    • Option 1: Push a new commit to GitHub
    • Option 2: Go to Deployments tab → Click "..." → Redeploy
  4. Use different Clerk keys for production vs development
  5. Verify API URLs are using https://api.civstart.ventures (not localhost)

Troubleshooting​

Admin panel still connecting to localhost​

  1. Check Vercel dashboard environment variables are set
  2. Verify you're using the correct project in Vercel
  3. Trigger a fresh deployment after setting variables
  4. Check browser console for API request URLs
  5. Clear browser cache and hard refresh (Cmd+Shift+R / Ctrl+Shift+R)

Clerk authentication not working​

  1. Ensure production Clerk keys are being used
  2. Verify Clerk dashboard has the correct domain whitelist
  3. Check that callback URLs are configured in Clerk dashboard

Quick Fix Commands​

# View current Vercel environment variables (requires Vercel CLI)
vercel env ls

# Pull environment variables from Vercel
vercel env pull

# Deploy with fresh environment variables
vercel --prod