Andere Frameworks mit Express.js einbinden

Mit einigen zusätzlichen Konfigurationen können Sie auf der grundlegenden frameworkbezogenen CLI-Funktionalität aufbauen und die Unterstützung für andere Frameworks als Angular und Next.js erweitern.

Statische Inhalte bereitstellen

Vor der Bereitstellung statischer Inhalte müssen Sie Ihre Anwendung konfigurieren.

Konfigurieren

Damit die Firebase CLI weiß, wie Ihre Anwendung bereitgestellt werden soll, muss sie Ihre Anwendung erstellen und wissen, wo Ihre Tools die für Hosting bestimmten Assets platzieren. Dies wird mit dem npm-Build-Skript und der CJS-Verzeichnisanweisung in package.json erreicht.

Beispiel für eine package.json-Datei:

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

Die Firebase CLI ruft nur Ihr Build-Skript auf. Sie müssen also dafür sorgen, dass Ihr Build-Skript vollständig ist.

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

Wenn Ihr Framework keine sofort einsatzbereite Unterstützung für das Vorabrendering bietet, sollten Sie ein Tool wie Rendertron verwenden. Mit Rendertron können Sie Headless-Chrome-Anfragen an eine lokale Instanz Ihrer Anwendung senden, sodass Sie das resultierende HTML speichern und in Hosting bereitstellen können.

Verschiedene Frameworks und Build-Tools speichern ihre Artefakte an unterschiedlichen Orten. Mit directories.serve können Sie der CLI mitteilen, wo Ihr Build-Skript die resultierenden Artefakte ausgibt:

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

Bereitstellen

Nachdem Sie Ihre Anwendung konfiguriert haben, können Sie statische Inhalte mit dem Standardbefehl für die Bereitstellung bereitstellen:

firebase deploy

Dynamische Inhalte bereitstellen

Wenn Sie Ihre Express-Anwendung in Cloud Functions for Firebase bereitstellen möchten, muss sie (oder der URL-Handler im Express-Stil) so exportiert werden, dass Firebase sie nach dem Packen Ihrer Bibliothek mit npm finden kann.

Dazu muss die Anweisung files alles enthalten, was für den Server erforderlich ist, und der Haupteinstiegspunkt muss in package.json korrekt eingerichtet sein:

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

Exportieren Sie Ihre Express-Anwendung aus einer Funktion mit dem Namen app:

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

Wenn Sie stattdessen einen URL-Handler im Express-Stil exportieren möchten, nennen Sie ihn handle:

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

Bereitstellen

firebase deploy

Dadurch werden Ihre statischen Inhalte in Firebase Hosting bereitgestellt und Firebase kann auf Ihre Express-Anwendung zurückgreifen, die in Cloud Functions for Firebase gehostet wird.

Optional: In Firebase Authentication einbinden

Mit den webframeworkbezogenen Firebase-Bereitstellungstools werden Client- und Serverstatus mithilfe von Cookies automatisch synchronisiert. Für den Zugriff auf den Authentifizierungskontext enthält das Express-Objekt res.locals optional eine authentifizierte Firebase App-Instanz (firebaseApp) und den aktuell angemeldeten Nutzer (currentUser).