How to consume the environment variables in a React app
July 10, 2021
An environment variable is a global system variable that can be accessed by all the processes or users running under the operating system.
It’s made up of a name/value pair:
DB_HOST = mysql
In most cases, we use environment variables to deploy apps in any environment without code changes. We also use them to make sure that #key# sensitive information : like passwords or API keys #key# is not leaked into the app’s source code.
In this shot, we’ll be learning how to properly work with environment variables in a React app. I will be assuming that your project is created with CRA.
Working with environmental variables on local
To illustrate the process so far, let’s imagine that we’ll be working with Firebase integration.
First things first, create an .env
file on the root of your project. Now, we can add in all the Firebase info we have:
REACT_APP_API_KEY=key-here
REACT_APP_AUTH_DOMAIN=lorem.com
REACT_APP_DATABASE_URL=https://lorem-5fde6-default-rtdb.firebaseio.com/
REACT_APP_PROJECT_ID=lorem-5fde6
REACT_APP_STORAGE_BUCKET=lorem-5fde6.appspot.com
REACT_APP_MESSAGING_SENDER_ID=543505592089
Note:
- All environment variables must start with
REACT_APP_
in order to work.- Always restart your development server after any modification in
.env
files.
The next step is to configure and initialize Firebase — this is where we’ll need to consume our environment variables. Depending on how your structure your project, you may have to go to your firebase.js
or something similar.
We can see this in action in the code below:
const config = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
}
// the code continues here...
All our (necessary) environment variables are stored in an object called config
.
Note: In case you want to access the environment variables in an HTML file, just do it like this:
<title>%REACT_APP_WEBSITE_NAME%</title>
Never deploy .env
. It’s for local use only
Yes, you read it right: you should never send your .env
file along with your source code. It’s intended to be used in a local environment only.
So, you might ask, how can the app be deployed or used on the other side? Good question!
First, create a .gitignore
file (if not already done) and add your .env
file there so that it can’t be tracked by git. Now, you can create a .env-example
file (or whatever explicit name you want) based on the .env
, but without real sensitive data.
When you deploy your app, your host gives you an opportunity to set the environment variables needed for your app to successfully run. In case you download the source code of the app, you’ll need to create a .env
file based on .env-example
.
Conclusion
Environment variables are used for app deployment flexibility as it allows us to avoid sharing secrets in our code. All environment variables are defined in the .env
file, which should not be shared nor tracked with Git. To let people know what environment variables are required for your app, you need to specify them in .env-example
or in some other, similar name.