How To Use Firestore Emulator With Reactfire?

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

Solution 1:

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

importReactfrom'react';
import logo from'./logo.svg';
import'./App.css';
importAnswersfrom'./components/answers'importHomeScreenfrom'./screens/HomeScreen'import { preloadFirestore, useFirebaseApp } from'reactfire'import firebase from'firebase'constpreloadSDKs = (firebaseApp: firebase.app.App) => {
  returnPromise.all([
    preloadFirestore({
      firebaseApp,
      setup: firestore => {
      returnfirestore().settings({host: 'localhost:8080', ssl: false});
    }
    }),
    // preloadDatabase(),// preloadStorage(),// etc.
  ]);
};

functionApp() {
  const firebaseApp = useFirebaseApp();

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

  return (
    <divclassName="App"><headerclassName="App-header"><imgsrc={logo}className="App-logo"alt="logo" /><HomeScreen /></header></div>
  );
}

exportdefaultApp;

Solution 2:

The Reactfire docs on emulation now differ from what was mentioned in the earlier answers, they were updated August 2021.

I've modified their example to show you how to use the firestore and auth emulators with Firebase v9+:

import { getAuth, connectAuthEmulator } from'firebase/auth'; // Firebase v9+import { getFirestore, connectFirestoreEmulator } from'firebase/firestore'; // Firebase v9+import { FirebaseAppProvider, DatabaseProvider, AuthProvider, useFirebaseApp } from'reactfire';

functionFirebaseComponents({ children }) {
  const app = useFirebaseApp();
  const firestore = getFirestore(app);
  const auth = getAuth(app);

  // Check for dev/test mode however your app tracks that.// `process.env.NODE_ENV` is a common React patternif (process.env.NODE_ENV !== 'production') {
    // Set up emulatorsconnectFirestoreEmulator(firestore, 'localhost', 8080);
    connectAuthEmulator(auth, 'http://localhost:9099');
  }

  return (
    <AuthProvidersdk={auth}><FirestoreProvidersdk={firestore}><MyCoolAppThatUsesAuthAndFirestore /></FirestoreProvider></AuthProvider>
  );
}

Similar connection patterns also exist for other emulators (connectStorageEmulator, connectDatabaseEmulator etc...)

Solution 3:

I have found an Github Issue in which its suggested to use preloadFirestore from reactfire.

They although provide an example in their sample app:

preloadFirestore(firebaseApp, firestore => { 
  return firestore().enablePersistence(); 
}), 

If you want to use it like they do, you have a basic setup like this:

// create a preload function to combine multiple preloadsconstpreloadSDKs = firebaseApp => {
  returnPromise.all([
    preloadFirestore(firebaseApp, firestore => {
      returnfirestore().settings({host: 'localhost:8080', ssl: false});
    }),
    // preloadDatabase(), // preloadStorage(), // etc.
  ]);
};

functionApp() {
  const firebaseApp = useFirebaseApp();

  // Kick off fetches for SDKs and data that// we know our components will eventually need.//// This is OPTIONAL but encouraged as part of the render-as-you-fetch pattern// https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspensepreloadSDKs(firebaseApp).then(() =>Promise.resolve());

  return (
    <YourComponents />
  )
}

Afterwards you can just use useFirestore() anywhere in the app to lazy load it with the settings above.

Hints:

• You have to use the <FirebaseAppProvider /> before preloading the SDKs
• Your component preloading the SDKs has to be wrapped inside a <Suspense /> or <SuspenseWithPerf /> component
• Check the reactfire demo app to see how you can not only preload SDKs but data as well