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/.