title: Accessing .env variables outside of React app directory
body: <p>My project's structure is:</p>
  <pre><code>.
  ├── backend
  │   ├── node_modules
  │   ├── package.json
  │   ├── routes
  │   └── server.js
  ├── frontend
  │   ├── node_modules
  │   ├── package.json
  │   ├── public
  │   └── src
  ├── node_modules
  ├── package.json
  └── .env
  
  </code></pre>
  <p><strong>Where <code>frontend</code> is a React app and <code>backend</code> is an Express app. I have an environment variable <code>API_KEY=...</code> in <code>.env</code> that I need to use in both the backend in the frontend apps.</strong></p>
  <ul>
  <li><p>In the Express backend app, I can access it easily using <code>process.env.API_KEY</code> without issues, even though it's outside of the backend app folder.</p>
  </li>
  <li><p>However, I also need to access that key from the React frontend app, which returns <code>undefined</code> when I use <code>process.env.API_KEY</code>. From React docs, it is said that for a React app you need to:</p>
  <ol>
  <li>Name the variable <code>REACT_APP_API_KEY</code></li>
  <li>Make sure that it is located inside of the React app directory.</li>
  </ol>
  <p>So yeah, I could create another <code>.env</code> file inside of the React app and follow these instructions, but I feel like it is adding unnecessary duplicated code:</p>
  <ol>
  <li>I'd have two <code>.env</code> files which seems a bit confusing.</li>
  <li>I'd have the same secret key in two different files, which is also confusing, and every time it changes I have to edit two files instead of one.</li>
  <li>I'd have to protect that new <code>.env</code> file from my version control software, which increases vulnerability.</li>
  </ol>
  </li>
  </ul>
  <p>Are there any workarounds that would enable me to just have the API key in the root directory of the project? Is it common practice to have same api key in multiple files?</p>