Integra otros frameworks en Express.js

Con algunos ajustes adicionales, puedes compilar sobre la funcionalidad básica de la CLI compatible con el framework para extender la compatibilidad de integración a frameworks que no sean Angular y Next.js.

Antes de comenzar

Antes de comenzar a implementar tu app de Next.js en Firebase, revisa los siguientes requisitos y opciones:

  • Versión 11.14.2 o posterior de Firebase CLI. Asegúrate de instalar la CLI con el método que prefieras.
  • Opcional: Ten la facturación habilitada en tu proyecto de Firebase (obligatoria si planeas usar SSR)

Inicializa Firebase

A fin de comenzar, inicializa Firebase para tu proyecto de framework. Usa Firebase CLI para un proyecto nuevo o modifica firebase.json en un proyecto existente.

Inicializa un proyecto nuevo

  1. En Firebase CLI, habilita la vista previa de frameworks web: 
    firebase experiments:enable webframeworks
  2. Ejecuta el comando de inicialización desde la CLI y, luego, sigue las indicaciones: 
    firebase init hosting
  3. Elige el directorio del código fuente para hosting, que podría ser una app web existente.
  4. Selecciona “Dynamic web hosting with web framework”.
  5. Selecciona Express.js / custom.

Inicializa un proyecto existente

Cambia la configuración de hosting en firebase.json para que tenga una opción source, en lugar de una opción public. Por ejemplo:

{
  "hosting": {
    "source": "./path-to-your-express-directory",
  }
}

Entrega contenido estático

Antes de implementar contenido estático, deberás configurar tu aplicación.

Configurar

A fin de saber cómo implementar tu aplicación, Firebase CLI debe poder compilarla y saber dónde ubican las herramientas los recursos destinados a Hosting. Esto se logra con la secuencia de comandos de compilación npm y la directiva de directorios CJS en package.json.

Dado el siguiente package.json:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

Firebase CLI solo llama a la secuencia de comandos de compilación, por lo que debes asegurarte de que esta sea exhaustiva.

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

Si tu framework no admite la renderización previa lista para usar, considera usar una herramienta como Rendertron. Rendertron te permitirá realizar solicitudes de Chrome sin interfaz gráfica a una instancia local de tu app para que puedas guardar el código HTML resultante a fin de que se entregue en Hosting.

Por último, los distintos frameworks y herramientas de compilación almacenan sus artefactos en diferentes lugares. Usa directories.serve para indicarle a la CLI la ubicación en la que tu secuencia de comandos de compilación está generando los artefactos, como se indica a continuación:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    …
}

Realiza la implementación

Después de configurar la app, puedes entregar contenido estático con el siguiente comando de implementación estándar:

firebase deploy

Entrega contenido dinámico

A fin de entregar tu app de Express en Cloud Functions para Firebase, asegúrate de que la app de Express (o el controlador de URL de estilo Express) se exporte de tal manera que Firebase pueda encontrarla después de que la biblioteca se haya empaquetado con npm.

A fin de lograrlo, asegúrate de que la directiva files incluya todo lo que necesita el servidor y de que el punto de entrada principal esté configurado de forma correcta en package.json:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node tools/prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    "files": ["dist", "server.js"],
    "main": "server.js",
    ...
}

Exporta la app de Express desde una función llamada app:

// server.js
export function app() {
  const server = express();
   …
   return server;
}

O, si prefieres exportar un controlador de URL de estilo Express, asígnale el nombre handle:

export function handle(req, res) {
   res.send(‘hello world’);
}

Realiza la implementación

firebase deploy

Esto implementa tu contenido estático en Firebase Hosting y permite que Firebase recurra a la app de Express alojada en Cloud Functions para Firebase.

Realiza la integración en Firebase Authentication (opcional)

Las herramientas de implementación de Firebase compatibles con framework web mantienen automáticamente sincronizados el estado del cliente y el servidor mediante cookies. Para acceder al contexto de autenticación, el objeto res.locals de Express contiene, de manera opcional, una instancia autenticada de la app de Firebase (firebaseApp) y el usuario conectado (currentUser).