title: How do I store and access my API keys with a React + Webpack app?
body: <p>I'm currently building a project with React, Babel and Webpack on the front end.</p>
  
  <p>I'll need to store and access my API keys somewhere, but I'm not sure where.</p>
  
  <p>I think I should store my API keys in my .env file, which is in my .gitignore. But it's accessing them that's tricking me up.</p>
  
  <p>From what I've read it seems that webpack can access environment variables in yuor .env file.</p>
  
  <p>But if I do that, won't it mean that when I make requests my API keys will be going through the browser - so the keys will be unprotected? </p>
  
  <p>In the past I've used a node express back end server, so that my API keys are protected and have nothing to do with the browser. But I'm not sure if I need this when I have a webpack dev server as well.</p>
  
  <p>I started to set up a node express back end server, but then didn't know how to tie this into my webpack.config or package.json. Webpack is already a node express server! So do I have 2 servers? With the sole reason for having a second server being to protect my API keys?</p>
  
  <p>I'm really confusing myself and I think unnecessarily complicating things. </p>
  
  <p>Any help would be very much appreciated.</p>