In dieser Anleitung erfährst du, wie du das Firebase JavaScript SDK in deiner Webanwendung oder als Client für den Endnutzerzugriff verwendest, z. B. in einer Node.js-Desktop- oder IoT-Anwendung.
Schritt 1: Firebase-Projekt erstellen und App registrieren
Bevor Sie Firebase Ihrer JavaScript-App hinzufügen können, müssen Sie ein Firebase-Projekt erstellen und Ihre App in diesem Projekt registrieren. Wenn Sie Ihre App bei Firebase registrieren, erhalten Sie ein Firebase-Konfigurationsobjekt, mit dem Sie Ihre App mit den Ressourcen Ihres Firebase-Projekts verbinden.
Unter Firebase-Projekte finden Sie weitere Informationen zu Firebase-Projekten und Best Practices zum Hinzufügen von Apps zu Projekten.
Firebase-Projekt erstellen
-
Klicken Sie in der Firebase Console auf Projekt hinzufügen.
-
Wenn Sie einem vorhandenen Google Cloud-Projekt Firebase-Ressourcen hinzufügen möchten, geben Sie den Projektnamen ein oder wählen Sie ihn aus dem Drop-down-Menü aus.
-
Geben Sie den gewünschten Projektnamen ein, um ein neues Projekt zu erstellen. Optional können Sie auch die Projekt-ID bearbeiten, die unter dem Projektnamen angezeigt wird.
-
-
Lesen Sie sich die Firebase-Nutzungsbedingungen durch und akzeptieren Sie sie.
-
Klicken Sie auf Weiter.
-
Optional: Richten Sie Google Analytics für Ihr Projekt ein, um die folgenden Firebase-Produkte optimal nutzen zu können:
Wählen Sie entweder ein vorhandenes Google Analytics-Konto aus oder erstellen Sie ein neues Konto.
Wenn Sie ein neues Konto erstellen, wählen Sie Ihren AnalyticsSpeicherort für Berichte aus und akzeptieren Sie die Datenfreigabeeinstellungen und Google Analytics-Nutzungsbedingungen für Ihr Projekt.
-
Klicken Sie auf Projekt erstellen (oder auf Firebase hinzufügen, wenn Sie ein vorhandenes Google Cloud-Projekt verwenden).
Firebase stellt automatisch Ressourcen für Ihr Firebase-Projekt bereit. Nach Abschluss des Vorgangs werden Sie zur Übersichtsseite für Ihr Firebase-Projekt in der Firebase Console weitergeleitet.
App registrieren
Nachdem Sie ein Firebase-Projekt haben, können Sie Ihre Webanwendung in diesem Projekt registrieren.
-
Klicken Sie in der Mitte der Projektübersichtsseite der Firebase Console auf das Symbol Web ( ), um den Einrichtungsworkflow zu starten.
Wenn Sie Ihrem Firebase-Projekt bereits eine App hinzugefügt haben, klicken Sie auf App hinzufügen, um die Plattformoptionen aufzurufen.
-
Geben Sie den Alias Ihrer App ein.
Dieser Alias ist eine interne, praktische Kennung und nur in der Firebase Console sichtbar. -
Klicken Sie auf App registrieren.
-
Folgen Sie der Anleitung auf dem Bildschirm, um das Firebase SDK in Ihrer App hinzuzufügen und zu initialisieren.
Eine ausführlichere Anleitung zum Hinzufügen, Initialisieren und Verwenden des Firebase SDK finden Sie in den nächsten Schritten dieser Startseite.
Wenn Sie noch kein JavaScript-Projekt haben und nur ein Firebase-Produkt ausprobieren möchten, können Sie eines unserer Beispiele für den Schnellstart herunterladen.
Schritt 2: SDK installieren und Firebase initialisieren
Auf dieser Seite wird die Einrichtung der modularen API des Firebase JS SDK beschrieben, die das Format „JavaScript-Modul“ verwendet.
Bei diesem Workflow wird npm verwendet und es sind Module Bundler oder JavaScript-Framework-Tools erforderlich, da die modulare API für die Verwendung mit Module Bundlern optimiert ist, um nicht verwendeten Code zu entfernen (Tree Shaking) und die SDK-Größe zu verringern.
Firebase mit npm installieren:
npm install firebase
Firebase in Ihrer App initialisieren und ein Firebase App-Objekt erstellen:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);
Eine Firebase-App ist ein containerähnliches Objekt, in dem eine gemeinsame Konfiguration gespeichert und die Authentifizierung für alle Firebase-Dienste freigegeben wird. Nachdem Sie ein Firebase App-Objekt in Ihrem Code initialisiert haben, können Sie Firebase-Dienste hinzufügen und verwenden.
Wenn Ihre App dynamische Funktionen auf der Grundlage des serverseitigen Renderings (SSR) enthält, müssen Sie einige zusätzliche Schritte ausführen, damit Ihre Konfiguration über Server- und Client-Rendering-Pässe hinweg erhalten bleibt. Implementieren Sie in Ihrer Serverlogik die
FirebaseServerApp
-Oberfläche, um die Sitzungsverwaltung Ihrer App mit Service Workern zu optimieren.
Schritt 3: In Ihrer App auf Firebase zugreifen
Firebase-Dienste wie Cloud Firestore, Authentication, Realtime Database und Remote Config können in einzelne Unterpakete importiert werden.
Im folgenden Beispiel wird gezeigt, wie du mit dem Cloud Firestore Lite SDK eine Datenliste abrufen kannst.
import { initializeApp } from 'firebase/app'; import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; // Follow this pattern to import other Firebase services // import { } from 'firebase/<service>'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); // Get a list of cities from your database async function getCities(db) { const citiesCol = collection(db, 'cities'); const citySnapshot = await getDocs(citiesCol); const cityList = citySnapshot.docs.map(doc => doc.data()); return cityList; }
Schritt 4: Modul-Bundler (Webpack/Rollup) zur Größenreduzierung verwenden
Das Firebase Web SDK ist für die Verwendung mit Modul-Bundlern konzipiert, um nicht verwendeten Code zu entfernen (Tree-Shaking). Wir empfehlen dringend, diesen Ansatz für Produktions-Apps zu verwenden. Tools wie die Angular CLI, Next.js, Vue CLI oder Create React App übernehmen das Modul-Bündeln für Bibliotheken, die über npm installiert und in Ihre Codebasis importiert wurden, automatisch.
Weitere Informationen finden Sie in unserem Leitfaden Modul-Bundler mit Firebase verwenden.
Verfügbare Firebase-Dienste für das Web
Nachdem Sie Firebase eingerichtet haben, können Sie einen der folgenden verfügbaren Firebase-Dienste in Ihrer Webanwendung hinzufügen und verwenden.
Die folgenden Befehle zeigen, wie Sie lokal mit npm
installierte Firebase-Bibliotheken importieren. Informationen zu alternativen Importoptionen finden Sie in der Dokumentation zu verfügbaren Bibliotheken.
Nächste Schritte
Weitere Informationen zu Firebase:
Firebase-Beispiel-Apps ansehen
Im Firebase Web Codelab können Sie praktische Erfahrungen sammeln.
Weitere Informationen zu den unterstützten Umgebungen für das Firebase JavaScript SDK
Beschleunigen Sie die Entwicklung mit zusätzlichen von Firebase gepflegten Open-Source-Bibliotheken wie AngularFire, RxFire und FirebaseUI for Web.
Einführung Ihrer App vorbereiten:
- Richten Sie in der Google Cloud Console Budgetbenachrichtigungen für Ihr Projekt ein.
- Im Firebase-Dashboard Nutzung und Abrechnung können Sie sich ein Gesamtbild der Nutzung Ihres Projekts in mehreren Firebase-Diensten machen.
- Sehen Sie sich die Checkliste für die Einführung von Firebase an.