javascript - 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

Waitting for answers