Echo

Environment Configuration

Set up and manage multiple environments for your Echo application

Overview

Three environments

Development

Local development on your machine

Preview

Automatic deployments from branches

Production

Live production environment

Development Environment

Local development setup

Configure your local environment using .env.local:

# .env.local
NEXT_PUBLIC_APP_URL=http://localhost:3000
SITE_URL=http://localhost:3000
APP_ENV=development
# Use local Supabase, Stripe test mode, etc.

Running Locally

npm run dev

Preview Environment

Vercel preview deployments

Preview deployments are automatically created for each branch. Configure environment variables in Vercel:

  1. Go to your Vercel project settings
  2. Navigate to Environment Variables
  3. Add variables for Preview environment
  4. Use preview-specific values (e.g., preview database, test API keys)
# Preview environment variables:
NEXT_PUBLIC_APP_URL=https://your-project-git-branch.vercel.app
SITE_URL=https://your-project-git-branch.vercel.app
APP_ENV=preview

Note:

Vercel automatically provides VERCEL_URL for preview deployments. You can use this in your environment variables.

Production Environment

Live production setup

Configure production environment variables in Vercel:

  1. Go to your Vercel project settings
  2. Navigate to Environment Variables
  3. Add variables for Production environment
  4. Use production values (production database, live API keys)
# Production environment variables:
NEXT_PUBLIC_APP_URL=https://yourdomain.com
SITE_URL=https://yourdomain.com
APP_ENV=production
# Use production Supabase, Stripe live mode, etc.

Environment Variables by Type

Organize your variables

Public Variables

Variables prefixed with NEXT_PUBLIC_ are exposed to the browser:

  • •NEXT_PUBLIC_APP_URL
  • •NEXT_PUBLIC_SUPABASE_URL
  • •NEXT_PUBLIC_SUPABASE_ANON_KEY

Server Variables

Server-only variables (never exposed to the browser):

  • •BETTER_AUTH_SECRET
  • •POSTGRES_URL
  • •STRIPE_SECRET_KEY
  • •RESEND_API_KEY

Best Practices

Environment management tips

  • Use different databases: Separate databases for development, preview, and production
  • Use Stripe test mode: Always use test mode for development and preview environments
  • Keep secrets secure: Never commit .env.local to version control
  • Use Vercel CLI: Pull environment variables locally with vercel env pull
  • Validate variables: Use the npm run check:env script to validate your environment

Troubleshooting

Common issues

Variables not updating

After updating environment variables in Vercel, redeploy your application for changes to take effect.

Wrong environment detected

Ensure APP_ENV is set correctly for each environment (development, preview, production).

Database connection errors

Verify that POSTGRES_URL or SUPABASE_DB_URL is set correctly for each environment.

Next Steps

→ Deploy to Vercel→ Environment Setup