Auto config Firebase SDK in React using Firebase Hosting

[Shai Ben-Tovim]

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 in 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?

[David East]

Hey Shai!

The common approach people have is to replace the configuration in a build step. This way there's no async network request needed at runtime. You can build your app with a flag that will decide which project's configuration to use. 

Also! You can use only one firebase.json file, but use different projects with aliasing. In the terminal you can use the command `firebase use --add`. It will prompt you to pick a project and give it an alias. When you want to deploy to a new project you can use the command `firebase use <alias-name>` then follow up with `firebase deploy`. You'll notice that there's a `.firebaserc` file that contains the project names mapped to the alias name.

Let me know if that helps!

[Shai Ben-Tovim]

Hi David,

Makes sense. Is there a way my build tools can read the current “active” firebase project (last firebase use [project]) so that can determine which config to bundle in the build? Or do I have to use a flag - which might actually mismatch the project I’m deploying to.

[Alex Memering]

Running `firebase use` (with no other args) will list out the current active project.  Depending on your build system you can run that and parse out the the project from there, or if your build system is node based then you could just require the CLI as a node module and run the use command that way. 

Hope that helps,

On Fri, May 25, 2018 at 3:01 PM Shai Ben-Tovim <sha...@gmail.com> wrote:

Hi David,

Makes sense. Is there a way my build tools can read the current “active” firebase project (last firebase use [project]) so that can determine which config to bundle in the build? Or do I have to use a flag - which might actually mismatch the project I’m deploying to.

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/cb33a23b-4cea-4341-83e8-baf089eb78fc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Alex Memering |

Software Engineer |

meme...@google.com

[Shai Ben-Tovim]

So found this:

 firebase setup:web --json

It will create json object matching the current active firebase project's credentials that can be used with firebase.initializeApp()

Example:

{

  "status": "success",

  "result": {

    "apiKey": "XXXXX",

    "databaseURL": "https://XXXX.firebaseio.com",

    "storageBucket": "XXXX.appspot.com",

    "authDomain": "XXXX.firebaseapp.com",

    "messagingSenderId": "YYYY",

    "projectId": "XXXX"

  }

}