FirebaseExtended / FirebaseExtended/reactfire

Add an option to use local Firebase emulators

オープン
#315 コメント 6 件 リアクション 25 件 担当者 2 名 @jamesdaniels が担当を希望しています GitHub で見る
v5
主要言語
TypeScript
スター
3.6k
フォーク
403
平均マージ
14時間 53分
マージ済み PR(30日)
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 を短くまとめたダイジェスト。