title: Auto config Firebase SDK in React
body: <ul>
  <li>I have a React app that I'd like to deploy to multiple environments (dev, staging, prod).</li>
  <li>each env is a separate Firebase project with its own config (apiKey, databseURL, etc). currently I hold multiple <code>firebase-config.json</code> for each env and use a switch in source code to determine which to use.</li>
  <li>I am using Firebase hosting for the app.</li>
  <li>The <a href="https://firebase.google.com/docs/hosting/reserved-urls?authuser=0#sdk_auto_configuration" rel="noreferrer">hosting docs</a> state that I can fetch a special reserved url <code>/__/firebase/init.json</code> (or script in <code>/__/firebase/init.js</code>) that firebase hosting prepares for each project separately so I can init the correct instance of the firebase app for that environment. Also see the blog post <a href="https://firebase.googleblog.com/2017/04/easier-configuration-for-firebase-on-web.html" rel="noreferrer">here</a></li>
  </ul>
  
  <p>What I can't figure out is: fetching the special js/json file over the network is async and in the meantime the react app is initialising and requires the firebase app for auth and other operations. Is there a way I can complete the firebase init and have a firebase app instance ready before react has started-up?</p>