{"library":"react-inject-env","title":"React Inject Env","description":"react-inject-env is a specialized build-time utility for React applications that enables the injection of environment variables *after* the static files have been built. This addresses a common challenge in React development where `process.env` variables are typically bundled into the application at build time, preventing a single build artifact from being used across multiple deployment environments without rebuilding. The current stable version is 2.1.0. The library works by generating a `env.js` file (or custom name) in your build output, which then exposes variables via `window.env` at runtime. Key differentiators include its ability to modify environment variables without rebuilding the application, synchronous access to these variables (unlike some asynchronous loading solutions), and straightforward integration into CI/CD pipelines and Docker workflows. It supports `.env` files and command-line arguments for variable definition, with command-line variables taking precedence. This approach significantly simplifies multi-environment deployments.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-inject-env"],"cli":{"name":"react-inject-env","version":null}},"imports":["import { env } from './env'","declare global { interface Window { env: any } }",""],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"\n\n\n// src/env.ts (create this file)\ndeclare global {\n interface Window {\n env: {\n REACT_APP_COLOR: string;\n REACT_APP_MAIN_TEXT: string;\n [key: string]: string; // Allow other environment variables\n };\n }\n}\nexport const env: Window['env'] = { ...process.env, ...window.env };\n\n// src/App.tsx (use the imported 'env' object)\nimport { env } from './env';\n\nexport const App = () => {\n const backgroundColor = env.REACT_APP_COLOR || '#ffffff';\n const mainText = env.REACT_APP_MAIN_TEXT || 'Default App Text';\n\n return (\n

{mainText}

Environment variables loaded via react-inject-env.

Current background color: {backgroundColor}

\n );\n};\n\n// --- Terminal Commands ---\n// 1. Install react-inject-env as a dev dependency\n// npm install react-inject-env --save-dev\n\n// 2. Build your React application (e.g., using Create React App)\n// npm run build\n\n// 3. Inject environment variables into the 'build' folder\n// REACT_APP_COLOR='#ffe0b2' REACT_APP_MAIN_TEXT='Hello from the Injector!' npx react-inject-env set\n\n// 4. (Optional) Run a local server to test (requires http-server)\n// npx http-server build","lang":"typescript","description":"This quickstart demonstrates how to configure a React application to use `react-inject-env`. It includes modifying `index.html`, creating a `env.ts` file, updating an `App` component to consume the `env` object, and then shows the terminal commands to install, build, and inject variables post-build.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}