title: Setting base href using Environment variables
body: <p>Need to set the href value for <code>&lt;base href=""/&gt;</code> tag based on build environment configuration.</p>
  
  <p>Eg: </p>
  
  <p>Staging should have <code>&lt;base href="/staging" /&gt;</code></p>
  
  <p>Prod should have <code>&lt;base href="/" /&gt;</code></p>
  
  <p><strong>Current setup:</strong> </p>
  
  <p>Build command:</p>
  
  <pre><code>"build": "sh -ac '. .env.${REACT_APP_ENV}; react-scripts build'",
  
  "build:staging": "REACT_APP_ENV=staging npm run build",
  
  "build:prod": "REACT_APP_ENV=production npm run build",
  </code></pre>
  
  <p>.env.staging.js:</p>
  
  <pre><code>REACT_APP_BASE_HREF=/staging
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>....
  
  &lt;base href="" + process.env.REACT_APP_API_URL /&gt;
  
  ....
  </code></pre>
  
  <p>This doesn't seem to work in index.html. While similar setup works for JS files </p>
  
  <p>(Probably because JS files are parsed and bundled into a single file and the bundler reads the values at that point of time)</p>
  
  <p>Things tried:</p>
  
  <p>index.html: </p>
  
  <p><code>&lt;base href=process.env.REACT_APP_API_URL /&gt;</code></p>
  
  <p><code>&lt;base href="process.env.REACT_APP_API_URL" /&gt;</code></p>
  
  <p><code>&lt;base href="%process.env.REACT_APP_API_URL%" /&gt;</code> (similar to PUBLIC_URL variable)</p>
  
  <p>Setting basename property along with Browser Router also does not solve the problem</p>