Published:

React - Access Environment Variables from dotenv (.env)

This is a quick tutorial on how to create and access environment variables in React with a dotenv (.env) file.

React apps built with Create React App support dotenv environment variables out of the box, so all you need to do is add a .env file to the root folder of your React project.

To generate a React project with Create React App run the command npx create-react-app <project name>, the tool is also used to build and serve the application. For more info about Create React App see https://create-react-app.dev/.


How to make env variables accessible to the React client app

There's only one gotcha, to access environment variables from the client app they must be prefixed with REACT_APP_. Otherwise they will only be accessible on the server side.

You can access environment variables (with the REACT_APP_ prefix) from your React app via the Node.js process.env. object. For example const myVar = process.env.REACT_APP_MY_VAR;.


React env variable example on StackBlitz

Here's an example React app that contains a couple of environment variables. It shows that the env variable prefixed with REACT_APP_ is accessible to the App component and the server side only variable is not.

(See on StackBlitz at https://stackblitz.com/edit/react-access-environment-variables-from-dotenv)

 

Example dotenv (.env) file

The dotenv file from the example app. It defines two environment variables, the one prefixed with REACT_APP_ is accessible to the React client app, and the one without the prefix is only accessible to server side code.

# variables prefixed with REACT_APP_ are accessible from the react client app
REACT_APP_MY_ENV_VARIABLE=environemnt variable value from .env file

# variables without the REACT_APP_ prefix are NOT accessible from the react client app
SERVER_SIDE_ONLY_VAR=this can't be accessed on the client
 

React App Component

The App component attempts to display both environment variables, but only has access to the one prefixed with REACT_APP_.

It accesses variables in the .env file with the Node.js object process.env.

export default function App() {
    return (
        <div class="card m-3">
            <h5 class="card-header">React - Access Environment Variables from dotenv (.env)</h5>
            <div class="card-body">
                <p>REACT_APP_MY_ENV_VARIABLE: {process.env.REACT_APP_MY_ENV_VARIABLE}</p>
                <p>SERVER_SIDE_ONLY_VAR: {process.env.SERVER_SIDE_ONLY_VAR}</p>
            </div>
        </div>
    );
}
 

For more info on using environment variables in a React app built with Create React App see https://create-react-app.dev/docs/adding-custom-environment-variables/.

 


Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.

Other than coding...

I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.


Need Some React Help?

Search fiverr to find help quickly from experienced React developers.



Supported by