Search code examples
reactjsfirebasefirebase-hosting

Auto config Firebase SDK in React

  • I have a React app that I'd like to deploy to multiple environments (dev, staging, prod).
  • each env is a separate Firebase project with its own config (apiKey, databseURL, etc). currently I hold multiple firebase-config.json for each env and use a switch in source code to determine which to use.
  • I am using Firebase hosting for the app.
  • The hosting docs state that I can fetch a special reserved url /__/firebase/init.json (or script in /__/firebase/init.js) 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 here

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?

Solution

  • Found this firebase-CLI command:

    firebase setup:web --json

    It will output the json required for initialising the firebase app based on the active firebase app (firebase use). Just need to include the resulting json in the build chain.