title: How to inject API server URL when deploying react frontend?
body: <p><em>Disclaimer</em>: I am a React noob so perhaps what I am trying to do is not the <em>React Way</em></p>
  
  <p>I am writing a React front-end that will be deployed to be served statically by some cloud provider, e.g. S3 or Google Storage or whatever. This front-end interacts with several API servers that live somewhere in the cloud, maybe in the same provider, maybe not. Furthermore, while developing the UI or part of it, those servers' addresses might be local or testing instances.</p>
  
  <p>How do I inject the API server(s) URLs into my react application in a flexible so that I can deploy in dev, staging or prod using different addresses?</p>
  
  <p><strong>SOLUTION</strong>: I finally ended up using a combination of solutions proposed:</p>
  
  <ul>
  <li>use <code>.env.production</code> and <code>.env.development</code> files (exact names) to store the variable <code>REACT_APP_API_URI = 'host'</code></li>
  <li>this is automatically picked-up by create-react-app's build scaffolding and available in UI code as <code>process.env.REACT_APP_API_URI</code></li>
  </ul>
  
  <p>Note this somewhat goes against principles from <a href="https://12factor.net/config" rel="noreferrer">12 Factor Apps</a>, e.g. storing env variables in files in version control but it does the job ATM.</p>