Skip to main content
Estudio Three requires specific environment variables to connect to Supabase and AI services. Follow this guide to properly configure your application.

​
Environment File Setup

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

​
Required Variables

​
Server-Side Variables

These variables are only accessible on the server and never exposed to the client bundle.

​
GROQ_API_KEY

Required - API key for Groq AI service (Llama 3)
GROQ_API_KEY=gsk_xxxxxxxxxxxxxxxxxxxx
  • Purpose: Enables AI coaching features powered by Groq’s LLM
  • Where to get it: Create a free account at console.groq.com
  • Free tier limits: Groq offers fast access with rate limits on RPM (Requests Per Minute) and daily tokens
Never commit your GROQ_API_KEY to version control or expose it in client-side code

​
PORT

PORT=3001
  • Purpose: Port for serverless/express local environments
  • Default: 3001 if not specified
  • Optional: Yes

​
Client-Side Variables (VITE_)

These variables are embedded into the client bundle at build time and are publicly accessible.

​
VITE_SUPABASE_URL

Required - Your Supabase project URL
VITE_SUPABASE_URL=https://your-project.supabase.co
  • Purpose: Database connection URL
  • Where to get it: Supabase Dashboard → Project Settings → API → Project URL

​
VITE_SUPABASE_ANON_KEY

Required - Supabase anonymous public key
VITE_SUPABASE_ANON_KEY=eyJxxxxxxxxxxxx
  • Purpose: Public API key for client-side database access
  • Where to get it: Supabase Dashboard → Project Settings → API → Project API keys → anon/public
  • Security: Protected by Row Level Security (RLS) policies

​
VITE_APP_URL

Required - Application URL for authentication redirects
# Development
VITE_APP_URL=http://localhost:5173

# Production
VITE_APP_URL=https://yourdomain.com
  • Purpose: OAuth redirect URL for authentication flows
  • Development: Use http://localhost:5173
  • Production: Use your actual domain

​
NODE_ENV

NODE_ENV=development
  • Purpose: Application environment
  • Values: development or production
  • Optional: Yes (defaults to development)

​
Complete Example

# ===== SERVER — never in client bundle =====
GROQ_API_KEY=gsk_xxxxxxxxxxxxxxxxxxxx
PORT=3001

# ===== SUPABASE — client =====
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=eyJxxxxxxxxxxxx

# ===== APP =====
VITE_APP_URL=http://localhost:5173
NODE_ENV=development

​
Security Best Practices

Critical Security Rules
  • Never commit .env files to version control
  • Add .env to your .gitignore file
  • Use different API keys for development and production
  • Rotate keys immediately if exposed
  • Only use VITE_ prefix for variables that must be public

​
Protecting Secrets

  1. Server-only secrets: Variables without the VITE_ prefix are only available server-side
  2. Client secrets: Any variable with VITE_ prefix will be embedded in the client bundle
  3. Row Level Security: Supabase RLS policies protect your data even with public keys

​
Getting API Keys

​
Supabase API Keys

1

Access Supabase Dashboard

Go to supabase.com and sign in to your project
2

Navigate to Project Settings

Click your project → Settings (gear icon) → API
3

Copy credentials

  • Project URL: Copy to VITE_SUPABASE_URL
  • anon public key: Copy to VITE_SUPABASE_ANON_KEY

​
Groq API Key

1

Create Groq account

Visit console.groq.com and sign up for free
2

Generate API key

Navigate to API Keys section and create a new key
3

Copy to environment

Copy the generated key to GROQ_API_KEY in your .env file

​
Verifying Configuration

1

Check .env file exists

ls -la .env
2

Verify all required variables are set

Ensure GROQ_API_KEY, VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, and VITE_APP_URL are present
3

Start development server

npm run dev
Check console for any missing environment variable warnings

​
Troubleshooting

​
”AI Coach connection error”

  • Verify GROQ_API_KEY is set correctly
  • Check if you’ve exceeded Groq’s free tier rate limits
  • Ensure the key hasn’t been revoked

​
”Supabase connection failed”

  • Verify VITE_SUPABASE_URL matches your project URL exactly
  • Ensure VITE_SUPABASE_ANON_KEY is the anon/public key (not the service_role key)
  • Check that your Supabase project is active

​
”OAuth redirect mismatch”

  • Verify VITE_APP_URL matches the URL you’re accessing
  • Update Supabase Authentication settings with the correct redirect URL
  • For production, ensure the domain is correct

​
Docker: “Blank screen after build”

VITE_ environment variables must be provided during Docker build time, not runtime
Pass build arguments when building Docker image: 
docker build \
  --build-arg VITE_SUPABASE_URL=https://your-project.supabase.co \
  --build-arg VITE_SUPABASE_ANON_KEY=your_key \
  --build-arg VITE_APP_URL=https://yourdomain.com \
  -t estudio:latest .

Build docs developers (and LLMs) love

Get started for freeTalk to us