Integra los SDK de Firebase en tu app web

Firebase App Hosting es una opción natural para las apps web dinámicas compiladas con el Firebase JavaScript SDK y Firebase Admin SDK para Node.js. En una app web con todas las funciones , los SDK Firebasecomo Authentication, Cloud Firestorey 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 integrar Firebase en tu app web en Firebase App Hosting.

Inicializa automáticamente Firebase Admin SDK y los SDK web

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

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

Inicializa sin argumentos

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

Admin SDK

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

Para el Admin SDK, esta estrategia de inicialización funciona en App Hosting así como en otros entornos de servidor de Google, incluidas las funciones de Cloud Run, App Engine y Cloud Run.

SDK de JavaScript

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

Para el SDK de JavaScript, esta estrategia de inicialización 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 Admin SDK y el SDK 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 {, se analizará como un objeto JSON. De lo contrario, el SDK supone 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 FIREBASE_WEBAPP_CONFIG predeterminados 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"}'

Usa la inicialización automática en otros entornos

La inicialización automática se configura con una secuencia de comandos npm postinstall script cuando instalas el SDK de Firebase JavaScript. La secuencia de comandos postinstall 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, deberás configurar esta variable de entorno cuando instales el SDK de Firebase JavaScript.

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

  1. Copia el objeto de configuración de tu app web de Firebase desde la consola Firebase.

  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 tu app web, vuelve a ejecutar este comando. Es posible que también debas borrar las memorias caché intermedias (como .next/cache).

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
  • Habilitar el uso de App Check en entornos de SSR
  • Continuar una sesión de Firebase Auth que se creó en el cliente

Para obtener detalles completos 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 que se describen en Usa Firebase en apps web dinámicas con SSR, puedes proteger tus App Hosting backends contra el abuso.