Global Configuration

Learn how to define the global configuration for your application.

We store the global configuration of a Lotru application in src/config.ts.

The configuration has the following structure:

export const config = {
  site: {
    name: '',
    description: '',
    colorScheme: 'light',
    themeColor: '#0e0f11',
    primaryColor: 'purple',
    url: process.env.NEXT_PUBLIC_SITE_URL,
  },
  logLevel: process.env.NEXT_PUBLIC_LOG_LEVEL,
  auth: {
    strategy: process.env.NEXT_PUBLIC_AUTH_STRATEGY || AuthStrategy.CUSTOM,
  },
  mapbox: {
    apiKey: process.env.NEXT_PUBLIC_MAPBOX_API_KEY,
  },
  supabase: {
    url: process.env.NEXT_PUBLIC_SUPABASE_URL,
    anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  },
};

These values are used throughout the application instead of being hardcoded into the codebase.

Loading Environment Variables

Both Next.js and Vite have built-in support for loading environment variables from .env.local into process.env.

// File .env.local
 
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

Development Environment Variables

The development environment variables:

# App
NEXT_PUBLIC_SITE_URL=
 
# Logger
NEXT_PUBLIC_LOG_LEVEL=
 
# Auth
NEXT_PUBLIC_AUTH_STRATEGY=
 
# Supabase
NEXT_PUBLIC_SUPABASE_REF_ID=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
 
# Mapbox
NEXT_PUBLIC_MAPBOX_API_KEY=

Vite uses a similar approach to Next.js, but instead of loading the environment variables into process.env, it exposes them as import.meta.env.

// File .env.local
 
VITE_SITE_NAME=My App

// File src/config.ts
 
export const config = {
  site: {
    name: import.meta.env.VITE_SITE_NAME,
  },
};