Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Add an option to use local Firebase emulators

Offen
#315 6 Kommentare 25 Reaktionen 2 zugewiesene Personen Auf GitHub ansehen

@jamesdaniels arbeitet bereits daran.

Seit 15.9.2021.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Beschreibung

v5

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.

Vorherrschende Sprache
TypeScript
Sterne
3.6k
Forks
403
Ø Merge
5 T. 1 Std.
Gemergte PRs (30 T.)
10

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus FirebaseExtended/reactfire

Alle Issues in FirebaseExtended/reactfire

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.