Andere Frameworks mit Express.js einbinden

Mit einer zusätzlichen Konfiguration können Sie auf den grundlegenden Framework-sensitive Befehlszeilenfunktionalität um die Integrationsunterstützung auf andere Frameworks als Angular und Next.js auszuweiten.

Hinweis

Bevor Sie Ihre App in Firebase bereitstellen, sehen Sie sich die folgenden Anforderungen und Optionen an:

• Firebase-Befehlszeile 12.1.0 oder höher. Installieren Sie die Befehlszeile mit Ihrer bevorzugten Methode.
• Optional: Abrechnung für Ihr Firebase-Projekt aktiviert (erforderlich, wenn Sie SSR nutzen 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 dann den Eingabeaufforderungen:

   firebase init hosting

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

4. Wählen Sie Ihr Quellverzeichnis für das Hosting aus: könnte es sich um eine vorhandene Web-App handeln.

5. Wenn Sie dazu aufgefordert werden, wählen Sie „Express.js / benutzerdefiniert“ aus.

Vorhandenes Projekt initialisieren

Ändern Sie Ihre Hosting-Konfiguration in firebase.json so, dass eine source-Option angezeigt wird, als die Option public. 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. Das erreichen Sie mit dem npm-Build-Skript und 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 Ihr Framework kein vorkonfiguriertes Pre-Rendering unterstützt, verwenden Sie ein wie Rendertron, 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.

Schließlich speichern verschiedene Frameworks und Build-Tools ihre Artefakte in unterschiedlichen an unterschiedlichen Orten. Mit directories.serve teilen Sie der Befehlszeile mit, wo sich Ihr Build-Skript befindet Ausgabe der resultierenden Artefakte:

{
    "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 mit der Standard- Bereitstellungsbefehl:

firebase deploy

Dynamischen Inhalt bereitstellen

Damit Ihre Express-App auf Cloud Functions for Firebase bereitgestellt werden kann, muss Ihre Express-App (oder URL-Handler im Express-Stil) so exportiert wird, dass Firebase sie finden kann. nachdem Ihre Bibliothek mit NPM verpackt wurde.

Dazu muss die files-Anweisung alles enthalten, die für den Server benötigt werden und der Haupteinstiegspunkt korrekt eingerichtet ist, 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",
    ...
}

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

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

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’);
}

Bereitstellen

firebase deploy

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

Optional: In Firebase Authentication einbinden

Die auf dem Web-Framework basierenden Firebase-Bereitstellungstools halten Client mit dem Serverstatus synchron. Um auf den Authentifizierungskontext zuzugreifen, Das Express-res.locals-Objekt enthält optional ein authentifiziertes Firebase-Objekt App-Instanz (firebaseApp) und der aktuell angemeldete Nutzer (currentUser).