DEV Community

Managing .env variables for provisional builds with Create React App

Donghyuk (Jacob) Jang on April 07, 2019

When developing web applications by using Create React App, developers get NODE_ENV=development on their local environment and NODE_ENV=production ...

Read full post

Ario Setiawan • Dec 3 '19

How to run it?

i make env.local

it contains

CUSTOM_NODE_ENV="local"
REACT_APP_MAIN_SERVER_API=http://192.168.1.11/api/v1/

this run script in npm

"start:local": "env-cmd -f .env.local react-script start"

when i run

npm start local

it fails and load to .env

Donghyuk (Jacob) Jang Jam3 • Dec 3 '19 • Edited

@consciousnessdev Thanks for your comment.

You should add REACT_APP_ prefix to your all custom env variables. eg, REACT_APP_CUSTOM_NODE_ENV.

the command is npm run start:local according to your scripts, just missing :.

Sorry for making this mistake, and I will update the article.

Again, thanks for your patient.

Best,
Donghyuk (Jacob) Jang

Ario Setiawan • Dec 4 '19

[Update] But when i run it with your suggestion, it still have an error

npm run start:local

> apps@0.1.0 start:local /home/me/react/apps
> env-cmd -f .env.local react-script start

spawn react-script ENOENT
Hangup
npm ERR! code ELIFECYCLE
npm ERR! errno 129
npm ERR! apps@0.1.0 start:local: `env-cmd -f .env.local react-script start`
npm ERR! Exit status 129
npm ERR! 
npm ERR! Failed at the apps@0.1.0 start:local script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/me/.npm/_logs/2019-12-04T01_34_08_907Z-debug.log

Donghyuk (Jacob) Jang Jam3 • Dec 4 '19

I have tried in the example repository, and it seems to be working fine. You may have some conflicts.

The example repository is github.com/DonghyukJacobJang/cra-e...

You will be able to find .env.local and start:local in package.json.

Since I cannot see all your config and settings, providing you the example repo is the best thing I can do at the moment.

Please let me know if you have questions.

Best,
Donghyuk (Jacob) Jang

Ario Setiawan • Dec 5 '19

Pardon Me, i'd typo on 'react-script', which is true 'react-scripts', with 's' in the end of script it, thanks a lot! :O

j6000 • Oct 31 '19

Thanks Donghyuk. One thing to note here is that, while my .env.staging is loaded, process.env.NODE_ENV is set to production despite the NODE_ENV=staging setting in .env.staging

Is this consistent with your experience?

j6000 • Oct 31 '19 • Edited

Seems so based on create-react-app.dev/docs:

Variables in .env.production will be used as fallback because NODE_ENV will always be set to production for a build.

Assuming true, what's the value in adding NODE_ENV=staging to .env.staging?

Donghyuk (Jacob) Jang Jam3 • Oct 31 '19

I will test this out ASAP, but I remember that I had to create a custom var to distinguish environments in javascript code.

herberthsu • Oct 17 '19

Nice post, Jacob! thanks!

Larry D Almeida • Sep 15 '19

It's a great post! Thank you. I needed this.

Donghyuk (Jacob) Jang Jam3 • Sep 15 '19

I am very glad that it helps you :) Thank you so much for your message.

foxbit19 • May 28 '19

Thanks for your article! I think env-cmd needs -f argument to load the custom file correctly. Otherwise it fails and load .env file by default.

Donghyuk (Jacob) Jang Jam3 • Jun 10 '19

Thanks for this information. When this article was written, it was using env-cmd version 8.0.2. It was not required -f option. I also just tested the latest version which is 9.0.3 without the parameter and caused an issue. As a result, when pointing a custom env file, it is required. Thank you so much @foxbit19 .

sushantraje2000 • Jun 9 '19 • Edited

I am using visual studio 2017 with React template
in which I followed above steps but its not working for staging

can you add working source code also

Donghyuk (Jacob) Jang Jam3 • Jun 10 '19 • Edited

There was env-cmd version update and it required a parameter to point a custom env file, As @foxbit19 discovered.
CRA template with env-cmd example is available at github.com/DonghyukJacobJang/cra-e... .
Thank you so much @sushantraje2000

Julien Eric • Oct 8 '19

By far the simplest solution. Good stuff!

Сергей Данилов • Jan 1 '20

I think, env-cmd should be installed by
$ yarn add -D env-cmd

niki • Jul 28 '20

Thank you for the article!

I was initially confused as I was not aware that "start" and "build" scripts use ".env.development" and ".env.production", respectively, by default.

Grachev Mikhail • Oct 28 '20

In addition to using environment variables I can recommend the tool github.com/dotenv-linter/dotenv-li... - it’s a lightning-fast linter for .env files.
Maybe it would be useful for you.

Omar Dulaimi • Mar 19 '20

Much thanks, it works.

Bruno Ochotorena • Jun 9 '21

Thanks, this work flawless.

Akshay Kakade • Jul 31 '20

Will it apply with the yarn build command?