FirebaseExtended / FirebaseExtended/reactfire

Add an option to use local Firebase emulators

Aperta
#315 6 commenti 25 reazioni 2 assegnatari Rivendicata da @jamesdaniels Vedi su GitHub
v5
Lingua principale
TypeScript
Stelle
3.6k
Fork
403
Merge medio
14h 53m
PR unite (30g)
5

Descrizione

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.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.