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/app.ts.

The configuration has the following structure:

export const appConfig = {
	name: "Devias Kit Pro",
	description: "",
	direction: "ltr",
	language: "en",
	theme: "light",
	themeColor: "#090a0b",
	primaryColor: "neonBlue",
	dashboardNavColor: "evident",
	dashboardLayout: "vertical",
	logLevel: "ALL",
	authStrategy: "NONE",
};

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.

Development Environment Variables

Next.js

# App
NEXT_PUBLIC_APP_URL=
NEXT_PUBLIC_LOG_LEVEL=
NEXT_PUBLIC_AUTH_STRATEGY=
 
# Auth0
AUTH0_DOMAIN=
AUTH0_CLIENT_ID=
AUTH0_CLIENT_SECRET=
AUTH0_SECRET=
NEXT_PUBLIC_PROFILE_ROUTE=/auth/auth0/profile
NEXT_PUBLIC_ACCESS_TOKEN_ROUTE=/auth/auth0/access-token
 
# Clerk
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
 
# Cognito
COGNITO_CLIENT_SECRET=
NEXT_PUBLIC_COGNITO_AUTHORITY=
NEXT_PUBLIC_COGNITO_DOMAIN=
NEXT_PUBLIC_COGNITO_CLIENT_ID=
 
# Supabase
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_PUBLIC_KEY=
 
# Mapbox
NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=
 
# Google Tag Manager
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=

To load these variables, you need to create a .env.local file in the root of your project. Next.js will automatically load the variables into process.env.

Vite

# App
VITE_APP_URL=
VITE_LOG_LEVEL=
VITE_AUTH_STRATEGY=
 
# Auth0
VITE_AUTH0_DOMAIN=
VITE_AUTH0_CLIENT_ID=
 
# Clerk
VITE_CLERK_PUBLISHABLE_KEY=
 
# Cognito
VITE_COGNITO_AUTHORITY=
VITE_COGNITO_DOMAIN=
VITE_COGNITO_CLIENT_ID=
 
# Supabase
VITE_SUPABASE_URL=
VITE_SUPABASE_PUBLIC_KEY=
 
# Mapbox
VITE_MAPBOX_API_KEY=
 
# Google Tag Manager
VITE_GOOGLE_TAG_MANAGER_ID=

To load these variables, you need to create a .env.local file in the root of your project. Vite will automatically load the variables into import.meta.env.