Skip to main content

​
Overview

Trazea uses environment variables to configure its connections to Supabase, Sentry error tracking, and ElevenLabs voice services. All environment variables follow the Vite convention and must be prefixed with VITE_.

​
Required Environment Variables

Create a .env file in the root of your project based on .env.example: 
cp .env.example .env

​
Core Configuration

# Supabase Configuration
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

# Sentry Configuration (optional but recommended for production)
VITE_SENTRY_DSN=https://[email protected]/project-id

# ElevenLabs Configuration (for voice agent TTS)
VITE_PUBLIC_ELEVENLABS_API_KEY=your-elevenlabs-api-key

​
Environment Variable Details

​
VITE_SUPABASE_URL

​
VITE_SUPABASE_URL
string
required
Your Supabase project URL. Found in your Supabase project settings under Settings > API.Format: https://xxxxxxxxxxx.supabase.co

​
VITE_SUPABASE_ANON_KEY

​
VITE_SUPABASE_ANON_KEY
string
required
Your Supabase anonymous (public) key. Found in your Supabase project settings under Settings > API.This key is safe to use in client-side code as it respects Row Level Security (RLS) policies.

​
VITE_SENTRY_DSN

​
VITE_SENTRY_DSN
string
Your Sentry Data Source Name for error tracking. Get this from your Sentry project settings.Format: https://[email protected]/zzzzzzRecommended for production to track and debug errors in real-time.

​
VITE_PUBLIC_ELEVENLABS_API_KEY

​
VITE_PUBLIC_ELEVENLABS_API_KEY
string
API key for ElevenLabs text-to-speech service used in voice agent features.Get your API key from elevenlabs.io

​
Environment-Specific Configuration

​
Development

For local development, create a .env file with your development credentials: 
# Use your development Supabase project
VITE_SUPABASE_URL=https://dev-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-dev-anon-key

# Optional: Disable Sentry in development
# VITE_SENTRY_DSN=
Start the development server: 
pnpm dev

​
Production

For production deployments, set environment variables in your hosting platform:
  • Vercel: Configure in project settings under Settings > Environment Variables
  • Docker: Use .env file or pass via docker run -e flags
  • Other platforms: Follow platform-specific environment variable configuration
Never commit your .env file to version control. The .env.example file should contain only variable names without actual values.

​
Validation

The Supabase client (src/shared/api/supabase.ts) validates environment variables on initialization: 
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || '';
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY || '';

if (!supabaseUrl || !supabaseAnonKey) {
  console.error('Missing Supabase environment variables. Please check your .env file.');
}
If required variables are missing, you’ll see an error in the browser console.

​
Supabase Client Configuration

The Supabase client is configured with the following settings: 
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    autoRefreshToken: true,    // Automatically refresh auth tokens
    persistSession: true,       // Persist session in localStorage
    detectSessionInUrl: true,   // Detect OAuth callback URLs
  },
});
These settings enable:
  • Automatic token refresh before expiration
  • Session persistence across page reloads
  • OAuth provider callback handling (Google OAuth)

​
Next Steps

Supabase Configuration

Set up your Supabase project, authentication, and RLS policies

Deploy to Vercel

Deploy Trazea to Vercel with automatic deployments

Build docs developers (and LLMs) love

Get started for freeTalk to us