Telling client side to fetch from firestore emulator in dev

Question

I have initialized firebase in a create-react-app in a utility folder like so:

import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
})

export default app

To fetch from my firebase instance I then import firebase where necessary and fetch like so:

import React, { useState, useEffect } from 'react'
import logo from './logo.svg'
import firebase from './utils/firebase'
import './App.css'

function App() {
  const [values, setValues] = useState(null)

  useEffect(() => {
    getData()
  }, [])

  const randomElements = async (array, n) => {
    const res = await array
      .sort(() => Math.random() - Math.random())
      .slice(0, n)
    setValues(res)
  }

  const getData = async () => {
    const eachValue = []
    await firebase
      .firestore()
      .collection('customers')
      .get()
      .then(data => {
        data.forEach(doc => eachValue.push(doc.data()))
      })
      .catch(err => {
        console.log(err)
      })
    return randomElements(eachValue, 12)
  }

  console.log(values)

  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

If I have the firestore emulator running, is there a way to tell my react application to fetch from the emulator as opposed to from the production database?

score 2 · Accepted Answer · answered Sep 15 '20 at 07:28

2

Yes, you can set your emulator to be the one to be used by your application. As clarified in the official documentation Connect your app to the emulators, you need to use the below code block to point to the emulator.

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

Besides that, you can get a full tutorial on how to develop an application with emulators on Firestore using React - so you can get more information and details on how exactly do it - on this article:

Firebase Local Development with Firestore, Cloud Functions and React.

answered Sep 15 '20 at 07:28

gso_gabriel

4,199
1
10
22

do you by chance have experience with seeding the emulators on start? Is there a built-in method to achieve this or do they outline it in the docs by chance? – Rob Terrell Sep 15 '20 at 15:49
1

Hi @RobertTerrell the possibility that I would think of would be to perform an import to the simulator. I would recommend you to check these links [here](https://github.com/firebase/firebase-tools/issues/1167) and [here](https://stackoverflow.com/questions/57838764/how-to-import-data-from-cloud-firestore-to-the-local-emulator), on ways of doing it and how it need to works like this. – gso_gabriel Sep 16 '20 at 08:17

Telling client side to fetch from firestore emulator in dev

1 Answers1