DEV Community

Various ways of handling environment variables in React and Node.js

Yogesh Chavan on September 21, 2020

Using Environment variables is very important to keep your private information secure. It may contain your API keys or database credentials or an...
Read full post
Collapse
 
rohan2734 profile image
rohan2734 •

do we need to activate any .env file ?

like sometimes, i have to activate some env files in the bash shell like

source ./example.env

and if we create a file through .env.prod

what package do we need to install ?

like dotenv?instead of npm-cmd it is looking very complex

and how to use .env.prod

is it same like

process.env.prod.SOME_KEY??

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan •

There is no need of activating .env file. For .env.prod you can use the env-cmd npm package and use it as shown below:

"scripts": {
 "start": "env-cmd -f .env.dev node index.js",
 "start-prod": "env-cmd -f .env.prod node index.js"
},
Enter fullscreen mode Exit fullscreen mode

So when you run npm run start command, all .env.dev environment variables will be available through process.env.some_key and when you run npm run start-prod command, all .env.prod environment variables will be available through process.env.some_key only.

Collapse
 
rohan2734 profile image
rohan2734 •

ok you left one point , please answer that too
i have asked, that if i have .env.dev file
and i have some key as

#.env.dev

SOME_KEY = somekeyvalue
Enter fullscreen mode Exit fullscreen mode

then how do i need to use it?
Do i need to use it as

process.env.SOME_KEY
Enter fullscreen mode Exit fullscreen mode

or

Process.env.dev.SOME_KEY
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan •

you need to use process.env.SOME_KEY only. Also don't add spaces before and after the = sign in .env file

Thread Thread
 
rohan2734 profile image
rohan2734 •

okay thankyou sir, i will definitely try this

so,

#.env.dev
SOME_KEY=sdfs
Enter fullscreen mode Exit fullscreen mode

and importing it as

process.env.SOME_KEY
Enter fullscreen mode Exit fullscreen mode

I think this is fine now

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan •

Yes, it looks fine

Collapse
 
monicaadikesavan profile image
MonicaAdikesavan •

Hi,
Great Post !
But how to get environement values from Azure App Service, Say we are using Linux machine and how to access the appsetting values from ReactJS?
The process.env.APPSETTING_Variable returns values when we try that in the apps service shell, but the same isnt returning values in the app once deployed.

could you post a solution on this?

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan •

@monicaadikesavan sorry but I never worked with Azure App service so can't help you with that

Collapse
 
monicaadikesavan profile image
MonicaAdikesavan •

Thanks, But how can we handle deployment variables without .env file in ReactJS, Can you help on that ?

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan •

@monicaadikesavan Every hosting provider provides a way to add environment variables from UI as I have shown in the screenshot at the end of this article, you can add environment variables from build & deploy section.

Collapse
 
joinverma profile image
Vishal Verma • • Edited

Hi Yogesh,
Thanks For the article,
I need to know more on the point below
"Also, you need to make sure that, you add the environment variables file name to your .gitignore file so it will not be added to your Git repository when you push the code to the repository."
So if we do not push the env.prod file in GIT how cum the env will able to use this.
Another, we supply a build package normally, and do not run the start cmd on PRD.

So how it will work in that case

Thanks

Collapse
 
andrewbaisden profile image
Andrew Baisden •

dotenv is the way to go.

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan •

Yes, that's my favorite way

Collapse
 
dharmmaurya563 profile image
dharmmaurya563 •

npm run build what will be it's default environment.