Configuration - Front-end Project

App Configuration

createAppConfig

Creates and initializes the application configuration.

Parameters

AppConfigOptions

Configuration options to override defaults

Show properties

string

Base URL for API requests

'development' | 'staging' | 'production'

Current environment

FeatureFlags

Feature flag configuration

AuthConfig

Authentication configuration

ThemeConfig

Theme and UI configuration

AnalyticsConfig

Analytics and tracking configuration

Return Value

AppConfig

Initialized application configuration object

Example

import { createAppConfig } from '@/config';

const config = createAppConfig({
  apiUrl: process.env.NEXT_PUBLIC_API_URL,
  environment: process.env.NODE_ENV as 'development' | 'production',
  features: {
    enableBetaFeatures: false,
    enableAnalytics: true
  }
});

export default config;

import { createAppConfig } from '@/config';

const config = createAppConfig({
  apiUrl: 'https://api.example.com',
  environment: 'production',
  
  features: {
    enableBetaFeatures: false,
    enableAnalytics: true,
    enableNotifications: true,
    enableDarkMode: true
  },
  
  auth: {
    tokenKey: 'auth_token',
    refreshTokenKey: 'refresh_token',
    sessionTimeout: 3600000,
    autoRefresh: true
  },
  
  theme: {
    defaultMode: 'light',
    primaryColor: '#3B82F6',
    fontFamily: 'Inter, sans-serif'
  },
  
  analytics: {
    enabled: true,
    trackingId: 'GA-XXXXXXXXX',
    debug: false
  }
});

export default config;

Feature Flags

FeatureFlags

Feature flag configuration object for enabling/disabling features.

object

Show properties

boolean

default:"false"

Enable experimental beta features

boolean

default:"true"

Enable analytics tracking

boolean

default:"true"

Enable push notifications

boolean

default:"true"

Enable dark mode support

Enable social authentication providers

boolean

default:"true"

Enable file upload functionality

boolean

default:"false"

Enable real-time WebSocket features

boolean

default:"true"

Enable data export functionality

Example

import { config } from '@/config';

function DashboardPage() {
  return (
    <div>
      <h1>Dashboard</h1>
      
      {config.features.enableBetaFeatures && (
        <BetaFeaturesPanel />
      )}
      
      {config.features.enableRealtime && (
        <RealtimeUpdates />
      )}
      
      {config.features.enableExport && (
        <ExportButton />
      )}
    </div>
  );
}

Authentication Config

AuthConfig

Authentication configuration settings.

object

Show properties

string

default:"'auth_token'"

LocalStorage key for storing auth token

string

default:"'refresh_token'"

LocalStorage key for storing refresh token

number

default:"3600000"

Session timeout in milliseconds (default: 1 hour)

boolean

default:"true"

Automatically refresh tokens before expiry

number

default:"300000"

Time before expiry to refresh token in ms (default: 5 minutes)

URL to redirect to after successful login

string

default:"'/login'"

URL to redirect to after logout

Example

import { createAppConfig } from '@/config';

const config = createAppConfig({
  auth: {
    tokenKey: 'app_token',
    refreshTokenKey: 'app_refresh',
    sessionTimeout: 7200000, // 2 hours
    autoRefresh: true,
    refreshThreshold: 600000, // 10 minutes
    loginRedirect: '/home',
    logoutRedirect: '/'
  }
});

Theme Configuration

ThemeConfig

Theme and visual configuration settings.

object

Show properties

'light' | 'dark' | 'system'

default:"'light'"

Default color mode

string

default:"'#3B82F6'"

Primary brand color (hex code)

string

default:"'#10B981'"

Secondary brand color (hex code)

string

default:"'Inter, sans-serif'"

Default font family

number

default:"8"

Default border radius in pixels

boolean

default:"false"

Enable compact UI mode

Example

import { createAppConfig } from '@/config';

const config = createAppConfig({
  theme: {
    defaultMode: 'dark',
    primaryColor: '#8B5CF6',
    secondaryColor: '#EC4899',
    fontFamily: 'Roboto, sans-serif',
    borderRadius: 12,
    compactMode: false
  }
});

Analytics Configuration

AnalyticsConfig

Analytics and tracking configuration.

object

Show properties

boolean

default:"true"

Enable analytics tracking

string

Analytics tracking ID (e.g., Google Analytics)

boolean

default:"false"

Enable debug mode for analytics

boolean

default:"true"

Anonymize user IP addresses

boolean

default:"true"

Automatically track page views

boolean

default:"true"

Track custom events

boolean

default:"true"

Track JavaScript errors

Example

import { createAppConfig } from '@/config';

const config = createAppConfig({
  analytics: {
    enabled: process.env.NODE_ENV === 'production',
    trackingId: process.env.NEXT_PUBLIC_GA_ID,
    debug: process.env.NODE_ENV === 'development',
    anonymizeIp: true,
    trackPageViews: true,
    trackEvents: true,
    trackErrors: true
  }
});

API Configuration

ApiConfig

API client configuration settings.

object

Show properties

string

Base URL for all API requests

number

default:"30000"

Request timeout in milliseconds

number

default:"3"

Number of retry attempts for failed requests

number

default:"1000"

Delay between retries in milliseconds

Record<string, string>

Default headers for all requests

boolean

default:"false"

Send cookies with cross-origin requests

Example

import { createAppConfig } from '@/config';

const config = createAppConfig({
  api: {
    baseURL: process.env.NEXT_PUBLIC_API_URL,
    timeout: 30000,
    retries: 3,
    retryDelay: 1000,
    headers: {
      'Content-Type': 'application/json',
      'X-App-Version': '1.0.0'
    },
    withCredentials: true
  }
});

Getting Config Values

useConfig

React hook to access configuration values.

Return Value

AppConfig

Current application configuration

Example

import { useConfig } from '@/hooks/useConfig';

function MyComponent() {
  const config = useConfig();
  
  return (
    <div>
      <p>API URL: {config.apiUrl}</p>
      <p>Environment: {config.environment}</p>
      
      {config.features.enableBetaFeatures && (
        <BetaFeature />
      )}
    </div>
  );
}

Updating Config at Runtime

updateConfig

Updates configuration values at runtime.

Parameters

Partial<AppConfig>

required

Configuration values to update

Example

import { updateConfig } from '@/config';

function SettingsPage() {
  const toggleDarkMode = () => {
    updateConfig({
      theme: {
        defaultMode: 'dark'
      }
    });
  };
  
  const enableBetaFeatures = () => {
    updateConfig({
      features: {
        enableBetaFeatures: true
      }
    });
  };
  
  return (
    <div>
      <button onClick={toggleDarkMode}>Enable Dark Mode</button>
      <button onClick={enableBetaFeatures}>Enable Beta Features</button>
    </div>
  );
}

​App Configuration

​createAppConfig

​Parameters

​Return Value

​Example

​Feature Flags

​FeatureFlags

​Example

​Authentication Config

​AuthConfig

​Example

​Theme Configuration

​ThemeConfig

​Example

​Analytics Configuration

​AnalyticsConfig

​Example

​API Configuration

​ApiConfig

​Example

​Getting Config Values

​useConfig

​Return Value

​Example

​Updating Config at Runtime

​updateConfig

​Parameters

​Example

App Configuration

createAppConfig

Parameters

Return Value

Example

Feature Flags

FeatureFlags

Example

Authentication Config

AuthConfig

Example

Theme Configuration

ThemeConfig

Example

Analytics Configuration

AnalyticsConfig

Example

API Configuration

ApiConfig

Example

Getting Config Values

useConfig

Return Value

Example

Updating Config at Runtime

updateConfig

Parameters

Example