Add an option to use local Firebase emulators

After creating an app with react-scripts, initialising Firebase and installing ReactFire, there are still quite a few steps needed to be able to develop the app using the local Firebase emulators:

1. Run firebase emulators:start to start the emulators.
2. Add "proxy": "http://localhost:5000" to package.json so that requests for /__/firebase/init.json are proxied to the hosting emulator.
3. Load the config from the hosting emulator, then preload and configure the rest of the emulators, before rendering the app:

import firebase from 'firebase/app'
import ReactDOM from 'react-dom'
import {
  FirebaseAppProvider,
  preloadAuth,
  preloadFirestore,
  preloadFunctions,
} from 'reactfire'

const AUTH_DOMAIN = 'example.com'
const FUNCTIONS_REGION = 'europe-west2'

fetch('/__/firebase/init.json').then(async (response) => {
  const firebaseConfig = await response.json()

  if (process.env.NODE_ENV === 'production') {
    firebaseConfig.authDomain = AUTH_DOMAIN
  }

  const firebaseApp = firebase.initializeApp(firebaseConfig)

  await preloadFirestore({
    firebaseApp,
    setup: async (factory) => {
      const firestore = factory()

      if (process.env.NODE_ENV !== 'production') {
        firestore.useEmulator('localhost', 8080)
      }

      //if (process.env.NODE_ENV === 'production') {
      //  await firestore.enablePersistence({ synchronizeTabs: true })
      //}

      return firestore
    },
  })

  await preloadFunctions({
    firebaseApp,
    setup: (factory) => {
      const functions = factory(FUNCTIONS_REGION)

      if (process.env.NODE_ENV !== 'production') {
        functions.useEmulator('localhost', 5001)
      }

      return functions
    },
  })

  await preloadAuth({
    firebaseApp,
    setup: async (factory) => {
      const auth = factory()

      if (process.env.NODE_ENV !== 'production') {
        auth.useEmulator('http://localhost:9099')
      }

      return auth
    },
  })

  ReactDOM.unstable_createRoot(document.getElementById('root')).render(
    <FirebaseAppProvider firebaseApp={firebaseApp} suspense={true}>
      <App />
    </FirebaseAppProvider>
  )
})

It feels like much of that could be handled inside ReactFire, perhaps with a boolean emulators property (or a config object with values for each emulator as needed) on FirebaseAppProvider. If it could avoid preloading each module until it’s needed for the first time that would be ideal.

[Bullfrog1234]

I agree with @hubgit suggestion, this would make the development experience better for all firebase products when using reactfire.

This would also align with the push in Firebase Summit 2020 #AskFirebase session which was pushing the emulators for use during dev.

Can you please add this to the backlog for someone to pickup and implement.

Cheers Bullfrog1234

[subhendukundu]

I love the idea. But there would be one concern. Sometimes, firebase emulators:start throws errors on ports. So ideal would be to have ana ability to change the port too.