DEV Community

Cover image for Environment Variables in ReactJS.
Felix DUSENGIMANA
Felix DUSENGIMANA

Posted on

Environment Variables in ReactJS.

If you’re using ReactJS and you are accessing some endpoint APIs, you may have come across environment variables. In this tutorial, I will take you through how to use environment variables.

Assumption: You’re familiar with the Create React App and you are using it to create your React application.

Why You Need Environment Variables

  1. To customize variables based on your environment, such as whether it is in production, development, or staging, etc.

  2. To store sensitive information like API keys and Passwords which are highly sensitive and you shouldn’t push them to version control.

Create React App supports custom environment variables without installing other packages.

Two ways of adding environment variables

  1. Using the .env file (This is the approach we are going to use).
  2. Through the shell (temporary, lasts as long as shell session last, and varies depending on the OS type).

Defining environment variable using .env

Step 1: In your application's root folder, create a text file called .env. Your working directory will look like this:

my-react-app/ 
 |-node-modules/
 |-src/
 |-public/
 |-.env
 |-gitignore
 |-package.json
 |-package.lock.json.
 |-README.md
Enter fullscreen mode Exit fullscreen mode

Step 2: Create your custom variables. Create React App(CRA) enforces the prefix REACT_APP on every custom variable.
Note that variables without the prefix REACT_APP are ignored during bundling. If you want to know more about how does CRA do this, check documentation here.
Variables should look like this:

REACT_APP_CLIENT_ID=12345
REACT_APP_KEY=aaddddawrfffvvvvssaa
Enter fullscreen mode Exit fullscreen mode

Step 3: Access them in your react app. You can print them and also assign them to other variables, but they are ready only in your application (means their value can't be changed).

import React from 'react';

function App() {
  console.log(process.env.REACT_APP_CLIENT_ID);//printing it to console
  console.log(process.env.REACT_APP_KEY);//printing it to console

  return (
    <div className="app">
      <p>{process.env.REACT_APP_KEY}</p>//printing it to screen
    </div>
  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

Step 4: There is a built-in environment variable called NODE_ENV. You can access it from process.env.NODE_ENV. This variable changes based on what mode you are currently in.
When you run npm start it is equal to "development",
when you run npm test it is equal to "test", and
when you run npm run build it is equal to "production".
More on use case can be found in this great tutorial.

Step five: Open the .gitignore file. I like to put .env and other environment variables under #misc as seen below.

# dependencies 
/node_modules 
# testing 
/coverage 
# production 
/build 
# misc 
.DS_Store 
.env    #<--------Put the custom env files here 
.env.local 
.env.development.local 
.env.test.local 
.env.production.local 
npm-debug.log* 
yarn-debug.log* 
yarn-error.log*
Enter fullscreen mode Exit fullscreen mode

Why Isn’t It Working Even After Following These Processes🤔?

  • Make sure you used the prefix REACT_APP on every variable
  • Confirm that the variable names on the .env file match the ones on your js file. For example,REACT_APP_KEY in .env versus process.env.REACT_APP_KEY
  • If the development server was running, stop it then rerun using npm start it. I really struggled with this (variable is undefined error).
  • Every time you update the .env file, you need to stop the server and rerun it, as the environment variables are only updated during build (variable is undefined error).
  • Remove quotations from the values of the variables.

The official documentation for using environment variables from Create React App can be found here.

Discussion (7)

Collapse
hellojt9040 profile image
helloJT

If we don't push it to vsrsion control, then do we need to set those env variables in deployment server in PROD ?

Collapse
felixdusengimana profile image
Felix DUSENGIMANA Author • Edited on

well, it varies with your production environment.
You may consider reading this article.
dev.to/rajatetc/configure-environm...

Let me know if you need any help with your deployment.

Collapse
tigawanna profile image
Dennis kinuthia

nope , but it helps when testing as you can just switch to the local env variables instead of deleting and hard coding them .
plus it's good practice because it's easy to forget and push these changes and almost loose all your new changes after panicking and running some git script you found on stack overflow to remove the keys from your public repo

Collapse
tiemac profile image
TiemaCoulibaly

Thanks A Lot !

Collapse
felixdusengimana profile image
Felix DUSENGIMANA Author

you're welcome.

Collapse
amangodara profile image
Aman Godara • Edited on

Thanks a lot!
One question:
if I set an env variable as integer value, will it automatically be converted to string when I access it using process.env.REACT_APP_SOME_VARIABLE?

Collapse
felixdusengimana profile image
Felix DUSENGIMANA Author

Yes, everything from the environment variables are casted to string data type.