Global configuration

Global Configuration

This guide explains how to manage global configuration settings in your KimiStores application, allowing you to customize various aspects of your app in a centralized way.

Global Config Overview

KimiStores provides a centralized configuration system through the src/global-config.ts file. This file contains default settings for various aspects of your application.

Configuration Categories

The global configuration file includes settings for:

Theme settings - Light/dark mode, colors, etc.

Layout options - Stretch, compact, RTL, header, etc.

Default values - Language, routes, site information

Feature toggles - Control which features are enabled

// src/global-config.ts

import { SettingsValueProps } from './components/settings/types';

// ----------------------------------------------------------------------

export const HOST_API = process.env.NEXT_PUBLIC_HOST_API;
export const FIREBASE_API = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  // ... other Firebase config
};

export const AUTH0_API = {
  clientId: process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID,
  domain: process.env.NEXT_PUBLIC_AUTH0_DOMAIN,
  // ... other Auth0 config
};

// DEFAULT SETTINGS
export const defaultSettings: SettingsValueProps = {
  themeMode: 'light',
  themeDirection: 'ltr',
  themeLayout: 'vertical',
  themeStretch: false,
  themeContrast: 'default',
  themeColorPresets: 'default',
};

// DEFAULT LOCALE
export const defaultLocale = {
  value: 'en',
  label: 'English',
  icon: '/assets/icons/flags/ic_flag_en.svg',
};

// DEFAULT LANGUAGE OPTIONS
export const allLangs = [
  {
    label: 'English',
    value: 'en',
    icon: '/assets/icons/flags/ic_flag_en.svg',
  },
  {
    label: 'German',
    value: 'de',
    icon: '/assets/icons/flags/ic_flag_de.svg',
  },
  // ... more languages
];

// FEATURE FLAGS
export const featureFlags = {
  enableMultiLanguage: true,
  enableAuth: true,
  enableMapFeatures: false,
  enablePremiumFeatures: false,
};

Using Global Config

You can access and use the global configuration settings throughout your application by importing the values you need.

Accessing Config Values

import { defaultSettings, HOST_API } from 'src/global-config';

// Using API URL
fetch(`${HOST_API}/users`)
  .then((response) => response.json())
  .then((data) => console.log(data));

// Using default settings
console.log('Default theme mode:', defaultSettings.themeMode);

The global-config file is designed to be imported directly in components that need access to configuration values.

Feature Flags

import { featureFlags } from 'src/global-config';

function MyComponent() {
  return (
    <div>
      {featureFlags.enableMultiLanguage && (
        <LanguageSelector />
      )}
      
      {featureFlags.enableMapFeatures ? (
        <InteractiveMap />
      ) : (
        <StaticMapImage />
      )}
    </div>
  );
}

Feature flags are a powerful way to toggle functionality without changing code. Use them to control which features are available in different environments or for different users.

Customizing Global Config

Steps to Customize

1. Locate the configuration file:

src/global-config.ts

2. Modify values as needed:

Update API endpoints, default settings, and other values according to your project requirements.

3. Create environment-specific overrides:

Use environment variables with Next.js or Vite to override values in different environments.

Example: Customizing Default Settings

// src/global-config.ts

// Original default settings
export const defaultSettings: SettingsValueProps = {
  themeMode: 'light',
  themeDirection: 'ltr',
  themeLayout: 'vertical',
  themeStretch: false,
  themeContrast: 'default',
  themeColorPresets: 'default',
};

// Modified default settings
export const defaultSettings: SettingsValueProps = {
  themeMode: 'dark', // Changed to dark mode by default
  themeDirection: 'ltr',
  themeLayout: 'horizontal', // Changed layout style
  themeStretch: true, // Changed to full width
  themeContrast: 'bold', // Changed to bold contrast
  themeColorPresets: 'blue', // Changed color preset
};

Example: Environment Variables

// .env.development
NEXT_PUBLIC_HOST_API=https://dev-api.example.com
NEXT_PUBLIC_ENABLE_PREMIUM_FEATURES=true

// .env.production
NEXT_PUBLIC_HOST_API=https://api.example.com
NEXT_PUBLIC_ENABLE_PREMIUM_FEATURES=false

// src/global-config.ts
export const HOST_API = process.env.NEXT_PUBLIC_HOST_API;

export const featureFlags = {
  // ...other flags
  enablePremiumFeatures: process.env.NEXT_PUBLIC_ENABLE_PREMIUM_FEATURES === 'true',
};

Best Practices

1. Centralize Configuration: Keep all global settings in one place to make maintenance easier.

2. Use TypeScript: Define types for your configuration values to catch errors early.

3. Environment Variables: Use environment variables for values that change between environments.

4. Documentation: Add comments to explain the purpose of each configuration option.

References

KimiStores Settings Documentation Next.js Environment Variables Vite Environment Variables