Skip to content

Instantly share code, notes, and snippets.

@csandman
Last active December 15, 2023 00:17
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save csandman/f17d2c9f19b396328cec4254b9a77995 to your computer and use it in GitHub Desktop.
Save csandman/f17d2c9f19b396328cec4254b9a77995 to your computer and use it in GitHub Desktop.
The priorities of different .env files used in different React scripts

What other .env files can be used?

Note: this feature is available with react-scripts@1.0.0 and higher.

  • .env: Default.
  • .env.local: Local overrides. This file is loaded for all environments except test.
  • .env.development, .env.test, .env.production: Environment-specific settings.
  • .env.development.local, .env.test.local, .env.production.local: Local overrides of environment-specific settings.

Files on the left have more priority than files on the right:

  • npm start: .env.development.local, .env.local, .env.development, .env
  • npm run build: .env.production.local, .env.local, .env.production, .env
  • npm test: .env.test.local, .env.test, .env (note .env.local is missing)

These variables will act as the defaults if the machine does not explicitly set them. Please refer to the dotenv documentation for more details.

Source

@ekiyak
Copy link

ekiyak commented Dec 14, 2023

Hi, according the "source" link you provide, the priorities are wrong you provide. Please check.
.env.local file comes before env.prod/dev pls check. best regards

@csandman
Copy link
Author

csandman commented Dec 14, 2023

Haha sure, I can update it. I made this for personal reference in 2019 and haven't used CRA in a very long time, but I guess it's bad to leave bad info out there. Granted, it was correct when I originally made this.

Create react app is not the recommended way to start new react projects anymore by the way. They don't even recommend it in the "Start a New React Project" section of their official docs anymore: https://react.dev/learn/start-a-new-react-project

The closest direct alternative to CRA that comes highly recommended from the community is vite: https://vitejs.dev/guide/#scaffolding-your-first-vite-project

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment