Cómo agregar Firebase a tu proyecto de JavaScript

Requisitos previos

Antes de comenzar, necesitarás una app de JavaScript (web o Node.js) a la cual agregarle Firebase. Si todavía no tienes una app, puedes descargar una de nuestras muestras de inicio rápido. Si estás actualizando desde una versión 2.x del SDK de Firebase, consulta nuestra guía de actualización de Web/Node.js para comenzar.

Si te interesa usar Node.js en entornos privilegiados, como servidores o backends sin servidores, como Cloud Functions (y no en clientes a fin de tener acceso de usuario final, como un escritorio de Node.js o un dispositivo de IoT), deberás seguir las instrucciones para configurar el SDK de Admin.

Agrega Firebase a la app

Para agregar Firebase a tu app, necesitarás un proyecto de Firebase y un fragmento corto del código de inicialización que incluya algunos detalles sobre tu proyecto.

  1. Crea un proyecto en Firebase console.

    • Si no tienes un proyecto de Firebase existente, haz clic en Agregar proyecto. Luego, ingresa un nombre de proyecto existente de Google Cloud Platform o uno nuevo.
    • Si tienes un proyecto de Firebase existente que desees usar, selecciónalo en la consola.
  2. En Firebase console, en la página de descripción general del proyecto, haz clic en Agregar Firebase a tu aplicación web. Si tu proyecto ya tiene una app, selecciona Agregar app en la página de descripción general del proyecto.

  3. Copia y pega el fragmento del código personalizado de tu proyecto en la etiqueta <head> de tu página y antes de otras etiquetas de secuencias de comandos.

    A continuación, se muestra un ejemplo de un fragmento del código de inicialización:

Web

Haz clic en Copiar, luego pega el fragmento de código en el HTML de tu aplicación. El fragmento del código debería verse de la siguiente manera:

<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

El fragmento contiene información de inicialización para configurar el SDK de Firebase JavaScript a fin de usar Authentication, Cloud Storage, Realtime Database y Cloud Firestore. Para reducir la cantidad de código que usa tu app, incluye solo las características que necesitas. Los componentes individuales que puedes instalar son los siguientes:

  • firebase-app: El cliente principal de firebase (obligatorio)
  • firebase-auth: Firebase Authentication (opcional)
  • firebase-database: Firebase Realtime Database (opcional)
  • firebase-firestore: Cloud Firestore (opcional).
  • firebase-storage: Cloud Storage (opcional)
  • firebase-messaging: Firebase Cloud Messaging (opcional)
  • firebase-functions: Cloud Functions para Firebase (opcional).

Incluye los componentes individuales de la CDN que necesitas (incluye firebase-app en primer lugar):

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-functions.js"></script>

<!-- Comment out (or don't include) services that you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-storage.js"></script> -->

<script>
  var config = {
    // ...
  };
  firebase.initializeApp(config);
</script>

Si estás usando un empaquetador como Browserify o webpack, puedes usar require() para los componentes que usas:

// Firebase App is always required and must be first
var firebase = require("firebase/app");

// Add additional services that you want to use
require("firebase/auth");
require("firebase/database");
require("firebase/firestore");
require("firebase/messaging");
require("firebase/functions");

// Comment out (or don't require) services that you don't want to use
// require("firebase/storage");

var config = {
  // ...
};
firebase.initializeApp(config);

Node.js

El SDK de Firebase también está disponible en npm. Si todavía no tienes un archivo package.json, crea uno mediante npm init. A continuación, instala el paquete npm firebase y guárdalo en tu archivo package.json:

$ npm install firebase --save

Para usar el módulo en tu aplicación, usa la función require en cualquier archivo JavaScript:

var firebase = require("firebase");

Si estás usando ES2015, también puedes usar la función import para importar el módulo:

import firebase from "firebase";

Luego, inicia el SDK de Firebase con el fragmento de código anterior, que debería tener el siguiente aspecto:

// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

Usa servicios de Firebase

Una App de Firebase puede usar varios servicios de Firebase. Se puede acceder a cada servicio desde el espacio de nombres de firebase:

Consulta los servicios individuales para ver la documentación sobre su uso.

Ejecuta un servidor web local para el desarrollo

Si estás compilando una aplicación web, algunas partes de Firebase JavaScript SDK necesitarán que tu aplicación web esté asociada con un servidor en lugar de un sistema de archivos local. Puedes usar Firebase CLI para ejecutar un servidor local como el siguiente:

$ npm install -g firebase-tools
$ firebase init    # Generate a firebase.json (REQUIRED)
$ firebase serve   # Start development server

Aloja tu app web con Firebase Hosting

Si estás compilando una aplicación web solo con contenido estático, puedes implementarla fácilmente con Firebase Hosting.

Firebase Hosting es un hosting web estático orientado a desarrolladores para aplicaciones web de frontend modernas. Con Firebase Hosting, puedes implementar apps web que admiten SSL en tu propio dominio en una red global de entrega de contenido (CDN) con solo un comando.

Importaciones de SDK e inicialización implícita

Las apps web alojadas en Firebase Hosting se pueden beneficiar de una configuración de proyecto más simple. Pega los siguientes fragmentos de código en el HTML de la aplicación para importar el SDK de Firebase y configurarlo de forma automática para el proyecto en el que se aloja la app:

    <!-- Firebase App is always required and must be first -->
    <script src="/__/firebase/5.4.1/firebase-app.js"></script>

    <!-- Add additional services that you want to use -->
    <script src="/__/firebase/5.4.1/firebase-auth.js"></script>
    <script src="/__/firebase/5.4.1/firebase-database.js"></script>
    <script src="/__/firebase/5.4.1/firebase-messaging.js"></script>
    <script src="/__/firebase/5.4.1/firebase-functions.js"></script>

    <!-- Comment out (or don't include) services that you don't want to use -->
    <!-- <script src="/__/firebase/5.4.1/firebase-storage.js"></script> -->

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

Inicializa varias apps

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

// Initialize the default app
var defaultApp = firebase.initializeApp(defaultAppConfig);

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

// You can retrieve services via the defaultApp variable...
var defaultStorage = defaultApp.storage();
var defaultDatabase = defaultApp.database();

// ... or you can use the equivalent shorthand notation
defaultStorage = firebase.storage();
defaultDatabase = firebase.database();

En algunos casos prácticos, tendrás que crear varias apps al mismo tiempo. Por ejemplo, tal vez necesites leer datos de Realtime Database de un proyecto de Firebase y almacenar archivos en otro proyecto. O tal vez necesites autenticar una app mientras anulas la autenticación de otra. El SDK de Firebase te permite crear varias apps al mismo tiempo, cada una de las cuales tendrá su propia información de configuración.

// Initialize the default app
firebase.initializeApp(defaultAppConfig);

// Initialize another app with a different config
var otherApp = firebase.initializeApp(otherAppConfig, "other");

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

// Use the shorthand notation to retrieve the default app's services
var defaultStorage = firebase.storage();
var defaultDatabase = firebase.database();

// Use the otherApp variable to retrieve the other app's services
var otherStorage = otherApp.storage();
var otherDatabase = otherApp.database();

Pasos siguientes

Obtén información acerca de Firebase:

Agrega los servicios de Firebase a tu app:

Enviar comentarios sobre...

Si necesitas ayuda, visita nuestra página de asistencia.