FirebaseExtended / FirebaseExtended/reactfire

Add an option to use local Firebase emulators

未关闭
#315 6 条评论 25 个 reaction 已指派 2 人 已被 @jamesdaniels 认领 在 GitHub 查看
v5
主要语言
TypeScript
星标
3.6k
派生
403
平均合并
14 小时 53 分钟
30 天内合并 PR
5

描述

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.

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。