Where do I initialize Firebase app in React application?

Question

I'm trying to integrate Firebase into my React app and after looking at various tutorials, I can't seem to find a consensus on where to put the firebase initialization code firebase.initializeApp(config).

My app's structure is this:

- app.js - components    |___Index.jsx    |___Layout.jsx    |___PageContent.jsx 

Each file looks like the following

app.js

Does all the express setup with server-side rendering

Index.jsx

import React from 'react'; import Layout from './Layout.jsx'; import PageContent from './PageContent.jsx'; import './global.css';  class Index extends React.Component {   render() {     return (         <Layout title={this.props.title}>             <PageContent />         </Layout>     );   } }  export default Index; 

PageContent.jsx

import React from 'react'; import ReactDOM from 'react-dom'; import LandingPage from './components/Landing_Page/Landing.jsx';  class PageContent extends React.Component {     render() {         return (             <LandingPage />         );     } }  if (typeof window !== 'undefined') {     ReactDOM.render(              <PageContent />,         document.getElementById('root')             ); }  export default PageContent; 

I need to make sure Firebase is available in every page of my website. Right now it is a single page app but eventually I'll be adding more.

Can anybody help me understand where I might put the database initialization code so that it is applied everywhere?

Answer 1

this is how I do it

create file Firebase.js next to app.js and put your initialization code

Firebase.js file

import * as firebase from 'firebase';  let config = {     apiKey: "XXXXXXX",     authDomain: "XXXXX",     databaseURL: "XXXXX",     projectId: "XXXXX",     storageBucket: "XXXX",     messagingSenderId: "XXXX" }; firebase.initializeApp(config);  export default firebase; 

and then import Firebase.js file every where you want to use it , for example

import React from 'react';     import firebase from './../Firebase.js'     // <------  import firebase  class Test extends React.Component {      componentDidMount(){         firebase.database().ref().child("X").on('value' , {...});     }      render() {         return (             <h1>Hello</h1>         );     } }  export default Test;