Andere Frameworks mit Express.js einbinden

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

Statische Inhalte bereitstellen

Vor dem Bereitstellen 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 das Hosting bestimmten Assets platzieren.Hosting 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, damit Sie das resultierende HTML speichern und auf Hosting bereitstellen können.

Außerdem speichern verschiedene Frameworks und Build-Tools 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 Ihre Express-Anwendung (oder der URL-Handler im Express-Stil) so exportiert werden, dass Firebase sie finden kann nachdem Ihre Bibliothek mit npm gepackt wurde.

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

Die webframeworkbezogenen Firebase-Bereitstellungstools synchronisieren den Client- und Serverstatus automatisch mithilfe von Cookies. 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).