Agregue Firebase a su proyecto de JavaScript

Siga esta guía para usar el SDK de JavaScript de Firebase en su aplicación web o como cliente para el acceso del usuario final, por ejemplo, en una aplicación de IoT o de escritorio Node.js.

Paso 1 : crea un proyecto de Firebase y registra tu aplicación

Antes de poder agregar Firebase a su aplicación JavaScript, debe crear un proyecto de Firebase y registrar su aplicación en ese proyecto. Cuando registres tu aplicación con Firebase, obtendrás un objeto de configuración de Firebase que usarás para conectar tu aplicación con los recursos de tu proyecto de Firebase.

Visita Comprender los proyectos de Firebase para obtener más información sobre los proyectos de Firebase y las mejores prácticas para agregar aplicaciones a proyectos.

Si aún no tienes un proyecto de JavaScript y solo quieres probar un producto de Firebase, puedes descargar uno de nuestros ejemplos de inicio rápido .

Paso 2 : instale el SDK e inicialice Firebase

Esta página describe las instrucciones de configuración para la API modular del SDK de Firebase JS, que utiliza un formato de módulo JavaScript .

Este flujo de trabajo utiliza npm y requiere paquetes de módulos o herramientas de marco de JavaScript porque la API modular está optimizada para funcionar con paquetes de módulos para eliminar el código no utilizado (sacudida de árboles) y disminuir el tamaño del SDK.

  1. Instale Firebase usando npm:

    npm install firebase

  2. Inicializa Firebase en tu aplicación y crea 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 Firebase es un objeto similar a un contenedor que almacena la configuración común y comparte la autenticación entre los servicios de Firebase. Después de inicializar un objeto de la aplicación 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 utilizar 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 : utilice un paquete de módulos (paquete web/rollup) para reducir el tamaño

El SDK web de Firebase está diseñado para funcionar con paquetes de módulos para eliminar cualquier código no utilizado (sacudida de árboles). Recomendamos encarecidamente utilizar este enfoque para aplicaciones de producción. Herramientas como Angular CLI , Next.js , Vue CLI o Create React App manejan automáticamente el paquete de módulos para las 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 la 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 bibliotecas disponibles .

Próximos pasos

Más información sobre Firebase: