{"id":13472537,"url":"https://github.com/andrewmclagan/react-env","last_synced_at":"2025-04-06T18:14:59.689Z","repository":{"id":40731756,"uuid":"188777469","full_name":"andrewmclagan/react-env","owner":"andrewmclagan","description":"Runtime environment variables for react apps.","archived":false,"fork":false,"pushed_at":"2023-03-09T17:48:33.000Z","size":37420,"stargazers_count":310,"open_issues_count":25,"forks_count":46,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-30T16:13:06.261Z","etag":null,"topics":["configuration","create-react-app","docker","environment-variables","kubernetes","nextjs","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrewmclagan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-05-27T05:37:45.000Z","updated_at":"2025-03-18T14:49:31.000Z","dependencies_parsed_at":"2023-09-26T03:54:58.601Z","dependency_job_id":null,"html_url":"https://github.com/andrewmclagan/react-env","commit_stats":{"total_commits":148,"total_committers":6,"mean_commits":"24.666666666666668","dds":0.1216216216216216,"last_synced_commit":"82edfa9049d05b7a38433529d6eba5c389408301"},"previous_names":["beam-australia/react-env"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewmclagan%2Freact-env","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewmclagan%2Freact-env/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewmclagan%2Freact-env/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewmclagan%2Freact-env/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrewmclagan","download_url":"https://codeload.github.com/andrewmclagan/react-env/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247526764,"owners_count":20953143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["configuration","create-react-app","docker","environment-variables","kubernetes","nextjs","react"],"created_at":"2024-07-31T16:00:55.549Z","updated_at":"2025-04-06T18:14:59.668Z","avatar_url":"https://github.com/andrewmclagan.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Env - Runtime Environment Configuration\n\n[![Build Status](https://cloud.drone.io/api/badges/andrewmclagan/react-env/status.svg)](https://cloud.drone.io/andrewmclagan/react-env)\n[![npm version](https://badge.fury.io/js/%40beam-australia%2Freact-env.svg)](https://badge.fury.io/js/%40beam-australia%2Freact-env)\n[![Coverage Status](https://coveralls.io/repos/github/beam-australia/react-env/badge.svg)](https://coveralls.io/github/beam-australia/react-env)\n\nPopulates your environment from `.env` files at **run-time** rather than **build-time**.\n\n- Isomorphic - Server and browser compatible.\n- Supports static site generation.\n- Supports multiple `.env` files.\n\n## README\n\n- [Examples](#examples)\n- [Getting started](#getting-started)\n- [File priority](#env-file-order-of-priority)\n- [Common use cases](#common-use-cases)\n  - [Environment specific config](#environment-specific-config)\n  - [Specifing an env file](#Specifing-an-env-file)\n  - [Using with Docker entrypoint](#using-with-docker-entrypoint)\n- [Arguments and parameters](#arguments-and-parameters)\n\n### Examples\n\n- Example using [Next.js](examples/next.js/README.md) (see README.md)\n- Example using [Create React APP](examples/create-react-app/README.md) (see README.md)\n\n### Getting started\n\nThis package generates a `__ENV.js` file from multiple `.env` files that contains white-listed environment variables that have a `REACT_APP_` prefix.\n\n```html\n\u003cscript src=\"/public/__ENV.js\" /\u003e\n```\n\nIn the browser your variables will be available at `window.__ENV.REACT_APP_FOO` and on the server `process.env.REACT_APP_FOO`. We have included a helper function to make retrieving a value easier:\n\n```bash\n# .env\nREACT_APP_NEXT=\"Next.js\"\nREACT_APP_CRA=\"Create React App\"\nREACT_APP_NOT_SECRET_CODE=\"1234\"\n```\n\nbecomes...\n\n```jsx\nimport env from \"@beam-australia/react-env\";\n\nexport default (props) =\u003e (\n  \u003cdiv\u003e\n    \u003csmall\u003e\n      Works in the browser: \u003cb\u003e{env(\"CRA\")}\u003c/b\u003e.\n    \u003c/small\u003e\n    \u003csmall\u003e\n      Also works for server side rendering: \u003cb\u003e{env(\"NEXT\")}\u003c/b\u003e.\n    \u003c/small\u003e\n    \u003cform\u003e\n      \u003cinput type=\"hidden\" defaultValue={env(\"NOT_SECRET_CODE\")} /\u003e\n    \u003c/form\u003e\n    \u003csmall\u003e\n      Entire safe environment:\n      \u003cpre\u003e\n        \u003ccode\u003e{{JSON.stringify(env())}}\u003c/code\u003e\n      \u003c/pre\u003e\n    \u003c/small\u003e\n  \u003c/div\u003e\n);\n```\n\n### .env file order of priority\n\nWe have implemented some sane defaults that have the following order of priority:\n\n1. `{path-to-file} // from the --path, -p argument`\n2. `.env.{key} // from the --env, -e argument`\n3. `.env.local`\n4. `.env`\n\nYour config is available in the browser and `process.env` on the server. We suggest you add `.env.local` to `.gitignore`.\n\n### Common use cases\n\n#### Environment specific config\n\nFrameworks such as Next allow for some nice defaults such as `.env.local, .env.production, .env`. This has the limitation where you may want to run your app in different environments such as \"staging, integration, qa\" but still build a \"production\" app with `NODE_ENV=production`. With react-env this is possible:\n\n```bash\n# .env.staging\nREACT_APP_API_HOST=\"api.staging.com\"\n# .env.production\nREACT_APP_API_HOST=\"api.production.com\"\n# .env.qa\nREACT_APP_API_HOST=\"api.qa.com\"\n# .env.integration\nREACT_APP_API_HOST=\"api.integration.com\"\n# .env.local\nREACT_APP_API_HOST=\"api.example.dev\"\n# .env\nREACT_APP_API_HOST=\"localhost\"\n```\n\nfor staging you would simply set `APP_ENV=staging` where you run your app:\n\n```\n{\n  ...\n  \"scripts\": {\n    \"start\": \"react-env --env APP_ENV -- next start\" // where .env.${APP_ENV}\n  }\n  ...\n}\n```\n\nThus `REACT_APP_API_HOST=api.staging.com` in your staging environment.\n\n\u003e Please keep in mind that you have to pass the name of an environment variable to `--env`, not the value of it.\n\u003e - ✔ valid usage (macOS): `APP_ENV=staging react-env --env APP_ENV -- next start`\n\u003e - ❌ common mistake: `react-env --env staging -- next start`\n\n#### Specifing an env file\n\nYou are also able to specify the path to a specific env file:\n\n```\n{\n  ...\n  \"scripts\": {\n    \"start\": \"react-env --path config/.env.defaults -- next start\"\n  }\n  ...\n}\n```\n\nYou can use any combination of these two arguments along with the default `.env, .env.local` to build your runtime config.\n\n#### Specifing an prefix for white-listed environment variables\n\nYou are also able to specify the prefix of white-listed environment variables:\n\n```\n{\n  ...\n  \"scripts\": {\n    \"start\": \"react-env --prefix NEXT_APP -- next start\"\n  }\n  ...\n}\n```\n\n```bash\n# .env\nNEXT_APP_NEXT=\"Next.js\"\nNEXT_APP_CRA=\"Create React App\"\nNEXT_APP_NOT_SECRET_CODE=\"1234\"\n```\n\n##### Using prefix with jest\n\nYou need to add `REACT_ENV_PREFIX` env variable before jest command if you use `env()` during your tests:\n\n```\n{\n  ...\n  \"scripts\": {\n    \"test\": \"REACT_ENV_PREFIX=NEXT_APP jest --maxWorkers=3\"\n  }\n  ...\n}\n```\n\n#### Using with Docker entrypoint\n\nIt is possible to use this package as an `ENTRYPOINT` script inside a Dockerfile. This will generate your `__ENV.js` config file when the container boots and allow your `package.json` scripts to remain unchanged. Of course `node` binary must be present in your container.\n\n```dockerfile\nFROM node:alpine\n\nENTRYPOINT yarn react-env --env APP_ENV\n\nCMD yarn start\n```\n\n### Arguments and parameters\n\n```bash\n$ react-env \u003cargs\u003e -- \u003ccommand\u003e\n```\n\n- `\u003ccommand\u003e`\n\nYou may pass a command, such as a nodejs entry file to the `react-env` cli tool. For example `react-scripts`, `next dev`, `next start`\n\n- `--env`, `-e` **(default: null)**\n\nSpecify the name of an existing environment variable, whose value is the name of an environment you want, to make react-env parse an environment specific env-file. For example, you may set `APP_ENV=staging` first and then apply `--env APP_ENV` flag. react-env would load `.env.staging, .env.local, .env` in that order with the latter taking priority.\n\n- `--path`, `-p` **(default: null)**\n\nSpecify a specific env file to load e.g. `react-env --path .env.testing` would load `.env.testing, .env.local, .env` in that order with the latter taking priority. a Combination of `--env APP_ENV --path testing` where `APP_ENV=staging` loads `.env.testing, .env.staging, .env.local, .env` as the priority order.\n\n- `--dest`, `-d` **(default: ./public)**\n\nChange the default destination for generating the `__ENV.js` file.\n\n- `--prefix` **(default: REACT_APP)**\n\nChange the default prefix for white-listed env variables. For exemple `react-env --prefix CUSTOM_PREFIX` will white-list variables like: `CUSTOM_PREFIX_PUBLIC_KEY=my-public-key`\n\n- `--debug` **(default: false)**\n\nEnable debugging for react-env. This will log loaded browser environment variables into your console when running `react-env --debug`\n\n### 3.x.x Breaking changes\n\n---\n\nAs a significant breaking change we have dropped the ability to specify specific files via the `--env` argument. This argument now specifies environment file to be parsed depending on the running environment. For example `--env APP_ENV` or `-e APP_ENV` where `APP_ENV=staging` reads in `.env.staging`. It is very common for platforms to have `staging, qa, integration` environments that are still built in \"production\" mode with `NODE_ENV=production`. This allows for that usecase and many others.\n\n--\nYou are still able to specify files via the `--path, -p` argument.\n\n---\n\nWe have also dropped adding `NODE_ENV` by default as this was a security risk.\n\n---\n\nFile is now named `__ENV.js`\n\n---\n\nDepandand command is now in the format `react-env \u003cargs\u003e -- \u003ccommand\u003e`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewmclagan%2Freact-env","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewmclagan%2Freact-env","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewmclagan%2Freact-env/lists"}