Echo

Environment Setup

Configure separate environments for development, preview, and production on Vercel

Branch Strategy

How we organize deployments

master

Production

Live site

dev

Preview/Staging

Testing environment

cli

Template

Not deployed

1

Configure Vercel Branches

Set up production and preview deployments

In Vercel Dashboard:

  1. Go to Settings → Git
  2. Configure production branch: master
  3. Enable preview deployments for dev branch
2

Create Separate Supabase Projects

Use different databases for production and development

Production Database (master branch)

  1. Create project: echo-production
  2. Wait for initialization (2-3 minutes)
  3. Get credentials from Settings → API

Development/Preview Database (dev branch)

  1. Create project: echo-dev
  2. Get credentials from Settings → API
3

Configure OAuth Providers

Separate OAuth apps for each environment

Google OAuth

Production:

Add redirect URI: https://yourdomain.com/api/auth/callback/google

Preview/Dev:

Add redirect URI: http://localhost:3000/api/auth/callback/google

GitHub OAuth

Production:

Callback URL: https://yourdomain.com/api/auth/callback/github

Preview/Dev:

Callback URL: http://localhost:3000/api/auth/callback/github

4

Configure Vercel Environment Variables

Set variables for each environment scope

Production Environment (master branch)

Add these with Production scope selected:

# Supabase (PRODUCTION)
NEXT_PUBLIC_SUPABASE_URL=https://prod-project.supabase.co
SUPABASE_SERVICE_ROLE_KEY=your-production-key
SUPABASE_DB_URL=postgresql://...
# Auth (PRODUCTION)
BETTER_AUTH_SECRET=<generate-secret>
AUTH_TRUST_HOST=true
# App (PRODUCTION)
NEXT_PUBLIC_APP_URL=https://yourdomain.com
SITE_URL=https://yourdomain.com

Preview/Development Environment (dev branch)

Add these with Preview scope selected:

# Supabase (DEV/PREVIEW)
NEXT_PUBLIC_SUPABASE_URL=https://dev-project.supabase.co
SUPABASE_SERVICE_ROLE_KEY=your-dev-key
# App (DEV/PREVIEW)
NEXT_PUBLIC_APP_URL=http://localhost:3000
DISABLE_AUTH=true

Important:

When adding environment variables in Vercel, select the scope (Production, Preview, or Development) for each variable. You can select multiple scopes if needed.

Setup Checklist

  • Created production Supabase project
  • Created dev/preview Supabase project
  • Set up production OAuth apps (Google + GitHub)
  • Set up dev OAuth apps (Google + GitHub)
  • Added all Production-scoped env vars in Vercel
  • Added all Preview-scoped env vars in Vercel
  • Configured production branch = master in Vercel
  • Tested production deployment
  • Tested preview deployment
  • Ran migrations on production database
  • Ran migrations on dev database

Next Steps

Once your environments are configured, continue with:

→ Database Setup→ API Keys Setup→ Deployment Guide