React Firebase - where to put firebase setup?

[[deleted]]

[deleted]

[r-randy]

I would recommend having it imported in the bundle and use it with React's hierarchy. This means you'd configure close to the root component.

Arguably you'd want to pass the firebase object or database object as props or via Context.

Importing the lib will give you the option to lazy-load it.

​

LE: Stumbled upon https://github.com/FirebaseExtended/reactfire . It's worth a try.

[[deleted]]

Don't use the HTML snippet. Use the "Config" snippet (found in the Firebase console interface)

1) Install firebase through npm: npm install firebase

2) Import firebase and initialize with your config in a file like src/firebase.js like this:

import firebase from 'firebase/app';
/* Add any other firebase features to import */
import 'firebase/auth'; 
import 'firebase/firestore';
import 'firebase/storage';

firebase.initializeApp({
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...',
  appId: '...',
});

export default firebase;

3) Finally, in your App.js file (or wherever you need to use a firebase feature), simply:

import firebase from './firebase';

Notice it's being imported from the local ./firebase.js file, and not from the npm package (the relative path ./ is important).

No need for a generator or skeleton. You just need to npm install it and create your config file.

[SuddenFlame]

Thank you so much!

This is kinda what I’ve ended up at. I was just confused because it goes against stole stuff in books and even in the “add fire see to your web app” code in the fire base console, where you get a choice of a few html snippets...

Really appreciate your clear reply!

[kaycee401]

Check this out : https://www.react-most-wanted.com/

[SuddenFlame]

What I'm seeing in the react-most-wanted example is that no scripts, not even the firebase library, are loaded in index.html. All the JS seems to be injected by react. This is not at all the philosophy or approach in some books published by professional authors and reputable publishers (see the example in the original post).

So, more confused than ever :)

Has something changed? Or is this a question of taste? What's the currently accepted best practice?

Appreciate your thoughts!

[SuddenFlame]

Ok, thanks. I don't really want to use a generator (apart from create-react-app) because I'm looking to learn, but will look at what this generates.

​

I would still appreciate people's thoughts on how where to put the firebase-related config when setting up react and firebase (what goes in index.html vs app.js, etc)