Global Configuration

Learn how to define the global configuration for your application.

We store the global configuration of a Devias Kit Pro application in src/config.ts.

The configuration has the following structure:

 
export const config = {
  site: {
    name: '',
    description: '',
    colorScheme: 'light',
    themeColor: '#090a0b',
    primaryColor: 'neonBlue',
    url: process.env.NEXT_PUBLIC_SITE_URL,
    version: process.env.NEXT_PUBLIC_SITE_VERSION,
  },
  logLevel: process.env.NEXT_PUBLIC_LOG_LEVEL,
  auth: {
    strategy: process.env.NEXT_PUBLIC_AUTH_STRATEGY || AuthStrategy.CUSTOM
  },
  auth0: {
    secret: process.env.AUTH0_SECRET,
    baseUrl: process.env.AUTH0_BASE_URL,
    issuerBaseUrl: process.env.AUTH0_ISSUER_BASE_URL,
    clientId: process.env.AUTH0_CLIENT_ID,
    clientSecret: process.env.AUTH0_CLIENT_SECRET,
  },
  cognito: {
    identityPoolId: process.env.NEXT_PUBLIC_COGNITO_IDENTITY_POOL_ID,
    userPoolClientId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID,
    userPoolId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_ID,
  },
  firebase: {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  },
  supabase: {
    url: process.env.NEXT_PUBLIC_SUPABASE_URL,
    anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
  },
  mapbox: {
    apiKey: process.env.NEXT_PUBLIC_MAPBOX_API_KEY
  },
  gtm: {
    id: process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID
  },
} satisfies Config;

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=
NEXT_PUBLIC_SITE_VERSION=
NEXT_PUBLIC_VERSION=
 
# Logger
NEXT_PUBLIC_LOG_LEVEL=
 
# Auth
NEXT_PUBLIC_AUTH_STRATEGY=
 
# Auth0
AUTH0_SECRET=
AUTH0_BASE_URL=
AUTH0_ISSUER_BASE_URL=
AUTH0_CLIENT_ID=
AUTH0_CLIENT_SECRET=
 
# AWS Cognito
NEXT_PUBLIC_COGNITO_IDENTITY_POOL_ID=
NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID=
NEXT_PUBLIC_COGNITO_USER_POOL_ID=
 
# Firebase
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
 
# Supabase
NEXT_PUBLIC_SUPABASE_REF_ID=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
 
# Mapbox
NEXT_PUBLIC_MAPBOX_API_KEY=
 
# Google Tag Manager 
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=

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,
  },
};