Integrieren Sie andere Frameworks mit Express.js

Mit etwas zusätzlicher Konfiguration können Sie auf der grundlegenden Framework-fähigen CLI-Funktionalität aufbauen, um die Integrationsunterstützung auf andere Frameworks als Angular und Next.js zu erweitern.

Bevor Sie beginnen

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

Firebase initialisieren

Initialisieren Sie zunächst 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.

Initialisieren Sie ein neues Projekt

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

  2. Führen Sie den Initialisierungsbefehl über die CLI aus und befolgen Sie dann die Anweisungen:

    firebase init hosting

  3. Beantworten Sie die Frage „Möchten Sie ein Webframework verwenden? (experimentell)“ mit Ja.

  4. Wählen Sie Ihr Hosting-Quellverzeichnis; Dies könnte eine vorhandene Web-App sein.

  5. Wenn Sie dazu aufgefordert werden, wählen Sie Express.js/custom

Initialisieren Sie ein vorhandenes Projekt

Ändern Sie Ihre Hosting-Konfiguration in firebase.json so, dass eine source statt einer public Option vorhanden ist. Zum Beispiel:

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

Stellen Sie statische Inhalte bereit

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

Konfigurieren

Um zu wissen, wie Sie Ihre Anwendung bereitstellen, muss die Firebase-CLI sowohl in der Lage sein, Ihre App zu erstellen als auch zu wissen, wo Ihre Tools die für das Hosting bestimmten Assets platzieren. Dies wird mit dem npm-Build-Skript und der CJS-Verzeichnisdirektive in package.json erreicht.

Angesichts der folgenden package.json:

{
    "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, daher müssen Sie sicherstellen, 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 das Pre-Rendering nicht sofort unterstützt, sollten Sie die Verwendung eines Tools wie Rendertron in Betracht ziehen. Mit Rendertron können Sie Headless-Chrome-Anfragen an eine lokale Instanz Ihrer App stellen, sodass Sie den resultierenden HTML-Code speichern können, um ihn beim Hosting bereitzustellen.

Schließlich speichern verschiedene Frameworks und Build-Tools ihre Artefakte an verschiedenen Orten. Verwenden Sie directories.serve , um der CLI mitzuteilen, 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"
    },
    …
}

Einsetzen

Nachdem Sie Ihre App konfiguriert haben, können Sie statische Inhalte mit dem Standardbereitstellungsbefehl bereitstellen:

firebase deploy

Dynamische Inhalte bereitstellen

Um Ihre Express-App in Cloud Functions für Firebase bereitzustellen, stellen Sie sicher, dass Ihre Express-App (oder Ihr Express-URL-Handler) so exportiert wird, dass Firebase sie finden kann, nachdem Ihre Bibliothek mit NPM gepackt wurde.

Um dies zu erreichen, stellen Sie sicher, dass Ihre files alles enthält, was für den Server benötigt wird, und dass Ihr Haupteinstiegspunkt in package.json korrekt 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",
    ...
}

Exportieren Sie Ihre Express-App aus einer Funktion namens app :

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

Oder wenn Sie lieber einen URL-Handler im Express-Stil exportieren möchten, nennen Sie ihn handle :

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

Einsetzen

firebase deploy

Dadurch werden Ihre statischen Inhalte auf Firebase Hosting bereitgestellt und Firebase kann auf Ihre Express-App zurückgreifen, die auf Cloud Functions für Firebase gehostet wird.

Optional: Integration mit Firebase-Authentifizierung

Das Web-Framework-fähige Firebase-Bereitstellungstool hält den Client- und Serverstatus mithilfe von Cookies automatisch synchron. Um auf den Authentifizierungskontext zuzugreifen, enthält das Express- res.locals Objekt optional eine authentifizierte Firebase-App-Instanz ( firebaseApp ) und den aktuell angemeldeten Benutzer ( currentUser ).