Home Reference Environment Variables

Environment Variables

Last updated on Jun 12, 2026

Complete reference for all environment variables in CHRIS.

Required Variables

These variables must be set for the application to function.

VITE_SUPABASE_URL

The URL of your Supabase project.

VITE_SUPABASE_URL=https://[PROJECT_REF].supabase.co

Where to find:

  1. Go to Supabase Dashboard
  2. Select your project
  3. Navigate to Settings > API
  4. Copy the Project URL

VITE_SUPABASE_ANON_KEY

The anonymous/public API key for Supabase.

VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Where to find:

  1. Go to Supabase Dashboard
  2. Select your project
  3. Navigate to Settings > API
  4. Copy the anon public key

!!! warning "Security Note" The anon key is safe to expose in frontend code. It only allows operations permitted by Row Level Security (RLS) policies.

Optional Variables

NODE_ENV

The environment mode.

NODE_ENV=development  # or 'production'

Values:

  • development - Enables source maps, verbose logging
  • production - Optimized builds, minimal logging

Edge Function Variables

These are set in Supabase, not in .env.

SUPABASE_URL

Automatically available in Edge Functions.

SUPABASE_ANON_KEY

Automatically available in Edge Functions.

SUPABASE_SERVICE_ROLE_KEY

Automatically available for bypassing RLS.

!!! danger "Never Expose Service Role Key" The service role key bypasses all security. Never expose it to the frontend.

Setting Up Environment

Local Development

  1. Copy the example file:
cp .env.example .env
  1. Edit .env with your values:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
  1. Restart the development server:
npm run dev

Production Deployment

Set environment variables in your hosting platform:

Vercel:

  1. Go to Project Settings > Environment Variables
  2. Add each variable

Netlify:

  1. Go to Site Settings > Build & deploy > Environment
  2. Add each variable

Docker:

ENV VITE_SUPABASE_URL=https://your-project.supabase.co
ENV VITE_SUPABASE_ANON_KEY=your-anon-key

Variable Naming

Vite Prefix

Variables prefixed with VITE_ are exposed to the frontend:

VITE_PUBLIC_VAR=accessible     # Accessible in code
SECRET_VAR=not-accessible      # Not accessible in frontend

Access in code:

const url = import.meta.env.VITE_SUPABASE_URL;

TypeScript Types

Vite provides type checking for environment variables:

// src/vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_SUPABASE_URL: string;
  readonly VITE_SUPABASE_ANON_KEY: string;
}

Database Settings

Some configuration is stored in the database rather than environment variables:

company_settings Table

Setting Description
smtp_host SMTP server address
smtp_port SMTP port
smtp_username SMTP authentication
smtp_password SMTP password
smtp_from_email Sender email
smtp_from_name Sender display name
smtp_use_tls Enable TLS
email_reroute_enabled Reroute all emails
email_reroute_addresses Reroute destination

These are configured via the Settings UI rather than environment variables, allowing changes without redeployment.

Troubleshooting

Variables Not Loading

  1. Ensure variable names start with VITE_
  2. Restart the development server after changes
  3. Check for typos in .env

Production Build Missing Variables

Ensure variables are set in your hosting platform before building:

# Variables must exist at build time
VITE_SUPABASE_URL=https://... npm run build

Environment-Specific Values

Use different .env files for different environments:

.env                  # Default (development)
.env.local            # Local overrides (gitignored)
.env.production       # Production values

Vite loads them in order, with later files overriding earlier ones.