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/.
Need Some React Help?
Search fiverr to find help quickly from experienced React freelance developers.
Follow me for updates
I share all new blog posts on Twitter and Facebook.
When I'm not coding
My wife and I are attempting to ride motorcycles around Australia and vlog about it on YouTube.
Comments
Support the blog
