Siga esta guía para usar el SDK de JavaScript de Firebase en su aplicación web o como cliente para el acceso de usuarios finales, por ejemplo, en una aplicación de IoT o de escritorio de Node.js.
Paso 1 : Cree un proyecto de Firebase y registre su aplicación
Antes de poder agregar Firebase a su aplicación de JavaScript, debe crear un proyecto de Firebase y registrar su aplicación con ese proyecto. Cuando registre su aplicación con Firebase, obtendrá un objeto de configuración de Firebase que usará para conectar su aplicación con los recursos de su proyecto de Firebase.
Visite Comprender los proyectos de Firebase para obtener más información sobre los proyectos de Firebase y las prácticas recomendadas para agregar aplicaciones a los proyectos.
Si aún no tiene un proyecto de JavaScript y solo desea probar un producto de Firebase, puede descargar uno de nuestros ejemplos de inicio rápido .
Paso 2 : Instale el SDK e inicialice Firebase
En esta página, se describen las instrucciones de configuración para la versión 9 del SDK de Firebase JS, que utiliza un formato de módulo de JavaScript .
Este flujo de trabajo usa npm y requiere agrupadores de módulos o herramientas de marco de JavaScript porque el SDK v9 está optimizado para trabajar con agrupadores de módulos para eliminar el código no utilizado (desplazamiento de árboles) y reducir el tamaño del SDK.
Instale Firebase usando npm:
npm install firebase
Inicialice Firebase en su aplicación y cree un objeto de aplicación de Firebase:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);Una aplicación de Firebase es un objeto similar a un contenedor que almacena una configuración común y comparte la autenticación entre los servicios de Firebase. Después de inicializar un objeto de aplicación de Firebase en su código, puede agregar y comenzar a usar los servicios de Firebase.
Paso 3 : accede a Firebase en tu aplicación
Los servicios de Firebase (como Cloud Firestore, Authentication, Realtime Database, Remote Config y más) están disponibles para importar dentro de subpaquetes individuales.
El siguiente ejemplo muestra cómo podría usar el SDK de Cloud Firestore Lite para recuperar una lista de datos.
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// Get a list of cities from your database
async function getCities(db) {
const citiesCol = collection(db, 'cities');
const citySnapshot = await getDocs(citiesCol);
const cityList = citySnapshot.docs.map(doc => doc.data());
return cityList;
}
Paso 4 : Use un paquete de módulos (webpack/Rollup) para reducir el tamaño
Firebase Web SDK está diseñado para funcionar con paquetes de módulos para eliminar cualquier código no utilizado (desplazamiento de árboles). Recomendamos encarecidamente utilizar este enfoque para las aplicaciones de producción. Herramientas como Angular CLI , Next.js , Vue CLI o Create React App manejan automáticamente la agrupación de módulos para bibliotecas instaladas a través de npm e importadas a su base de código.
Consulte nuestra guía Uso de paquetes de módulos con Firebase para obtener más información.
Servicios de Firebase disponibles para web
Ahora que está configurado para usar Firebase, puede comenzar a agregar y usar cualquiera de los siguientes servicios de Firebase disponibles en su aplicación web.
Los siguientes comandos muestran cómo importar bibliotecas de Firebase instaladas localmente con npm . Para opciones de importación alternativas, consulte la documentación de las bibliotecas disponibles .
Próximos pasos
Más información sobre Firebase:
Explora las aplicaciones de muestra de Firebase .
Obtén experiencia práctica con Firebase Web Codelab .
Explore el código fuente abierto en GitHub .
Revise los entornos admitidos para el SDK de JavaScript de Firebase.
Acelere su desarrollo con bibliotecas de código abierto adicionales mantenidas por Firebase, como AngularFire , RxFire y FirebaseUI para web .
Prepárese para lanzar su aplicación:
- Configura alertas de presupuesto para tu proyecto en Google Cloud Console.
- Supervise el panel de uso y facturación en la consola de Firebase para obtener una imagen general del uso de su proyecto en varios servicios de Firebase.
- Revise la lista de verificación de lanzamiento de Firebase .
Siga esta guía para usar el SDK de JavaScript de Firebase en su aplicación web o como cliente para el acceso de usuarios finales, por ejemplo, en una aplicación de IoT o de escritorio de Node.js.
Paso 1 : Cree un proyecto de Firebase y registre su aplicación
Antes de poder agregar Firebase a su aplicación de JavaScript, debe crear un proyecto de Firebase y registrar su aplicación con ese proyecto. Cuando registre su aplicación con Firebase, obtendrá un objeto de configuración de Firebase que usará para conectar su aplicación con los recursos de su proyecto de Firebase.
Visite Comprender los proyectos de Firebase para obtener más información sobre los proyectos de Firebase y las prácticas recomendadas para agregar aplicaciones a los proyectos.
Si aún no tiene un proyecto de JavaScript y solo desea probar un producto de Firebase, puede descargar uno de nuestros ejemplos de inicio rápido .
Paso 2 : Instale el SDK e inicialice Firebase
En esta página, se describen las instrucciones de configuración para la versión 9 del SDK de Firebase JS, que utiliza un formato de módulo de JavaScript .
Este flujo de trabajo usa npm y requiere agrupadores de módulos o herramientas de marco de JavaScript porque el SDK v9 está optimizado para trabajar con agrupadores de módulos para eliminar el código no utilizado (desplazamiento de árboles) y reducir el tamaño del SDK.
Instale Firebase usando npm:
npm install firebase
Inicialice Firebase en su aplicación y cree un objeto de aplicación de Firebase:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);Una aplicación de Firebase es un objeto similar a un contenedor que almacena una configuración común y comparte la autenticación entre los servicios de Firebase. Después de inicializar un objeto de aplicación de Firebase en su código, puede agregar y comenzar a usar los servicios de Firebase.
Paso 3 : accede a Firebase en tu aplicación
Los servicios de Firebase (como Cloud Firestore, Authentication, Realtime Database, Remote Config y más) están disponibles para importar dentro de subpaquetes individuales.
El siguiente ejemplo muestra cómo podría usar el SDK de Cloud Firestore Lite para recuperar una lista de datos.
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// Get a list of cities from your database
async function getCities(db) {
const citiesCol = collection(db, 'cities');
const citySnapshot = await getDocs(citiesCol);
const cityList = citySnapshot.docs.map(doc => doc.data());
return cityList;
}
Paso 4 : Use un paquete de módulos (webpack/Rollup) para reducir el tamaño
Firebase Web SDK está diseñado para funcionar con paquetes de módulos para eliminar cualquier código no utilizado (desplazamiento de árboles). Recomendamos encarecidamente utilizar este enfoque para las aplicaciones de producción. Herramientas como Angular CLI , Next.js , Vue CLI o Create React App manejan automáticamente la agrupación de módulos para bibliotecas instaladas a través de npm e importadas a su base de código.
Consulte nuestra guía Uso de paquetes de módulos con Firebase para obtener más información.
Servicios de Firebase disponibles para web
Ahora que está configurado para usar Firebase, puede comenzar a agregar y usar cualquiera de los siguientes servicios de Firebase disponibles en su aplicación web.
Los siguientes comandos muestran cómo importar bibliotecas de Firebase instaladas localmente con npm . Para opciones de importación alternativas, consulte la documentación de las bibliotecas disponibles .
Próximos pasos
Más información sobre Firebase:
Explora las aplicaciones de muestra de Firebase .
Obtén experiencia práctica con Firebase Web Codelab .
Explore el código fuente abierto en GitHub .
Revise los entornos admitidos para el SDK de JavaScript de Firebase.
Acelere su desarrollo con bibliotecas de código abierto adicionales mantenidas por Firebase, como AngularFire , RxFire y FirebaseUI para web .
Prepárese para lanzar su aplicación:
- Configura alertas de presupuesto para tu proyecto en Google Cloud Console.
- Supervise el panel de uso y facturación en la consola de Firebase para obtener una imagen general del uso de su proyecto en varios servicios de Firebase.
- Revise la lista de verificación de lanzamiento de Firebase .