Add an option to use local Firebase emulators
@jamesdaniels arbeitet bereits daran.
Seit 15.9.2021.
Bewertung
Dieses Issue wurde noch nicht bewertet.
Beschreibung
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:
- Run
firebase emulators:startto start the emulators. - Add
"proxy": "http://localhost:5000"to package.json so that requests for/__/firebase/init.jsonare proxied to the hosting emulator. - Load the config from the hosting emulator, then preload and configure the rest of the emulators, before rendering the app:
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(
<FirebaseAppProvider firebaseApp={firebaseApp} suspense={true}>
<App />
</FirebaseAppProvider>
)
})
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.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 3.6k
- Forks
- 403
- Ø Merge
- 5 T. 1 Std.
- Gemergte PRs (30 T.)
- 10
Beitragsleitfaden
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus FirebaseExtended/reactfire
-
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 38/100
FirebaseExtended/reactfire#801 ·
-
v5
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 48/100
FirebaseExtended/reactfire#793 ·
-
v5
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100
FirebaseExtended/reactfire#790 · 2 Kommentare ·
-
v5
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 55/100
FirebaseExtended/reactfire#789 ·
-
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 35/100
FirebaseExtended/reactfire#788 ·
Alle Issues in FirebaseExtended/reactfire
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
bcgov/bc-wallet-mobile#4761 · 1 Kommentar ·
-
external-issue to-triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 88/100
-
area-deployment area-integrations triage:bot-seen
Schwierigkeit 2/5 Ein halber Tag Anfängerfreundlichkeit 86/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
-
refactor
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100