Angular 20 mit SSR und SSG bei Firebase Hosting deployen

In diesem Artikel zeige ich dir, wie du eine Angular 20 App mit Server Side Rendering (SSR) und Static Site Generation (SSG) bei Firebase Hosting veröffentlichst. Das ermöglicht eine schnellere Seitenladezeit, besseres SEO und eine optimale User Experience.

Voraussetzungen

Stelle sicher, dass Angular 20 installiert ist:

ng --version

Erzeuge dein Projekt:

ng new

Gib den App-Namen ein, wähle "no" bei Zoneless und "yes" bei SSR.

Wechsel in den Projektordner und richte Firebase ein:

ng add @angular/fire

• Wähle "Cloud Functions (Callable)"
• Melde dich bei deinem Google-Konto an
• Erstelle eine neue Projekt-ID

Installiere das Firebase CLI:

npm i firebase-tools -g

Initialisiere Firebase:

firebase init

• Wähle "functions" und "hosting"
• Wähle dein bestehendes Projekt
• Öffentliches Verzeichnis: public
• Single Page App: Ja
• Keine automatische Builds & Deploys

Bearbeite functions/index.js zu functions/index.mjs und ändere den "main"-Eintrag in functions/package.json:

// functions/package.json
"main": "index.mjs"

//functions/index.mjs
const { initializeApp } = require("firebase-admin/app");
const { onRequest } = require("firebase-functions/v2/https");
import * as server from "./server/server.mjs";
initializeApp();
export const ssr = onRequest({}, server.reqHandler);

Erzeuge eine functions/utils/copy-server.mjs:

import fs from "fs-extra";
const sourceDir = "./dist/<YOUR_APP_NAME>/server";
const destinationDir = "./functions/server";
async function copyFiles() {
  try {
    await fs.ensureDir(destinationDir);
    await fs.emptyDir(destinationDir);
    console.log("Destination directory cleaned.");
    await fs.copy(sourceDir, destinationDir);
    console.log("Files copied successfully");
  } catch (err) {
    console.error("Error copying files:", err);
  }
}
copyFiles();

Ergänze in package.json:

"copyServer": "node ./functions/utils/copy-server.mjs",
"build:ssr": "ng build <YOUR_APP_NAME> --configuration production",
"deploy:firebase": "npm run build:ssr && npm run copyServer && firebase deploy --only functions,hosting"

Anpassung in firebase.json:

{
  "functions": [{ "source": "functions", "codebase": "default"}],
  "hosting": {
    "public": "dist/<YOUR_APP_NAME>/browser",
    "rewrites": [{ "source": "**", "destination": "ssr" }]
  }
}

Starte den Deployment-Prozess:

npm run deploy:firebase

Ergebnis: Deine Angular 20 App ist jetzt erfolgreich bei Firebase Hosting mit SSR und SSG verfügbar und ermöglicht eine schnelle und SEO-freundliche User Experience.