Agrega Firebase al proyecto de JavaScript

Sigue esta guía para utilizar el SDK de Firebase JavaScript en tu app web o como cliente para el acceso de usuario final (por ejemplo, en una aplicación de Node.js para computadoras o de IoT).

Paso 1: Crea un proyecto de Firebase y registra tu app

Antes de que puedas agregar Firebase a tu app de JavaScript, tendrás que crear un proyecto de Firebase y registrar tu app en él. Cuando lo hagas, obtendrás un objeto de configuración de Firebase que usarás para conectar la app con los recursos del proyecto de Firebase.

Consulta la Información sobre los proyectos de Firebase a fin de obtener detalles sobre los proyectos de Firebase y las prácticas recomendadas para agregar apps a los proyectos.

Si solo quieres probar un producto de Firebase, pero aún no tienes un proyecto de JavaScript, puedes descargar una de nuestras muestras de inicio rápido.

Paso 2: Instala el SDK e inicializa Firebase

En esta página, se describen las instrucciones de configuración para la API modular del SDK de Firebase JS, que usa un formato del módulo de JavaScript.

Este flujo de trabajo usa npm y requiere agrupadores de módulos o herramientas del framework de JavaScript, porque la API modular está optimizada para funcionar con agrupadores de módulos a fin de eliminar el código que no se usa (eliminación de código no utilizado) y reducir el tamaño del SDK.

  1. Instala Firebase con npm:

    npm install firebase

  2. Inicializa Firebase en tu app y crea un objeto de app 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 app 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 la app de Firebase en tu código, puedes agregar y comenzar a usar los servicios de Firebase.

    Si tu app incluye funciones dinámicas basadas en la renderización del servidor (SSR), deberás seguir algunos pasos adicionales para asegurarte de que tu configuración persista en los pases de renderización del servidor y del cliente. En la lógica del servidor, implementa la interfaz FirebaseServerApp para optimizar la administración de sesiones de tu app con service workers.

Paso 3: Accede a Firebase en tu app

Los servicios de Firebase (como Cloud Firestore, Authentication, Realtime Database, Remote Config y más) están disponibles para importarse en subpaquetes individuales.

En el siguiente ejemplo, se muestra cómo 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: Usa un agrupador de módulos (webpack/Rollup) para reducir el tamaño

El SDK web de Firebase está diseñado para funcionar con agrupadores de módulos a fin de quitar cualquier código que no se use (eliminación de código no utilizado). Te recomendamos usar este enfoque para las apps de producción. Las herramientas, como la CLI de Angular, Next.js, la CLI de Vue o Create React App, controlan automáticamente la agrupación de módulos para bibliotecas instaladas mediante npm y que se importan a tu base de código.

Consulta nuestra guía Usa agrupadores de módulos con Firebase para obtener más información.

Servicios de Firebase disponibles para la Web

Ahora que configuraste Firebase, puedes comenzar a agregar y usar cualquiera de estos servicios de Firebase disponibles en tu app web.

En los siguientes comandos, se muestra cómo importar bibliotecas de Firebase instaladas de forma local con npm. Para ver otras opciones de importación, consulta la documentación sobre bibliotecas disponibles.

Próximos pasos

Obtén información acerca de Firebase: