Nugsoft Developer Guides

Configuration in React 19

Proper configuration ensures your React 19 app runs smoothly in different environments (development, staging, production).

Environment Variables

  • Use .env files for environment-specific settings (e.g., API endpoints, feature flags).
  • Prefix variables with REACT_APP_ for Create React App, or use Vite/Next.js conventions.
  • Access variables via process.env (CRA) or import.meta.env (Vite).

Build Tools

  • Use Vite or Next.js for fast development and optimized builds.
  • Configure build options, plugins, and aliases in vite.config.js or next.config.js.

Example: vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    port: 3000,
  },
});

Secrets Management

  • Never commit secrets (API keys, passwords) to source control.
  • Use environment variables or secret management tools (e.g., Vault, AWS Secrets Manager).

Configuration Patterns

  • Centralize config in a config/ directory if needed.
  • Use TypeScript interfaces for config objects.
  • Document all configuration options in README or docs.

References

Back to Top