Integra los SDK de Firebase en tu app web

Firebase App Hosting es una opción ideal para apps web dinámicas compiladas con el SDK de JavaScript Firebase y Firebase Admin SDK para Node.js. En una app web con todas las funciones, los SDKs de Firebase, como Authentication, Cloud Firestore y App Check, tienen roles importantes. En esta guía, se describen algunas estrategias clave para ayudar a optimizar los SDK de Firebase y comenzar a compilar Firebase en tu app web en Firebase App Hosting.

Cómo inicializar automáticamente los SDKs de Firebase Admin SDK y la Web

Los entornos de Google, como Firebase App Hosting, proporcionan una inicialización de apps simplificada a través de una llamada al constructor sin argumentos en el tiempo de compilación y el entorno de ejecución. Esta es una función de Firebase Admin SDK para Node.js, un SDK del servidor que desbloquea una gran área de la funcionalidad de Firebase y puede ser muy útil en tu app web, y del SDK de JavaScript Firebase.

Con initializeApp(), puedes permitir que Firebase App Hosting propague automáticamente la configuración de la app web y, al mismo tiempo, conservar la opción de control detallado sobre valores específicos si deseas anular los valores predeterminados.

Cómo inicializar sin argumentos

Para inicializar el SDK de JavaScript Firebase o Firebase Admin SDK con valores de configuración predeterminados, usa initializeApp() sin proporcionar ningún argumento:

Admin SDK

import { initializeApp } from 'firebase-admin/app';
const app = initializeApp();

SDK de JavaScript

import { initializeApp } from 'firebase/app';
const app = initializeApp();

Esta estrategia para la inicialización de Admin SDK funciona en App Hosting, así como en otros entornos de servidores de Google, incluidos Cloud Run, App Engine y Cloud Functions. En el caso del SDK de JavaScript, esta estrategia funciona en App Hosting.

Anula los valores propagados automáticamente

Puedes anular la configuración predeterminada que se inserta automáticamente. Ten en cuenta que estas opciones difieren entre el SDK de Admin SDK y el de JavaScript.

Anulación de Admin SDK

Si, de manera opcional, quieres especificar opciones de inicialización personalizadas para servicios como Realtime Database, Cloud Storage o Cloud Functions, usa la variable de entorno FIREBASE_CONFIG. Si el contenido de la variable FIREBASE_CONFIG comienza con un carácter {, se analizará como un objeto JSON. De lo contrario, el SDK asume que la cadena es la ruta de acceso de un archivo JSON que contiene las opciones.

# apphosting.yaml

env:
  - variable: FIREBASE_CONFIG
    value: '{"credential: applicationDefault()","databaseURL":"https://project-id-default-rtdb.firebaseio.com"}'

Anulación del SDK de JavaScript

Para anular los valores predeterminados de FIREBASE_WEBAPP_CONFIG que App Hosting inserta para la inicialización del SDK de JavaScript, puedes especificar valores en apphosting.yaml:

# apphosting.yaml

env:
  - variable: FIREBASE_WEBAPP_CONFIG
    value: '{"apiKey":"myApiKey","appId":"app:123","authDomain":"project-id.firebaseapp.com","databaseURL":"https://project-id-default-rtdb.firebaseio.com","messagingSenderId":"0123456789","projectId":"project-id","storageBucket":"project-id.firebasestorage.app"}'

Cómo usar la inicialización automática en otros entornos

La inicialización automática se configura con una secuencia de comandos de postinstalación de npm cuando instalas el SDK de Firebase JavaScript. La secuencia de comandos de postinstalación busca la variable de entorno FIREBASE_WEBAPP_CONFIG, que se configura automáticamente en el entorno de Cloud Build App Hosting.

Si instalas el SDK de JS fuera de Cloud Build, por ejemplo, de forma local para usarlo con el Firebase Emulator Suite, deberás configurar esta variable de entorno por tu cuenta cuando instales el SDK de JavaScript de Firebase.

Para configurar el entorno de forma manual durante la instalación, haz lo siguiente:

  1. Copia el objeto de configuración de la app web de Firebase de Firebase console.

  2. Desde una terminal, configura la variable de entorno FIREBASE_WEBAPP_CONFIG antes de ejecutar el comando npm install.

FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase

Cada vez que cambies tu proyecto de Firebase o app web, vuelve a ejecutar este comando.

Usa FirebaseServerApp para SSR

Si trabajaste con el SDK de Firebase JS o con otros SDK de cliente de Firebase en el desarrollo de tu app web, es probable que conozcas la interfaz FirebaseApp y cómo usarla para configurar instancias de apps. Para facilitar operaciones similares en el servidor, Firebase proporciona FirebaseServerApp.

FirebaseServerApp es una variante de FirebaseApp para usar en entornos de renderización del servidor (SSR). Incluye herramientas para continuar las sesiones de Firebase que abarcan la división entre la renderización del cliente (CSR) y la renderización del servidor.

Utiliza FirebaseServerApp para:

  • Ejecutar código del servidor en el contexto del usuario, a diferencia de Firebase Admin SDK, que tiene derechos de administración completos
  • Habilita el uso de App Check en entornos de SSR.
  • Continuar una sesión de Firebase Auth que se creó en el cliente

Para obtener todos los detalles sobre el uso de FirebaseServerApp para estos fines, consulta Usa Firebase en apps web dinámicas con SSR.

Habilita App Check en tu app web

Puedes usar App Check para fortalecer la seguridad de tu app web dinámica en App Hosting. Si implementas algunas de las estrategias específicas del servidor descritas en Usa Firebase en apps web dinámicas con SSR, puedes proteger tus backend de App Hosting del abuso.