Ir a la consola

Agrega Firebase a tu 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).

Antes de comenzar

  • Instala tu editor o IDE preferido.

  • Abre tu proyecto de JavaScript (web o Node.js).

  • Accede a Firebase con tu Cuenta de Google.

Si aún no tiene un proyecto de JavaScript, puedes descargar una de nuestras muestras de inicio rápido para probar Firebase.

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

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 información sobre prácticas recomendadas y consideraciones para agregar apps a un proyecto de Firebase.

  1. En la página de descripción general del proyecto en Firebase console, haz clic en el ícono de Web (code) 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.

    El 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, 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="/__/firebase/6.2.0/firebase-app.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/6.2.0/firebase-auth.js"></script>
      <script src="/__/firebase/6.2.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 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/6.2.0/firebase-app.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/6.2.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
        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, crea uno con el siguiente comando, que debe ejecutarse desde la raíz de tu proyecto de JavaScript:

      npm init

    2. Ejecuta el siguiente comando para instalar el paquete npm de firebase y guardarlo en tu archivo package.json:

      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";
    
    // 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
    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, crea uno con el siguiente comando, que debe ejecutarse desde la raíz de tu proyecto de JavaScript:

      npm init
    2. Ejecuta el siguiente comando para instalar el paquete npm de firebase y guardarlo en tu archivo package.json:

      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
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Objeto de configuración de Firebase

Para inicializar Firebase en tu app, debes proporcionar la configuración del proyecto de Firebase de tu app.

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

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",
};

Puedes obtener tu objeto de configuración de Firebase en cualquier momento.

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

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.

  1. Para implementar en Firebase, debes usar Firebase CLI, una herramienta de línea de comandos. Instala la CLI o actualízala a la versión más reciente.

    Ejecuta el siguiente comando npm desde cualquier ubicación de tu computadora:

    npm install -g firebase-tools
  2. Accede a Google. Ejecuta el siguiente comando:

    firebase login

    Este comando conecta tu máquina local a Firebase y te otorga acceso a tus proyectos de Firebase.

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

    firebase init

    Este comando de inicialización hace lo siguiente:

    • Vincula el directorio local de tu app con Firebase.
    • Genera un archivo firebase.json (que es necesario para Firebase Hosting).
    • Te solicita que especifiques un directorio raíz público que contenga tus archivos estáticos públicos (HTML, CSS, JS, etc.).

      En la configuración predeterminada, Firebase busca un directorio que se llame "public". Si lo deseas, puedes especificar un nombre de directorio público más tarde. Para ello, tendrás que modificar directamente tu archivo firebase.json.

  4. 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 el 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
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()

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/6.2.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Crea un archivo init-firebase.js y, luego, incluye la siguiente información en su contenido:

    // 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 la 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.

  1. Instala o actualiza Firebase CLI. Ejecuta el siguiente comando npm desde cualquier ubicación de tu computadora:

    npm install -g firebase-tools
  2. Accede a Google. Ejecuta el siguiente comando:

    firebase login

    Este comando conecta tu máquina local a Firebase y te otorga acceso a tus proyectos de Firebase.

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

    firebase init

    Este comando de inicialización hace lo siguiente:

    • Vincula el directorio local de tu app con Firebase.
    • Genera un archivo firebase.json (que es necesario para Firebase Hosting).
    • Te solicita que especifiques un directorio raíz público que contenga tus archivos estáticos públicos (HTML, CSS, JS, etc.).

      En la configuración predeterminada, Firebase busca un directorio que se llame "public". Si lo deseas, puedes especificar un nombre de directorio público más tarde. Para ello, tendrás que modificar directamente tu archivo firebase.json.

  4. 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, como se indica a continuación: