Load different env variables with .env and create-react-app

Question

I need to load for each development/production server a different .env file.

Dev/Prod Server     | .env file
---------------------------------------------
localhost           | .env.development.local
development         | .env.development
qa                  | .env.qa
production          | .env.production

So, I tried to edit the package.json in this way

"start-js": "react-scripts start .env.development.local",
"start": " npm-run-all -p watch-css start-js",
"build:dev": "npm run build-css && react-scripts build .env.development",
"build:qa": "npm run build-css && react-scripts build .env.qa",
"build:pro": "npm run build-css && react-scripts build .env.production"

but if I execute a build:* command, the file loaded is always .env.production because the NODE_ENV is production. Is it possibile to load the others .env file with "build:* command?

try to look at dotenv. you can load different env files using it — Rei Dien
– Rei Dien, Commented Sep 5, 2017 at 13:39
@ReiDien What should be the script for build:qa with dotenv? npm run build-css && react-scripts dotenv_config_path=qa.env don't recognize dotenv_config_path — Webman
– Webman, Commented Sep 5, 2017 at 14:34

Webman · Accepted Answer · 2017-09-06 07:26:52Z

2

I solved my question using react-app-env and renaming the .env file.

Dev/Prod Server     | .env file
---------------------------------------------
qa                  | qa.env

And the build:qa scripts, for example, became:

"build": "npm run build-css && react-scripts build",
"build:qa": "react-app-env --env-file=qa.env build"

edited Sep 6, 2017 at 7:26

answered Sep 5, 2017 at 15:46

Webman

1,5544 gold badges29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christiaan Westerbeek · Accepted Answer · 2018-12-08 16:12:46Z

1

I'm the author of switchenv. It's a command line tool for quickly switching .env file from Keepass entries (content from the Notes field)

Simply running yarn switchenv development would replace your .env file.

Run yarn switchenv production and replace your .env file with the production one.

Basically, all your .env files are stored as entries in a Keepass file. The content of the .env file for each entry should be stored in the Note field. Using switchenv reads that Keepass file and replaces the .env file with the Notes of the entry.

answered Dec 8, 2018 at 16:12

Christiaan Westerbeek

11.2k13 gold badges69 silver badges94 bronze badges

Collectives™ on Stack Overflow

Load different env variables with .env and create-react-app

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related