Andere Frameworks mit Express.js einbinden

Mit einigen zusätzlichen Konfigurationen können Sie die grundlegende framework-fähige CLI-Funktionalität 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, sollten Sie sich die folgenden Anforderungen und Optionen ansehen:

• Firebase CLI-Version 12.1.0 oder höher. Installieren Sie die CLI mit der gewünschten Methode.
• Optional: Abrechnung für Ihr 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 CLI die Vorschau für Web-Frameworks:

   firebase experiments:enable webframeworks

2. Führen Sie den Initialisierungsbefehl über die CLI aus und folgen Sie dann 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 Quellverzeichnis für das Hosting aus. Das kann eine vorhandene Web-App sein.

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

Vorhandenes Projekt initialisieren

Ändern Sie die Hosting-Konfiguration in firebase.json so, dass sie die Option source anstelle der Option public enthält. 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 Ihre App erstellen können und wissen, wo die Assets platziert werden, die für Hosting bestimmt sind. Dies wird mit dem npm-Build-Skript und der CJS-Verzeichnisanweisung in package.json erreicht.

Angenommen, Sie haben die folgende 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-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 das Vorrendern nicht standardmäßig unterstützt, sollten Sie ein Tool wie Rendertron verwenden. Mit Rendertron können Sie Headless-Chrome-Anfragen an eine lokale Instanz Ihrer App senden, sodass Sie das resultierende HTML speichern und auf Hosting bereitstellen können.

Schließlich speichern verschiedene Frameworks und Build-Tools ihre Artefakte an unterschiedlichen 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"
    },
    …
}

Bereitstellen

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

firebase deploy

Dynamische Inhalte bereitstellen

Damit Ihre Express-App unter Cloud Functions for Firebase bereitgestellt werden kann, muss Ihre Express-App (oder der URL-Handler im Express-Stil) so exportiert werden, dass Firebase sie nach dem Packen Ihrer Bibliothek mit npm finden kann.

Achten Sie dazu darauf, dass Ihre files-Anweisung alles enthält, was für den Server erforderlich ist, 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 mit dem Namen app:

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

Wenn Sie lieber einen Express-ähnlichen URL-Handler 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 Webframework-kompatiblen Firebase-Bereitstellungstools sorgen automatisch dafür, dass Client- und Serverstatus mithilfe von Cookies synchronisiert werden. 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).