Understanding .env file and environment variables in React JS

user_13723603 0
Viewed 4810

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?

reactjs node.js environment-variables variables javascript
2 Answers

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

user_66726790

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 computer, 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.

user_38483840
Related