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 app web o como cliente para el acceso de usuario final (por ejemplo, en una aplicación de Node.js para computadoras de escritorio o IoT).

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 app 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. Configura Firebase Hosting para tu app web (opcional).

    • 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 app 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

Firebase proporciona bibliotecas de JavaScript para la mayoría de los productos de Firebase, como Remote Config, FCM y muchos más. Puedes agregar a tu app cualquiera de las bibliotecas disponibles

La forma de agregar los SDK de Firebase a tu app web depende de si elegiste usar Firebase Hosting, qué herramientas utilizas (por ejemplo, un agrupador de módulos) o si quieres configurar una app de Node.js. Si necesitas más ayuda para elegir entre estas alternativas, consulta las formas de agregar los SDK web a tu app.

Si te interesa probar el nuevo SDK (versión beta) optimizado para el desarrollo modular de apps, selecciona la opción de la versión 9 (beta). Ten en cuenta que no existen obligaciones de asistencia técnica en una versión beta.

Con npm

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 firebase from "firebase/app";
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // 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);
    

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 solo productos 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/8.7.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/8.7.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.7.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>
    

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 app 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/8.7.0/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.7.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.7.0/firebase-auth.js"></script>
      <script src="/__/firebase/8.7.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>
    

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 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 realizar la implementación 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 apps 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_ID",
          "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_ID
    3. Puedes ver tu sitio en cualquiera de estas direcciones:

      • SITE_ID.web.app
      • SITE_ID.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 él como se muestra.

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 (v8 y versiones anteriores) Web Node.js
Analytics firebase.analytics()
Authentication firebase.auth()
Cloud Firestore firebase.firestore()
SDK 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

Próximos pasos

Obtén información acerca de Firebase:

Agrega los servicios de Firebase a tu app: