Managing Complex Configurations Across Multiple Environments

Show how to organize and manage complex configurations across different environments (development, production, etc.) with TanStack Config and TypeScript.

import { defineConfig } from 'tanstack-config';

// Environment detection
const env = process.env.NODE_ENV;

// Base configuration applicable to all environments
const baseConfig = {
  appName: 'MyApp',
  apiBaseUrl: '',
};

// Development specific configuration
const developmentConfig = {
  ...baseConfig,
  apiBaseUrl: 'https://dev.api.example.com',
};

// Production specific configuration
const productionConfig = {
  ...baseConfig,
  apiBaseUrl: 'https://api.example.com',
};

// Selecting the appropriate configuration based on the environment
const config = defineConfig({
  dev: developmentConfig,
  prod: productionConfig,
}[env] || baseConfig);

export default config;

This code snippet demonstrates how to set up and organize complex configurations with TanStack Config and TypeScript for different environments (development, production, etc.). It first defines a base configuration common to all environments, then extends it with environment-specific settings (e.g., API base URLs for development and production). The appropriate configuration is selected based on the current environment detected through `process.env.NODE_ENV`. Finally, `defineConfig` from TanStack Config is used to apply the selected configuration.

import config from './config';

console.log(`API Base URL: ${config.apiBaseUrl}`);

This code snippet shows how to use the configured settings in your application. It imports the configuration object set up in the previous step and logs the `apiBaseUrl` property to the console, which would differ based on the environment the application is running in. This illustrates accessing and utilizing the environment-specific settings provided by TanStack Config across your application.