Integre otros marcos con Express.js

Con alguna configuración adicional, puede aprovechar la funcionalidad CLI básica compatible con el marco para ampliar el soporte de integración a marcos distintos de Angular y Next.js.

Antes de que empieces

Antes de comenzar a implementar tu aplicación en Firebase, revisa los siguientes requisitos y opciones:

  • Firebase CLI versión 12.1.0 o posterior. Asegúrese de instalar la CLI utilizando su método preferido.
  • Opcional: Facturación habilitada en tu proyecto de Firebase (obligatorio si planeas usar SSR)

Inicializar base de fuego

Para comenzar, inicializa Firebase para tu proyecto marco. Utilice Firebase CLI para un proyecto nuevo o modifique firebase.json para un proyecto existente.

Inicializar un nuevo proyecto

  1. En Firebase CLI, habilite la vista previa de los marcos web:
    firebase experiments:enable webframeworks

  2. Ejecute el comando de inicialización desde la CLI y luego siga las indicaciones:

    firebase init hosting

  3. Responda sí a "¿Quiere utilizar un marco web? (experimental)"

  4. Elija su directorio de origen de alojamiento; Esta podría ser una aplicación web existente.

  5. Si se le solicita, elija Express.js/custom

Inicializar un proyecto existente

Cambie su configuración de alojamiento en firebase.json para tener una opción source , en lugar de una opción public . Por ejemplo:

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

Servir contenido estático

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

Configurar

Para saber cómo implementar su aplicación, Firebase CLI debe poder crear su aplicación y saber dónde sus herramientas colocan los activos destinados al hosting. Esto se logra con el script de compilación npm y la directiva de directorios CJS en package.json .

Dado el siguiente paquete.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 su script de compilación, por lo que deberá asegurarse de que su script de compilación sea exhaustivo.

{
    "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 su marco no admite el renderizado previo listo para usar, considere usar una herramienta como Rendertron . Rendertron le permitirá realizar solicitudes de Chrome sin cabeza en una instancia local de su aplicación, para que pueda guardar el HTML resultante y publicarlo en Hosting.

Finalmente, diferentes marcos y herramientas de construcción almacenan sus artefactos en diferentes lugares. Utilice directories.serve para indicarle a la CLI dónde su script de compilación genera los artefactos resultantes:

{
    "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"
    },
    …
}

Desplegar

Después de configurar su aplicación, puede ofrecer contenido estático con el comando de implementación estándar:

firebase deploy

Ofrecer contenido dinámico

Para ofrecer su aplicación Express en Cloud Functions para Firebase, asegúrese de que su aplicación Express (o controlador de URL de estilo Express) se exporte de tal manera que Firebase pueda encontrarla después de que su biblioteca haya sido empaquetada con npm.

Para lograr esto, asegúrese de que su directiva files incluya todo lo necesario para el servidor y que su punto de entrada principal esté configurado correctamente 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",
    ...
}

Exporte su aplicación express desde una función llamada app :

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

O si prefiere exportar un controlador de URL de estilo rápido, asígnele el nombre handle :

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

Desplegar

firebase deploy

Esto implementa su contenido estático en Firebase Hosting y permite que Firebase recurra a su aplicación Express alojada en Cloud Functions para Firebase.

Opcional: integrar con Firebase Authentication

Las herramientas de implementación de Firebase compatibles con el marco web mantendrán sincronizados automáticamente el estado del cliente y del servidor mediante cookies. Para acceder al contexto de autenticación, el objeto Express res.locals contiene opcionalmente una instancia autenticada de la aplicación Firebase ( firebaseApp ) y el usuario actualmente registrado ( currentUser ).