Ir a la consola

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.

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 tienes un proyecto de JavaScript, puedes descargar una de nuestras muestras de inicio rápido si solo deseas 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: Obtén tu objeto de configuración de Firebase

Cada uno de los pasos de configuración en esta guía requiere que se inicialice con un objeto de configuración de Firebase.

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

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

Paso 3: Configura tu app para usar Firebase

Puedes configurar una aplicación web o una app de Node.js para utilizar Firebase.

WEB NODE.JS

Configura una aplicación web

Utiliza cualquiera de las siguientes opciones a fin de configurar tu aplicación web de JavaScript y usar Firebase:

Opción 1: Agrega SDK específicos implícitamente desde la CDN

Puedes configurar la importación parcial del SDK de Firebase JavaScript; solo carga los productos de Firebase que necesites.

Firebase almacena cada biblioteca del SDK de Firebase JavaScript en nuestra CDN (red de distribución de contenidos) global.

Por ejemplo, para incluir solo Authentication y Realtime Database, utiliza las siguientes etiquetas script dentro de la etiqueta body para la app:

<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/5.10.1/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

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


También puedes retrasar la inclusión del SDK de Firebase hasta que se haya cargado toda la página.

Primero, 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, por ejemplo:

<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

A continuación, crea un archivo init-firebase.js y, luego, incluye la siguiente información en el archivo:

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
SDK de Firebase disponibles para las apps de JavaScript (implícitamente desde la CDN)
Producto de Firebase Referencia de la biblioteca
Firebase Core
(obligatorio)

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>
Authentication

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
Cloud Firestore

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-firestore.js"></script>
SDK de cliente de Cloud Functions para Firebase

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-functions.js"></script>
Cloud Messaging

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-messaging.js"></script>
Cloud Storage

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-storage.js"></script>
Realtime Database

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

Opción 2: Agrupa o carga de manera dinámica SDK específicos

Puedes configurar la importación parcial del SDK de Firebase JavaScript; solo carga los productos de Firebase que necesites.

Si utilizas un agrupador (como Browserify o webpack), puedes ejecutar el comando import para importar los productos individuales de Firebase que desees cuando los necesites.

  1. Instala el SDK de Firebase JavaScript:

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

      npm init
    2. Instala el paquete npm firebase y guárdalo en tu archivo package.json; para ello, ejecuta:

      npm install --save firebase
  2. Utiliza los módulos de Firebase en tu app. Por ejemplo, para cargar solo Authentication y Realtime Database, usa las siguientes declaraciones import:

    // 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/database";
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
     // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
SDK de Firebase disponibles para las apps de JavaScript (módulos import)
Producto de Firebase Referencia de la biblioteca
Firebase Core (obligatorio) import "firebase/app";
Authentication import "firebase/auth";
Cloud Firestore import "firebase/firestore";
SDK de cliente de Cloud Functions para Firebase import "firebase/functions";
Cloud Messaging import "firebase/messaging";
Cloud Storage import "firebase/storage";
Realtime Database import "firebase/database";

Opción 3: Agrega el SDK de Firebase JavaScript completo

Para cargar el SDK de Firebase JavaScript completo, usa las siguientes etiquetas script dentro de la etiqueta body para la app:

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Loads the entire Firebase JavaScript SDK -->
  <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>

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

Configura una app de Node.js

  1. Instala el SDK de Firebase JavaScript:

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

      npm init
    2. Instala el paquete npm firebase y guárdalo en tu archivo package.json; para ello, ejecuta:

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

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

      • Para incluir solo los productos de Firebase que deseas utilizar (como Authentication y Realtime Database):

        // 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/database");
        
      • Para incluir el SDK de Firebase JavaScript completo:

        var firebase = require("firebase");
    • Puedes usar ES2015 para importar módulos con el comando import:

      • Para incluir solo los productos de Firebase que deseas utilizar (como Authentication y Realtime Database):

        // 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/database";
        
      • Para incluir el SDK de Firebase JavaScript completo:

        import firebase from "firebase";
  3. Inicializa Firebase en tu app:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
     // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
SDK de Firebase disponibles para las apps de JavaScript (módulos para Node.js)
Producto de Firebase Módulo de biblioteca
Firebase Core (obligatorio) "firebase/app"
Authentication "firebase/auth"
Cloud Firestore "firebase/firestore"
SDK de cliente de Cloud Functions para Firebase "firebase/functions"
Realtime Database "firebase/database"

Paso 4: 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()
Realtime Database firebase.database()

Opciones de configuración adicionales

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 defaultDatabase = defaultProject.database();

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

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 defaultDatabase = firebase.database();

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

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.

  1. Instala Firebase CLI.

    Ejecuta el siguiente comando desde tu computadora:

    npm install -g firebase-tools
  2. Vincula el directorio local de apps con Firebase y genera un archivo firebase.json (obligatorio para Firebase Hosting).

    Ejecuta el siguiente comando desde la raíz del directorio local de apps:

    firebase init

    Durante la inicialización, se te pedirá que especifiques un directorio que contenga tus archivos estáticos públicos (el directorio raíz público). El nombre predeterminado del directorio que Firebase busca es "público". También puedes configurar el directorio público más tarde; para ello, modifica directamente el archivo firebase.json.

  3. Inicia el servidor local para el desarrollo.

    Ejecuta el siguiente comando desde la raíz del directorio local de apps:

    firebase serve

Carga SDK desde URL reservadas

Si deseas alojar tu aplicación web con Firebase Hosting, puedes configurar la app para cargar las bibliotecas de SDK de Firebase JavaScript de manera dinámica desde las URL 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 de las URL reservadas también funciona para probar tu aplicación web de manera local.

Por ejemplo, para incluir solo Authentication y Realtime Database, usa las siguientes etiquetas script dentro de la etiqueta body para la app:

<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/5.10.1/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/5.10.1/firebase-auth.js"></script>
  <script src="/__/firebase/5.10.1/firebase-database.js"></script>

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>
SDK de Firebase disponibles para las apps de JavaScript (URL reservadas)
Producto de Firebase Referencias de la biblioteca (URL reservada)
Firebase Core
(obligatorio)

<script src="/__/firebase/5.10.1/firebase-app.js"></script>
Authentication

<script src="/__/firebase/5.10.1/firebase-auth.js"></script>
Cloud Firestore

<script src="/__/firebase/5.10.1/firebase-firestore.js"></script>
SDK de cliente de Cloud Functions para Firebase

<script src="/__/firebase/5.10.1/firebase-functions.js"></script>
Cloud Messaging

<script src="/__/firebase/5.10.1/firebase-messaging.js"></script>
Cloud Storage

<script src="/__/firebase/5.10.1/firebase-storage.js"></script>
Realtime Database

<script src="/__/firebase/5.10.1/firebase-database.js"></script>
SDK de Firebase JavaScript
(SDK completo)

<script src="/__/firebase/5.10.1/firebase.js"></script>

Obtén más información sobre esta opción de configuración en la documentación de Hosting.

Próximos pasos

Obtén información acerca de Firebase:

Agrega los servicios de Firebase a tu app, como se indica a continuación: