Andere Frameworks mit Express.js einbinden

Mit einer zusätzlichen Konfiguration können Sie die grundlegenden framework-kompatiblen Befehlszeilenfunktionen nutzen, um die Integrationsunterstützung auf andere Frameworks als Angular und Next.js auszuweiten.

Hinweis

Bevor Sie mit der Bereitstellung Ihrer App in Firebase beginnen, prüfen Sie die folgenden Anforderungen und Optionen:

  • Firebase CLI-Version 12.1.0 oder höher Installieren Sie die Befehlszeile mit der gewünschten Methode.
  • Optional: Abrechnung in Ihrem Firebase-Projekt aktiviert (erforderlich, wenn Sie SSR verwenden möchten)

Firebase initialisieren

Initialisieren Sie zuerst Firebase für Ihr Framework-Projekt. Verwenden Sie die Firebase CLI für ein neues Projekt oder ändern Sie firebase.json für ein vorhandenes Projekt.

Neues Projekt initialisieren

  1. Aktivieren Sie in der Firebase-Befehlszeile die Vorschau der Web-Frameworks: 
    firebase experiments:enable webframeworks

  2. Führen Sie den Initialisierungsbefehl über die Befehlszeile aus und folgen Sie der Anleitung: 

    firebase init hosting

  3. Antworten Sie mit „Ja“ auf die Frage „Möchten Sie ein Web-Framework verwenden?“ (experimentell)“

  4. Wählen Sie das Hosting-Quellverzeichnis aus. Dies kann eine vorhandene Webanwendung sein.

  5. Wählen Sie bei Aufforderung „Express.js / benutzerdefiniert“ aus.

Vorhandenes Projekt initialisieren

Ändern Sie die Hostingkonfiguration in firebase.json, sodass die Option source statt public verwendet wird. Beispiel:

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

Statische Inhalte bereitstellen

Bevor Sie statische Inhalte bereitstellen, müssen Sie Ihre Anwendung konfigurieren.

Konfigurieren

Damit die Firebase CLI weiß, wie Ihre Anwendung bereitgestellt werden soll, muss sie sowohl Ihre App erstellen als auch wissen, wo Ihre Tools die für Hosting bestimmten Assets ablegen. Dies geschieht mit dem npm-Build-Script und der CJS-Verzeichnisanweisung in package.json.

Mit der folgenden package.json-Datei:

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

Die Firebase-Befehlszeile ruft nur Ihr Build-Script auf. Sie müssen also dafür sorgen, dass es 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 dein Framework kein standardmäßiges Pre-Rendering unterstützt, kannst du ein Tool wie Rendertron verwenden. Mit Rendertron können Sie Headless-Chrome-Anfragen an eine lokale Instanz Ihrer App senden und die resultierende HTML-Datei speichern, um sie auf Hosting bereitzustellen.

Außerdem speichern verschiedene Frameworks und Build-Tools ihre Artefakte an unterschiedlichen Orten. Verwenden Sie directories.serve, um der Befehlszeile mitzuteilen, wo Ihr Build-Script 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 App konfiguriert haben, können Sie statische Inhalte mit dem Standardbefehl für die Bereitstellung bereitstellen:

firebase deploy

Dynamische Inhalte bereitstellen

Damit Ihre Express-Anwendung unter Cloud Functions for Firebase bereitgestellt werden kann, muss sie (oder der Express-URL-Handler) so exportiert werden, dass Firebase sie finden kann, nachdem Ihre Bibliothek mit npm verpackt wurde.

Achten Sie darauf, dass die files-Richtlinie alles enthält, was für den Server erforderlich ist, und dass der Haupteingangspunkt in package.json richtig eingerichtet ist:

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

Express-App aus einer Funktion namens app exportieren:

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

Wenn Sie lieber einen Express-URL-Handler exportieren möchten, geben Sie ihm den Namen 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-App zurückgreifen, die auf Cloud Functions for Firebase gehostet wird.

Optional: Firebase Authentication einbinden

Die auf dem Web-Framework basierenden Firebase-Bereitstellungstools halten den Client- und Serverstatus mithilfe von Cookies automatisch synchron. Zum Zugriff auf den Authentifizierungskontext enthält das Express-Objekt res.locals optional eine authentifizierte Firebase App-Instanz (firebaseApp) und den aktuell angemeldeten Nutzer (currentUser).