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 clientReact 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.
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Twitter at https://twitter.com/jason_watmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
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.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some React Help?
Search fiverr to find help quickly from experienced React developers.
Support my work
