Environment Configuration

This document details all environment variables and configuration settings used in the STO Education Platform.

Environment Variables Overview

The platform uses environment variables for configuration, secrets management, and feature flags. All sensitive data is stored securely and accessed through environment variables.

Frontend Environment Variables

Core Configuration

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

# Application URLs
VITE_APP_URL=https://sto-education.com
VITE_API_BASE_URL=https://api.sto-education.com

Purpose: Core backend connection and application URL configuration.

Third-Party Integrations

# 100ms Video Conferencing
VITE_HMS_APP_ID=your-hms-app-id
VITE_HMS_MANAGEMENT_TOKEN=your-hms-management-token

# SendBird Chat
VITE_SENDBIRD_APP_ID=your-sendbird-app-id

# Mapbox Maps
VITE_MAPBOX_ACCESS_TOKEN=your-mapbox-token

# PostHog Analytics
VITE_POSTHOG_KEY=your-posthog-key
VITE_POSTHOG_HOST=https://app.posthog.com

# LogRocket Monitoring
VITE_LOGROCKET_APP_ID=your-logrocket-app-id

# Tawk.to Live Chat
VITE_TAWK_PROPERTY_ID=your-tawk-property-id

# Cloudinary Image Management
VITE_CLOUDINARY_CLOUD_NAME=your-cloudinary-name
VITE_CLOUDINARY_API_KEY=your-cloudinary-api-key
VITE_CLOUDINARY_API_SECRET=your-cloudinary-secret

Purpose: Integration with external services for video, chat, analytics, and media management.

Feature Flags

# Development Features
VITE_ENABLE_DEV_TOOLS=true
VITE_ENABLE_DEBUG_LOGGING=false
VITE_ENABLE_MOCK_DATA=false

# Feature Toggles
VITE_ENABLE_VIDEO_CONFERENCING=true
VITE_ENABLE_CHAT_SYSTEM=true
VITE_ENABLE_ANALYTICS=true
VITE_ENABLE_LIVE_CHAT=true

Purpose: Control feature availability and development tools.

Backend Environment Variables (Supabase)

Database Configuration

# Supabase Database
DATABASE_URL=postgresql://postgres:[password]@[host]:5432/postgres
POSTGRES_PASSWORD=your-postgres-password
POSTGRES_DB=postgres

Purpose: Database connection configuration for Supabase.

Authentication

# JWT Configuration
JWT_SECRET=your-jwt-secret
JWT_EXPIRY=3600

# OAuth Providers
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

Purpose: Authentication and JWT token configuration.

Email Service

# Resend Email Service
RESEND_API_KEY=your-resend-api-key
FROM_EMAIL=[email protected]
ADMIN_EMAIL=[email protected]

Purpose: Email sending configuration using Resend service.

Payment Processing

# PayMob Configuration
PAYMOB_API_KEY=your-paymob-api-key
PAYMOB_INTEGRATION_ID=your-paymob-integration-id
PAYMOB_HMAC_SECRET=your-paymob-hmac-secret

Purpose: Payment processing with PayMob integration.

Environment File Structure

Development Environment

File: .env.local (not committed to git)

# Development-specific overrides
VITE_APP_URL=http://localhost:5173
VITE_ENABLE_DEV_TOOLS=true
VITE_ENABLE_DEBUG_LOGGING=true

Production Environment

File: Environment variables set in deployment platform (Vercel)

# Production configuration
VITE_APP_URL=https://sto-education.com
VITE_ENABLE_DEV_TOOLS=false
VITE_ENABLE_DEBUG_LOGGING=false

Environment Variable Usage

Frontend Usage

// Accessing environment variables
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY

// Feature flags
const enableDevTools = import.meta.env.VITE_ENABLE_DEV_TOOLS === 'true'
const enableAnalytics = import.meta.env.VITE_ENABLE_ANALYTICS === 'true'

Type Safety

// Environment variable types
interface ImportMetaEnv {
  readonly VITE_SUPABASE_URL: string
  readonly VITE_SUPABASE_ANON_KEY: string
  readonly VITE_APP_URL: string
  readonly VITE_HMS_APP_ID: string
  readonly VITE_SENDBIRD_APP_ID: string
  readonly VITE_MAPBOX_ACCESS_TOKEN: string
  readonly VITE_POSTHOG_KEY: string
  readonly VITE_LOGROCKET_APP_ID: string
  readonly VITE_TAWK_PROPERTY_ID: string
  readonly VITE_CLOUDINARY_CLOUD_NAME: string
  readonly VITE_CLOUDINARY_API_KEY: string
  readonly VITE_ENABLE_DEV_TOOLS: string
  readonly VITE_ENABLE_DEBUG_LOGGING: string
  readonly VITE_ENABLE_VIDEO_CONFERENCING: string
  readonly VITE_ENABLE_CHAT_SYSTEM: string
  readonly VITE_ENABLE_ANALYTICS: string
  readonly VITE_ENABLE_LIVE_CHAT: string
}

Configuration Management

Environment-Specific Configs

// config/environment.ts
export const config = {
  app: {
    url: import.meta.env.VITE_APP_URL,
    name: 'STO Education Platform',
    version: import.meta.env.VITE_APP_VERSION || '1.0.0'
  },
  supabase: {
    url: import.meta.env.VITE_SUPABASE_URL,
    anonKey: import.meta.env.VITE_SUPABASE_ANON_KEY
  },
  features: {
    devTools: import.meta.env.VITE_ENABLE_DEV_TOOLS === 'true',
    debugLogging: import.meta.env.VITE_ENABLE_DEBUG_LOGGING === 'true',
    videoConferencing: import.meta.env.VITE_ENABLE_VIDEO_CONFERENCING === 'true',
    chatSystem: import.meta.env.VITE_ENABLE_CHAT_SYSTEM === 'true',
    analytics: import.meta.env.VITE_ENABLE_ANALYTICS === 'true',
    liveChat: import.meta.env.VITE_ENABLE_LIVE_CHAT === 'true'
  },
  integrations: {
    hms: {
      appId: import.meta.env.VITE_HMS_APP_ID
    },
    sendbird: {
      appId: import.meta.env.VITE_SENDBIRD_APP_ID
    },
    mapbox: {
      accessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
    },
    posthog: {
      key: import.meta.env.VITE_POSTHOG_KEY,
      host: import.meta.env.VITE_POSTHOG_HOST
    },
    logrocket: {
      appId: import.meta.env.VITE_LOGROCKET_APP_ID
    },
    tawk: {
      propertyId: import.meta.env.VITE_TAWK_PROPERTY_ID
    },
    cloudinary: {
      cloudName: import.meta.env.VITE_CLOUDINARY_CLOUD_NAME,
      apiKey: import.meta.env.VITE_CLOUDINARY_API_KEY
    }
  }
}

Runtime Configuration

// utils/config.ts
export function getConfig() {
  return {
    isDevelopment: import.meta.env.DEV,
    isProduction: import.meta.env.PROD,
    mode: import.meta.env.MODE,
    baseUrl: import.meta.env.BASE_URL
  }
}

Security Considerations

Sensitive Data Protection

Never Commit Secrets: Environment files with secrets are gitignored
Use VITE_ Prefix: Only variables with VITE_ prefix are exposed to frontend
Server-Side Secrets: Backend secrets are kept server-side only
Environment Validation: Validate required variables at startup

Environment Validation

// utils/env-validation.ts
const requiredEnvVars = [
  'VITE_SUPABASE_URL',
  'VITE_SUPABASE_ANON_KEY',
  'VITE_APP_URL'
]

export function validateEnvironment() {
  const missing = requiredEnvVars.filter(
    envVar => !import.meta.env[envVar]
  )
  
  if (missing.length > 0) {
    throw new Error(`Missing required environment variables: ${missing.join(', ')}`)
  }
}

Deployment Configuration

Vercel Deployment

Environment variables are configured in Vercel dashboard:

Production Variables: Set in Vercel project settings
Preview Variables: Set for preview deployments
Development Variables: Set for local development

Build-Time Variables

// vite.config.ts
export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    __BUILD_TIME__: JSON.stringify(new Date().toISOString()),
    __BUILD_HASH__: JSON.stringify(generateBuildHash())
  }
})

Feature Flags

Dynamic Feature Control

// hooks/useFeatureFlag.ts
export function useFeatureFlag(flag: string): boolean {
  const envFlag = `VITE_ENABLE_${flag.toUpperCase()}`
  return import.meta.env[envFlag] === 'true'
}

// Usage
const enableVideo = useFeatureFlag('video_conferencing')
const enableChat = useFeatureFlag('chat_system')

Runtime Feature Detection

// utils/feature-detection.ts
export const features = {
  videoConferencing: import.meta.env.VITE_ENABLE_VIDEO_CONFERENCING === 'true',
  chatSystem: import.meta.env.VITE_ENABLE_CHAT_SYSTEM === 'true',
  analytics: import.meta.env.VITE_ENABLE_ANALYTICS === 'true',
  liveChat: import.meta.env.VITE_ENABLE_LIVE_CHAT === 'true'
}

Environment Setup Guide

Development Setup

Copy Environment Template:

cp .env.example .env.local

Configure Variables:
- Update Supabase credentials
- Set third-party API keys
- Configure feature flags
Validate Configuration:

npm run type-check
npm run build

Production Setup

Set Environment Variables in deployment platform
Configure Secrets for sensitive data
Test Configuration in staging environment
Deploy with validated configuration

Troubleshooting

Common Issues

Missing Environment Variables:
- Check .env.local file exists
- Verify variable names match exactly
- Ensure VITE_ prefix for frontend variables
Type Errors:
- Update ImportMetaEnv interface
- Check variable types in configuration
Build Failures:
- Validate all required variables are set
- Check for typos in variable names

Debug Environment

// utils/debug-env.ts
export function debugEnvironment() {
  if (import.meta.env.DEV) {
    console.log('Environment Variables:', {
      mode: import.meta.env.MODE,
      dev: import.meta.env.DEV,
      prod: import.meta.env.PROD,
      baseUrl: import.meta.env.BASE_URL,
      // Log non-sensitive config
      appUrl: import.meta.env.VITE_APP_URL,
      supabaseUrl: import.meta.env.VITE_SUPABASE_URL
    })
  }
}

Build Configuration - Build and deployment setup
Package Configuration - Dependencies and scripts
Supabase Integration - Backend configuration
Third-Party Integrations - External service configuration

Getting Started

Frontend Development

Backend Development

Configuration & Setup

Third-Party Integrations

Scripts & Automation

Public Assets & Resources

Database & Migrations

Documentation Files

​Environment Configuration

​Environment Variables Overview

​Frontend Environment Variables

​Core Configuration

​Third-Party Integrations

​Feature Flags

​Backend Environment Variables (Supabase)

​Database Configuration

​Authentication

​Email Service

​Payment Processing

​Environment File Structure

​Development Environment

​Production Environment

​Environment Variable Usage

​Frontend Usage

​Type Safety

​Configuration Management

​Environment-Specific Configs

​Runtime Configuration

​Security Considerations

​Sensitive Data Protection

​Environment Validation

​Deployment Configuration

​Vercel Deployment

​Build-Time Variables

​Feature Flags

​Dynamic Feature Control

​Runtime Feature Detection

​Environment Setup Guide

​Development Setup

​Production Setup

​Troubleshooting

​Common Issues

​Debug Environment

​Related Documentation

Environment Configuration

Environment Variables Overview

Frontend Environment Variables

Core Configuration

Third-Party Integrations

Feature Flags

Backend Environment Variables (Supabase)

Database Configuration

Authentication

Email Service

Payment Processing

Environment File Structure

Development Environment

Production Environment

Environment Variable Usage

Frontend Usage

Type Safety

Configuration Management

Environment-Specific Configs

Runtime Configuration

Security Considerations

Sensitive Data Protection

Environment Validation

Deployment Configuration

Vercel Deployment

Build-Time Variables

Feature Flags

Dynamic Feature Control

Runtime Feature Detection

Environment Setup Guide

Development Setup

Production Setup

Troubleshooting

Common Issues

Debug Environment

Related Documentation