I'm relatively new to web development world and now I'm trying to understand the usage of .env file in React JS. So, I have read multiple articles and watch some explanation videos. However, most of them were focusing on how to use it rather what it actually is. Do I understand correctly that the main benefits of using environment variables are:

1)They make it easier to maintain applications since they all stored in one file .env 2)They are not visible to users and are not shown and uploaded to Git repository

Is it correct and is there anything else I need to consider?

I'm relatively new to web development world and now I'm trying to understand the usage of .env file in React JS. So, I have read multiple articles and watch some explanation videos. However, most of them were focusing on how to use it rather what it actually is. Do I understand correctly that the main benefits of using environment variables are:

1)They make it easier to maintain applications since they all stored in one file .env 2)They are not visible to users and are not shown and uploaded to Git repository

Is it correct and is there anything else I need to consider?

• javascript
• node.js
• reactjs
• variables
• environment-variables

• A mon use case for .env files is, as you're hinting at but not quite saying, storing secret variables. Due to their secret nature, they aren't supposed to make it into any git diffs/logs. This can be useful for making code public without giving away an organization's secrets, or even for letting the two different developers run the same code with different local database credentials, say. – Dennis Hackethal Commented Oct 2, 2020 at 22:34
• env for "environment". When you boot an application from your personal laptop you might need variables that are specific to your laptop, its "environment", versus when the application is being served from the cloud which might have different variables, for instance the url of an api server – azium Commented Oct 2, 2020 at 22:37
• By the way, you CAN add the file to git if you can trust repo access devs with the contents. – Ozone Commented Oct 2, 2020 at 22:48

3 Answers 3

They are useful to store site-wide values and settings that don't belong in state or as declarations (deep) in the source.

Important to know is that, for react to use them, they have to start with REACT_APP_. This is due to the environment is a nodejs one, and nodejs will claim all variables unless they start with REACT_APP_

Environment variables starting with REACT_APP_ are embedded in the app code during build time.

Do not store any secrets (such as private keys) as REACT_APP_ variables in there! That will expose them in the JS build.

In your react app you can access the variables like so:

let value = {process.env.REACT_APP_MYVALUE}

In HTML you can use the variables as such:

<title>%REACT_APP_SITE_NAME%</title>

A good quick read on usage with create-react-app: https://create-react-app.dev/docs/adding-custom-environment-variables

Usage

Environment (.env) variables are used to store sensitive information, or as the name says, environment-focused information (live, development, debugging, etc...)

.env file is also kept inside .gitignore, so it does not get pushed to any repositories.

Keeping track of variables

.env.example is a file which is not kept in .gitignore, but it is needed for other developers to know how and what to put in their .env. It looks something like this:

.env.example:

REACT_APP_STRIPE_KEY=
MY_SECRET_KEY=
THIS=
FOO=
BAR=

Basically an empty example of what would be .env. This then gets copied and filled with real values in a .env file, which is only available for that developer on that puter, and is read locally by the scripts which then know in what mode to start the app, connected to what database, with what password etc.

Create a file in the root folder.Its .env file

REACT_APP_(VARIABLE_NAME)=KEY_HERE

Usage: when you added a variable in .env file. Restart your app.

console.log( process.env.REACT_APP_(VARIABLE_NAME) )

And your .gitignore file, add the bellow code

.env