How to use firestore emulator with reactfire?

Question

I have set up firestore locally following the firebase docs and I can test firebase functions easily. I would love to develop locally with an local firestore database. In the docs they provide the following code:

// Initialize your Web app as described in the Get started for Web
// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.settings({
    host: "localhost:8080",
    ssl: false
  });
}

How can I do this, if I use reactfire with reactjs to init firebase? Currently its initialised like this:

const firebaseConfig = {
  apiKey: "",
  authDomain: "example.firebaseapp.com",
  databaseURL: "https://example.firebaseio.com",
  projectId: "example",
  storageBucket: "example.appspot.com",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

ReactDOM.render(
  <React.StrictMode>
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <App/>
    </FirebaseAppProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Should I just manipulate the databaseURL: in the config or is there another best practice to connect to the local emulator firestore?

Answer 1

Thanks for your help guys! Reactfire api changed once again, this is currently working solution:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Answers from './components/answers'
import HomeScreen from './screens/HomeScreen'
import { preloadFirestore, useFirebaseApp } from 'reactfire'
import firebase from 'firebase'

const preloadSDKs = (firebaseApp: firebase.app.App) => {
  return Promise.all([
    preloadFirestore({
      firebaseApp,
      setup: firestore => {
      return firestore().settings({host: 'localhost:8080', ssl: false});
    }
    }),
    // preloadDatabase(),
    // preloadStorage(),
    // etc.
  ]);
};

function App() {
  const firebaseApp = useFirebaseApp();

  preloadSDKs(firebaseApp).then(() => Promise.resolve());

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <HomeScreen />
      </header>
    </div>
  );
}

export default App;