Many developers use <a href="https://github.com/facebook/create-react-app" target="_blank" rel="noreferrer noopener nofollow">create-react-app</a> to generate a boilerplate needed to quickly start developing a React application. It gives you the option to define Environment Variables is a special file named <code>.env.</code>



All variables defined in this file are accessible in the code via <code>process.env..</code>



<h2>Define Environment Variable</h2>



First, open the project and create <code>.env</code> file in the root directory:



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/03/react-env-1.png" alt="" class="wp-image-821"/><figcaption>env var on root</figcaption></figure>



To define Environment Variable, open the .env file and paste the following code:



<pre class="wp-block-code"><code>MY_ENVIRONMENT_VARIABLE=test</code></pre>



We have just defined our first variable, great.



Next, save the changes, close the file and navigate to App.js and read the variable:



<pre class="wp-block-code"><code>const App = () =&gt; {
 console.log(process.env.MY_ENVIRONMENT_VARIABLE);
 return &lt;div className="App"&gt;Hello, world&lt;/div&gt;;
};</code></pre>



Start the project: <code>NPM START</code>



And note that undefined was output to the console:



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/03/undefined-console-1024x106.png" alt="" class="wp-image-822"/><figcaption>undefined console</figcaption></figure>



Do you know why?



<h2>Gotcha #1</h2>



The first mistake we made is not reloading our app after defining an Environment Variable.



Remember that Environment Variables are embedded during build time.



Any change in the .env file requires an application to be reloaded.



Let's do this and try again:



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/03/undefined-console-1-1024x106.png" alt="" class="wp-image-823"/><figcaption>undefined console</figcaption></figure>



Still no success, let's find out why.



<h2>Gotcha #2</h2>



The second thing to remember is that, for security reasons, create-react-app does not allow you to define Environment Variables that do not start with the REACT_APP_ prefix.



Our variable name is definitely wrong and will not work.



Let's change it:



<pre class="wp-block-code"><code>REACT_APP_MY_ENVIRONMENT_VARIABLE=test</code></pre>



And in the App.js:



<pre class="wp-block-code"><code>const App = () =&gt; {
 console.log(process.env.REACT_APP_MY_ENVIRONMENT_VARIABLE);
 return &lt;div className="App"&gt;Hello, world&lt;/div&gt;;
};

export default App;</code></pre>



Reload an application and check the console:



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/03/success-console-1024x104.png" alt="" class="wp-image-824"/><figcaption>working console</figcaption></figure>



Hooray, we got it to work.



<h3>Summary</h3>



The two most important things to remember when defining Environment Variables in a project bootstrapped with create-react-app are:



<ul><li>Always reload your application after making a change to the .env file</li><li>Always prefix your variables with REACT_APP_</li></ul>

Many developers use create-react-app to generate a boilerplate needed to quickly start developing a React application. It gives you the option to...

Can't Read Environment Variables In React?