Firebase zu Ihrem JavaScript-Projekt hinzufügen

Folgen Sie dieser Anleitung, um das Firebase JavaScript SDK in Ihrer Webanwendung oder als Client für den Zugriff durch Endnutzer zu verwenden, z. B. in einer Node.js-Desktop- oder IoT-Anwendung.

Schritt 1: Firebase-Projekt erstellen und App registrieren

Bevor Sie Firebase zu Ihrer JavaScript-Anwendung hinzufügen können, müssen Sie ein Firebase-Projekt erstellen und Ihre Anwendung in diesem Projekt registrieren. Wenn Sie Ihre App bei Firebase registrieren, erhalten Sie ein Firebase-Konfigurationsobjekt, mit dem Sie Ihre App mit den Firebase-Projektressourcen verbinden.

Weitere Informationen zu Firebase-Projekten und Best Practices zum Hinzufügen von Apps zu Projekten finden Sie unter Firebase-Projekte.

Wenn Sie noch kein JavaScript-Projekt haben und nur ein Firebase-Produkt ausprobieren möchten, können Sie eines unserer Beispiele für den Schnelleinstieg herunterladen.

Schritt 2: SDK installieren und Firebase initialisieren

Auf dieser Seite finden Sie eine Einrichtungsanleitung für die modulare API für das Firebase JavaScript SDK, das ein JavaScript-Modulformat 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 reduzieren.

  1. Installieren Sie Firebase mit npm:

    npm install firebase

  2. Initialisieren Sie Firebase in Ihrer App und erstellen Sie ein Firebase-App-Objekt:

    import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    Eine Firebase-App ist ein containerähnliches Objekt, in dem allgemeine Konfigurationen gespeichert und Authentifizierungen für Firebase-Dienste freigegeben werden. 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 enthält, die auf serverseitigem Rendering (SSR) basieren, müssen Sie einige zusätzliche Schritte ausführen, damit Ihre Konfiguration sowohl beim Server-Rendering als auch beim Client-Rendering erhalten bleibt. Implementieren Sie in Ihrer Serverlogik die Schnittstelle FirebaseServerApp, 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, Remote Config und weitere können in einzelne Unterpakete importiert werden.

Im folgenden Beispiel wird gezeigt, wie Sie mit dem Cloud Firestore Lite SDK eine Liste von Daten abrufen können.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { }< from &>#39;firebase/service';

// TODO: Replace the following with your app&#39;s Firebase 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 JavaScript 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 Produktionsanwendungen zu verwenden. Tools wie die Angular CLI, Next.js, Vue CLI oder Create React App übernehmen automatisch die Modulbündelung für Bibliotheken, die über npm installiert und in Ihre Codebasis importiert werden.

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 die folgenden verfügbaren Firebase-Dienste in Ihrer Web-App 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.

1 Firebase AI Logic hieß früher „Vertex AI in Firebase“ mit dem Paket firebase/vertexai.

2 Firebase SQL Connect hieß früher „Firebase Data Connect“.

Nächste Schritte

Weitere Informationen zu Firebase: