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

Agrega Firebase al proyecto de JavaScript

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

Requisitos previos

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 1: Crea un proyecto de Firebase

Antes de que puedas agregar Firebase a tu app de JavaScript, debes crear un proyecto de Firebase y conectarlo a la app.

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

Paso 2: Registra tu app con Firebase

Cuando tengas un proyecto de Firebase, podrás agregarle tu aplicación web.

Consulta Información sobre los proyectos de Firebase a fin de obtener más detalles sobre las prácticas recomendadas y las consideraciones para agregar apps a un proyecto de Firebase.

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

    Si ya agregaste una app a tu proyecto de Firebase, haz clic en Agregar app para que se muestren las opciones de plataforma.

  2. Ingresa el sobrenombre de tu app.
    Este sobrenombre es un identificador interno y conveniente, y solo tú puedes verlo en Firebase console.

  3. (Opcional) Configura Firebase Hosting para tu aplicación web.

    • Puedes configurar Firebase Hosting ahora o más adelante. También puedes vincular tu aplicación web de Firebase a un sitio de Hosting en cualquier momento en la configuración de tu proyecto.

    • Si eliges configurar Hosting ahora, selecciona un sitio de la lista desplegable para vincularlo a tu aplicación web de Firebase.

      • Esta lista muestra el sitio de Hosting predeterminado de tu proyecto y cualquier otro sitio que hayas configurado en él.

      • Los sitios que ya hayas vinculado a una aplicación web de Firebase no estarán disponibles para vincular otra vez. Cada sitio de Hosting puede vincularse a una sola aplicación web de Firebase.

  4. Haz clic en Registrar app.

Paso 3: Agrega los SDK de Firebase y, luego, inicializa Firebase

Puedes agregar cualquiera de los productos de Firebase admitidos a tu app.

La forma de agregar los SDK de Firebase a tu app depende de si elegiste usar Firebase Hosting, qué herramientas estás utilizando (por ejemplo, un agrupador) o si estás configurando una app de Node.js.

Desde las URL de Hosting

Cuando usas Firebase Hosting, puedes configurar tu app para cargar las bibliotecas del SDK de Firebase JavaScript de manera dinámica desde las URL reservadas. Obtén más información sobre cómo agregar los SDK mediante las URL de Hosting reservadas.

Con esta opción de configuración, después de que realices la implementación en Firebase, la app extrae automáticamente el objeto de configuración de Firebase del proyecto de Firebase en el que realizaste la implementación. Puedes implementar la misma base de código en varios proyectos de Firebase, pero no tienes que realizar un seguimiento de la configuración de Firebase que utilizas para firebase.initializeApp().

Esta opción de configuración también funciona para probar tu aplicación web localmente.

  1. Para incluir solo productos específicos de Firebase (por ejemplo, Analytics, Authentication o Cloud Firestore), agrega las siguientes secuencias de comandos al final de tu etiqueta <body>, pero antes de usar cualquier servicio de Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/7.23.0/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/7.23.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/7.23.0/firebase-auth.js"></script>
      <script src="/__/firebase/7.23.0/firebase-firestore.js"></script>
    </body>
    


  2. Inicializa Firebase en tu app de la siguiente manera (no es necesario que incluyas el objeto de configuración de Firebase cuando usas las URL de Hosting reservadas):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    </body>
    

Desde la CDN

Puedes configurar la importación parcial del SDK de Firebase JavaScript y cargar solo los productos de Firebase que necesitas. Firebase almacena cada biblioteca del SDK de Firebase JavaScript en nuestra CDN (red de distribución de contenidos) global.

  1. Para incluir soloproductos específicos de Firebase (por ejemplo, Authentication y Cloud Firestore), agrega las siguientes secuencias de comandos al final de tu etiqueta <body>, pero antes de usar cualquier servicio de Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script>
    </body>
    


  2. Inicializa Firebase en tu app:

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <script>
        // TODO: Replace the following with your app's Firebase project configuration
        // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

Usa agrupadores de módulos

Puedes configurar la importación parcial del SDK de Firebase JavaScript y cargar solo los productos de Firebase que necesitas. Si utilizas un agrupador (como Browserify o webpack), puedes usar import para importar productos individuales de Firebase cuando los necesites.

  1. Instala el SDK de Firebase JavaScript:

    1. Si aún no tienes un archivo package.json, ejecuta el siguiente comando para crear uno desde la raíz de tu proyecto de JavaScript:

      npm init

    2. Instala el paquete npm de firebase y guárdalo en el archivo package.json. Para ello, ejecuta el siguiente comando:

      npm install --save firebase

  2. Para incluir solo productos específicos de Firebase (como Authentication y Cloud Firestore), usa una instrucción import con los módulos de Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // If you enabled Analytics in your project, add the Firebase SDK for Analytics
    import "firebase/analytics";
    
    // Add the Firebase products that you want to use
    import "firebase/auth";
    import "firebase/firestore";
    
  3. Inicializa Firebase en tu app:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Apps de Node.js

  1. Instala el SDK de Firebase JavaScript:

    1. Si aún no tienes un archivo package.json, ejecuta el siguiente comando para crear uno desde la raíz de tu proyecto de JavaScript:

      npm init
    2. Instala el paquete npm de firebase y guárdalo en el archivo package.json. Para ello, ejecuta el siguiente comando:

      npm install --save firebase
  2. Utiliza una de las siguientes opciones para usar el módulo de Firebase en tu app:

    • Puedes usar el comando require para solicitar módulos de cualquier archivo de JavaScript

      Para incluir solo productos específicos de Firebase (como Authentication y Cloud Firestore), usa el siguiente comando:

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      var firebase = require("firebase/app");
      
      // Add the Firebase products that you want to use
      require("firebase/auth");
      require("firebase/firestore");
      


    • Puedes usar ES2015 para importar módulos con el comando import

      Para incluir solo productos específicos de Firebase (como Authentication y Cloud Firestore), usa el siguiente comando:

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      import * as firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. Inicializa Firebase en tu app:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Obtén información sobre el objeto de configuración de Firebase

Para inicializar Firebase en tu app, debes proporcionar la configuración del proyecto de Firebase de tu app. Puedes obtener tu objeto de configuración de Firebase en cualquier momento.

  • Si utilizas las URL de Hosting reservadas, la configuración de Firebase se extrae automáticamente de tu proyecto de Firebase, por lo que no hace falta que proporciones explícitamente el objeto de configuración en el código.

  • No recomendamos que edites manualmente tu objeto de configuración, en especial, las siguientes “opciones de Firebase”: apiKey, projectId y appID. Si inicializas tu app con valores no válidos o faltantes para estas “opciones de Firebase” obligatorias, los usuarios de tu app podrían experimentar problemas graves.

  • Si habilitaste Google Analytics en tu proyecto de Firebase, el objeto de configuración contiene el campo measurementId. Obtén más información sobre este campo en la página de introducción de Analytics.

El siguiente es un formato de objeto de configuración con todos los servicios habilitados (estos valores se propagan automáticamente):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Este es un objeto de configuración con valores de ejemplo:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

Paso 4: Instala la CLI y, luego, implementa en Firebase Hosting (Opcional)

Si vinculaste tu aplicación web de Firebase con un sitio de Firebase Hosting, puedes implementar el contenido y la configuración de tu sitio ahora (en la configuración de tu aplicación web) o en cualquier momento posterior.

Para implementar en Firebase, debes usar Firebase CLI, una herramienta de línea de comandos.

  1. Consulta la documentación de Firebase CLI para obtener información sobre cómo instalar la CLI o actualizarla a su versión más reciente.

  2. Inicializa tu proyecto de Firebase. Ejecuta el siguiente comando desde la raíz del directorio local de apps:

    firebase init

  3. Implementa tu configuración de hosting y contenido en Firebase Hosting.

    Sitio de Hosting predeterminado

    De forma predeterminada, cada proyecto de Firebase tiene subdominios gratuitos en los dominios web.app y firebaseapp.com (project-id.web.app y project-id.firebaseapp.com).

    1. Realiza la implementación en tu sitio. Ejecuta el siguiente comando en el directorio raíz de tu app:

      firebase deploy
    2. Puedes ver tu sitio en cualquiera de los sitios predeterminados:

      • project-id.web.app
      • project-id.firebaseapp.com

    Sitio de Hosting no predeterminado

    Los proyectos de Firebase son compatibles con varios sitios (estos se consideran sitios no predeterminados). Puedes agregar sitios adicionales a tu proyecto durante el flujo de trabajo de configuración de aplicaciones web o desde la página Hosting de la consola.

    1. Agrega tu sitio a tu archivo firebase.json (que se creó durante firebase init).

      Ten en cuenta que, en esta configuración de firebase.json, se da por sentado que tienes repositorios separados para cada sitio.

      {
        "hosting": {
          "site": "site-name>",
          "public": "public",
      
          // ...
        }
      }
      
    2. Realiza la implementación en tu sitio. Ejecuta el siguiente comando en el directorio raíz de tu app:

      firebase deploy --only hosting:site-name
    3. Puedes ver tu sitio en cualquiera de estas direcciones:

      • site-name.web.app
      • site-name.firebaseapp.com

Paso 5: Accede a Firebase en tu app

El SDK de Firebase JavaScript admite los siguientes productos de Firebase. Cada producto es opcional y se puede acceder a este desde el espacio de nombres firebase.

Obtén más información sobre los métodos disponibles en la documentación de referencia de Firebase JavaScript.

Producto de Firebase Espacio de nombres Web Node.js
Analytics firebase.analytics()
Authentication firebase.auth()
Cloud Firestore firebase.firestore()
SDK de cliente de Cloud Functions para Firebase firebase.functions()
Cloud Messaging firebase.messaging()
Cloud Storage firebase.storage()
Performance Monitoring (versión beta) firebase.performance()
Realtime Database firebase.database()
Remote Config (versión beta) firebase.remoteConfig()

Bibliotecas disponibles

Opciones de configuración adicionales

Retrasa la carga de los SDK de Firebase (desde CDN)

Puedes retrasar la inclusión de los SDK de Firebase hasta que se haya cargado toda la página.

  1. Agrega una marca defer a cada etiqueta script de los SDK de Firebase y, luego, aplaza la inicialización de Firebase con una segunda secuencia de comandos, como en el siguiente ejemplo:

    <script defer src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Crea un archivo init-firebase.js y, luego, incluye lo siguiente en el archivo:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Utiliza varios proyectos de Firebase en una sola app

En la mayoría de los casos, solo debes inicializar Firebase en una sola app predeterminada. Puedes acceder a Firebase desde esa app de dos maneras que son equivalentes:

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

A veces, sin embargo, necesitas acceder a varios proyectos de Firebase al mismo tiempo. Por ejemplo, tal vez necesites leer datos de la base de datos de un proyecto de Firebase, pero almacenar archivos en un proyecto de Firebase diferente. O tal vez necesites autenticar un proyecto mientras anulas la autenticación de un segundo proyecto.

El SDK de Firebase JavaScript te permite inicializar y usar varios proyectos de Firebase en una sola app al mismo tiempo, y cada proyecto utiliza su propia información de configuración de Firebase.

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

Ejecuta un servidor web local para el desarrollo

Si compilas una aplicación web, algunas partes del SDK de Firebase JavaScript necesitarán que tu aplicación web esté asociada con un servidor en lugar de un sistema de archivo local. Puedes utilizar Firebase CLI para ejecutar un servidor local.

Si ya configuraste Firebase Hosting para tu app, es posible que ya hayas completado varios de los siguientes pasos.

Para entregar tu app web, usarás Firebase CLI, una herramienta de línea de comandos.

  1. Consulta la documentación de Firebase CLI para obtener información sobre cómo instalar la CLI o actualizarla a su versión más reciente.

  2. Inicializa tu proyecto de Firebase. Ejecuta el siguiente comando desde la raíz del directorio local de apps:

    firebase init

  3. Inicia el servidor local para el desarrollo. Ejecuta el siguiente comando desde la raíz del directorio local de apps:

    firebase serve

Pasos siguientes

Obtén información acerca de Firebase:

Agrega los servicios de Firebase a tu app: