DEV Community

Cover image for Managing .env variables for provisional builds with Create React App

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 ...
Collapse
 
consciousness_dev profile image
Ario Setiawan

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

Collapse
 
donghyukjacobjang profile image
Donghyuk (Jacob) Jang • 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

Collapse
 
consciousness_dev profile image
Ario Setiawan

[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
Thread Thread
 
donghyukjacobjang profile image
Donghyuk (Jacob) Jang

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

Thread Thread
 
consciousness_dev profile image
Ario Setiawan

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

Collapse
 
1970smthin profile image
j6000

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?

Collapse
 
1970smthin profile image
j6000 • 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?

Collapse
 
donghyukjacobjang profile image
Donghyuk (Jacob) Jang

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

Collapse
 
herberthsu profile image
herberthsu

Nice post, Jacob! thanks!

Collapse
 
larrydalmeida profile image
Larry D Almeida

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

Collapse
 
donghyukjacobjang profile image
Donghyuk (Jacob) Jang

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

Collapse
 
utopicnarwhal profile image
Сергей Данилов

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

Collapse
 
nikican profile image
niki

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.

Collapse
 
sushantraje2000 profile image
sushantraje2000 • 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

Collapse
 
donghyukjacobjang profile image
Donghyuk (Jacob) Jang • 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

Collapse
 
foxbit19 profile image
foxbit19

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.

Collapse
 
donghyukjacobjang profile image
Donghyuk (Jacob) Jang

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 .

Collapse
 
julieneric profile image
Julien Eric

By far the simplest solution. Good stuff!

Collapse
 
omardulaimi profile image
Omar Dulaimi

Much thanks, it works.

Collapse
 
mgrachev profile image
Grachev Mikhail

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.

Collapse
 
sandhilt profile image
Bruno Ochotorena

Thanks, this work flawless.

Collapse
 
imakshaykakade profile image
Akshay Kakade

Will it apply with the yarn build command?