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.

  1. En Firebase console , haz clic en Agregar proyecto .

    • Para agregar recursos de Firebase a un proyecto de Google Cloud existente , ingrese el nombre del proyecto o selecciónelo en el menú desplegable.

    • Para crear un nuevo proyecto, ingrese el nombre del proyecto deseado. Opcionalmente, también puede editar el ID del proyecto que se muestra debajo del nombre del proyecto.

  2. Si se te solicita, revisa y acepta los términos de Firebase .

  3. Haga clic en Continuar .

  4. (Opcional) Configure Google Analytics para su proyecto, lo que le permitirá tener una experiencia óptima al utilizar cualquiera de los siguientes productos de Firebase:

    Seleccione una cuenta de Google Analytics existente o cree una cuenta nueva.

    Si crea una cuenta nueva, seleccione la ubicación de sus informes de Analytics y luego acepte la configuración de intercambio de datos y los términos de Google Analytics para su proyecto.

  5. Haz clic en Crear proyecto (o Agregar Firebase , si estás usando un proyecto de Google Cloud existente).

Firebase aprovisiona automáticamente recursos para tu proyecto de Firebase. Cuando se complete el proceso, accederás a la página de descripción general de tu proyecto de Firebase en Firebase console.

Una vez que tenga un proyecto de Firebase, puede registrar su aplicación web con ese proyecto.

  1. En el centro de la página de descripción general del proyecto de Firebase console , haz clic en el ícono web ( ) para iniciar el flujo de trabajo de configuración.

    Si ya agregó una aplicación a su proyecto de Firebase, haga clic en Agregar aplicación para mostrar las opciones de la plataforma.

  2. Ingrese el apodo de su aplicación.
    Este apodo es un identificador interno conveniente y solo es visible para usted en Firebase console.

  3. Haga clic en Registrar aplicación .

  4. Siga las instrucciones que aparecen en pantalla para agregar e inicializar el SDK de Firebase en su aplicación.

    También puede encontrar instrucciones más detalladas para agregar, inicializar y usar el SDK de Firebase en los siguientes pasos de esta página de introducción.

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: