Estoy jugando con Firebase y Svelte en este momento y me pregunto cuál es la mejor manera de configurar un objeto de aplicación de Firebase que pueda usar desde varios componentes. Por ejemplo, tengo dos componentes/páginas diferentes (enrutamiento del lado del cliente) que necesitan obtener algunos datos de Firestore. Actualmente, estoy inicializando el objeto de la aplicación en ambas páginas y ellos están haciendo lo suyo después de eso, algo como esto:
// PageB.svelte import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { // ... }; // Initialize Firebase app const app = initializeApp(firebaseConfig); // Initialize Firestore const db = getFirestore(app); // Do something with the db object.. // PageA.svelte import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { // ... }; // Initialize Firebase app again const app = initializeApp(firebaseConfig); // Initialize Firestore again const db = getFirestore(app); // Do something with the db object..Estoy inicializando y creando dos objetos exactamente iguales en los componentes y esto se siente mal y al menos dividiría la configuración en una configuración global de algún tipo, pero no estoy seguro de qué hacer con los objetos de Firebase.
¿Debo crear un contenedor alrededor de la inicialización y luego importarlo a mis páginas o cuál sería la solución recomendada? ¿Algo como esto?:
// firebase.ts import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { // ... }; export const app = initializeApp(firebaseConfig); export const db = getFirestore(app); // PageA.svelte import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { // ... }; // Initialize Firebase app again const app = initializeApp(firebaseConfig); // Initialize Firestore again const db = getFirestore(app); // Do something with the db object..¿Hay algún problema con la inicialización de una aplicación Firebase varias veces o es un problema compartir la misma instancia? Me inclino por la instancia de usos múltiples en este momento, ya que eso me permitiría adjuntar fácilmente emuladores en el entorno de desarrollo, pero no estoy seguro de cuál es el mejor enfoque.
Te gusta compartir objetos de firebase. Así que comparte la instancia. La mejor manera de compartir una instancia de firebase es usar firebase.js (como su firebase.ts de ejemplo) para iniciar la instancia (aplicación).
Tan pronto como importe firebase.js (POR PRIMERA VEZ), la instancia (aplicación) estará disponible y se compartirá porque un módulo ES6 se ejecutará una vez. Las importaciones consecutivas compartirán la misma instancia de la aplicación.
base de fuego.js:
export const app = initializeApp(firebaseConfig); export const db = getFirestore(app);PageA.svelte :
import { db } from "../firebase" ... // use the dbPageB.svelte :
import { db } from "../firebase" ... // use the dbPuede usar variables env en su firebase.js para controlar el uso de emuladores
firebase.js vite ejemplo:
if (import.meta.env.DEV) { connectFirestoreEmulator(db, "localhost", 8080); connectStorageEmulator(storage, "localhost", 9199); }En la mayoría de los casos, solo tiene que inicializar una única aplicación predeterminada. Existe la posibilidad de que encuentre un problema si se trata de la misma instancia. En su mayoría, la inicialización múltiple es para usar otro proyecto.