title: Where do I initialize Firebase app in React application?
body: <p>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 <code>firebase.initializeApp(config)</code>.</p>
  
  <p>My app's structure is this:</p>
  
  <pre><code>- app.js
  - components
     |___Index.jsx
     |___Layout.jsx
     |___PageContent.jsx
  </code></pre>
  
  <p>Each file looks like the following</p>
  
  <p><strong>app.js</strong> </p>
  
  <p>Does all the express setup with server-side rendering</p>
  
  <p><strong>Index.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import Layout from './Layout.jsx';
  import PageContent from './PageContent.jsx';
  import './global.css';
  
  class Index extends React.Component {
    render() {
      return (
          &lt;Layout title={this.props.title}&gt;
              &lt;PageContent /&gt;
          &lt;/Layout&gt;
      );
    }
  }
  
  export default Index;
  </code></pre>
  
  <p><strong>PageContent.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import LandingPage from './components/Landing_Page/Landing.jsx';
  
  class PageContent extends React.Component {
      render() {
          return (
              &lt;LandingPage /&gt;
          );
      }
  }
  
  if (typeof window !== 'undefined') {
      ReactDOM.render(     
          &lt;PageContent /&gt;,
          document.getElementById('root')        
      );
  }
  
  export default PageContent;
  </code></pre>
  
  <p>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.</p>
  
  <p>Can anybody help me understand where I might put the database initialization code so that it is applied everywhere?</p>