FirebaseExtended / FirebaseExtended/reactfire

Add an option to use local Firebase emulators

Đang mở
#315 6 bình luận 25 reaction 2 người được giao Được @jamesdaniels nhận Xem trên GitHub
v5
Ngôn ngữ chính
TypeScript
Star
3.6k
Fork
403
Merge trung bình
14 giờ 53 phút
Pull request đã merge (30 ngày)
5

Mô tả

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.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.