title: How to set production environment variable in React app? (hosted on Netlify)
body: <p>I was wondering how I can set environment variable in React to hid my API key?</p>
  
  <p>I am hosting the app on Netlify so I am not sure if that matters. I am able to successfully do it in development but when it gets to production, the api key becomes undefined.</p>
  
  <p>In my .env file when I have: </p>
  
  <pre><code>REACT_APP_API_KEY="my_api_key_etc"
  </code></pre>
  
  <p>In my app.js I have: </p>
  
  <pre><code>const apiKey = process.env.REACT_APP_API_KEY
  </code></pre>
  
  <p>when I <code>console.log(apiKey)</code> in development (<code>npm start</code>): it shows my api fine, but when in production mode (npm run build): it shows undefined.</p>
  
  <p>I have already tried to create two more files like <code>.env.development</code> and <code>.env.production</code> and still that didn't work.</p>
  
  <p>Also I made sure my <code>.env</code> files are outside of my src folder.</p>
  
  <p>Do you guys think it has something to do with Netlify? </p>
  
  <p>Thanks in advance!</p>