react-runtime-config

Runtime configuration injection replaces environment-specific values at container startup. A startup script uses envsubst to generate runtime-env.js from a template, injecting API endpoints and feature flags into the React app without requiring a rebuild.

The 12-factor approach separates config from code by externalizing environment variables. For containerized React frontends, a runtimeConfig.ts module validates required variables and consumes a generated runtime-env.js file to apply environment-specific settings dynamically.

Configuring different API endpoints across environments uses a runtime-env.template.js file processed at container startup. The startup script validates required variables and generates runtime-env.js with environment-specific endpoints for the React application.

This runtime config approach is designed for Docker multi-stage builds using Nginx at runtime. The build stage compiles the React app, while the startup script generates runtime-env.js with environment variables before Nginx serves the application.

Envsubst generates runtime-env.js by substituting environment variable values into a runtime-env.template.js file at container startup. This mechanism allows the React application to read environment-specific configurations dynamically without embedding them during the build stage.

The startup script validates required environment variables before generating runtime-env.js. If required variables are missing, the validation process fails, preventing the containerized React frontend from starting with incomplete or invalid runtime configurations.