THE3RDTRAINER/Homepage

Stellt Full-Stack-Webanwendungen (Next.js, Angular) mit serverseitigem Rendering (SSR) über Firebase App Hosting bereit und verwaltet sie. Verwenden Sie es beim Bereitstellen von Next.js/Angular-Apps, Konfigurieren von apphosting.yaml oder firebase.json apphosting-Blöcken, Verwalten von Geheimnissen, Einrichten von GitHub CI/CD oder Konfigurieren von Blaze-Abrechnungsanforderungen. Nicht für klassisches statisches Webhosting, Auth, Firestore, Crashlytics oder Xcode verwenden.

Was ist Homepage?

Dieses Skill befähigt den KI-Agenten, moderne Full-Stack-Webanwendungen (Next.js, Angular usw.) mit Firebase App Hosting bereitzustellen und zu verwalten. Es ist besonders nützlich für Entwickler, die serverseitiges Rendering (SSR) oder inkrementelle statische Regeneration (ISR) benötigen, und bietet einen optimierten Workflow im Vergleich zu herkömmlichem Firebase Hosting. Das Skill unterstützt sowohl die Bereitstellung aus dem Quellcode über die Firebase-CLI als auch automatisierte CI/CD-Workflows über GitHub-Verbindungen. Es behandelt die Konfiguration von firebase.json und apphosting.yaml, die Verwaltung von Geheimnissen und die lokale Emulation zum Testen. Wichtig: Das Firebase-Projekt muss den Blaze-Tarif verwenden. Es ist nicht für statische Websites oder andere Firebase-Dienste wie Auth, Firestore oder Crashlytics geeignet.

Funktioniert mit~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/THE3RDTRAINER/Homepage/tree/HEAD/.agents/skills/firebase-app-hosting-basics

Dokumentation

Grundlagen des App Hosting

Beschreibung

Dieses Skill befähigt den Agenten, moderne Full-Stack-Webanwendungen (Next.js, Angular usw.) mit Firebase App Hosting bereitzustellen und zu verwalten.

Wichtig: Um App Hosting nutzen zu können, muss Ihr Firebase-Projekt den Blaze-Tarif verwenden. Leiten Sie den Benutzer zu https://console.firebase.google.com/project/_/overview?purchaseBillingPlan=metered, um sein Tarifmodell zu aktualisieren.

Hosting vs App Hosting

Wählen Sie Firebase Hosting, wenn:

Sie eine statische Seite bereitstellen (HTML/CSS/JS).
Sie eine einfache SPA bereitstellen (React, Vue usw. ohne SSR).
Sie die volle Kontrolle über den Build- und Bereitstellungsprozess über die CLI haben möchten.

Wählen Sie Firebase App Hosting, wenn:

Sie ein unterstütztes Full-Stack-Framework wie Next.js oder Angular verwenden.
Sie serverseitiges Rendering (SSR) oder ISR benötigen.
Sie einen automatischen "git push to deploy"-Workflow mit null Konfiguration wünschen.

Bereitstellung in App Hosting

Bereitstellung aus dem Quellcode

Dies ist der empfohlene Ablauf für die meisten Benutzer.

Konfigurieren Sie firebase.json mit einem apphosting-Block.

{
  "apphosting": {
    "backendId": "my-app-id",
    "rootDir": "/",
    "ignore": [
      "node_modules",
      ".git",
      "firebase-debug.log",
      "firebase-debug.*.log",
      "functions"
    ]
  }
}

Erstellen oder bearbeiten Sie apphosting.yaml – siehe Konfiguration für weitere Informationen.
Wenn die App sicheren Zugriff auf sensible Schlüssel benötigt, verwenden Sie Befehle wie npx -y firebase-tools@latest apphosting:secrets, um Geheimnisse festzulegen und den Zugriff zu gewähren.
Führen Sie npx -y firebase-tools@latest deploy aus, wenn Sie bereit für die Bereitstellung sind.

Automatisierte Bereitstellung über GitHub (CI/CD)

Alternativ können Sie ein Backend einrichten, das mit einem GitHub-Repository verbunden ist, um automatisierte Bereitstellungen per "git push" zu ermöglichen. Dies wird nur für fortgeschrittenere Benutzer empfohlen und ist nicht erforderlich, um App Hosting zu nutzen. Siehe CLI-Befehle für weitere Informationen zur Einrichtung mit CLI-Befehlen.

Emulation

Siehe Emulation für weitere Informationen zum lokalen Testen Ihrer App mit der Firebase Local Emulator Suite.