Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Agregue Firebase a su proyecto de JavaScript

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

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.

  1. Instale Firebase usando npm:

    npm install firebase
  2. 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: