FirebaseExtended / FirebaseExtended/reactfire

Add an option to use local Firebase emulators

Ouverte
#315 6 commentaires 25 réactions 2 personnes assignées Réclamée par @jamesdaniels Voir sur GitHub
v5
Langage dominant
TypeScript
Étoiles
3.6k
Forks
403
Merge moyen
14 h 53 min
PR mergées (30 j)
5

Description

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:

```js
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(



)
})
```

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.

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.