Firebase zu Ihrem JavaScript-Projekt hinzufügen

In dieser Anleitung erfahren Sie, wie Sie das Firebase JavaScript SDK in Ihrer Webanwendung oder als Client für den Endnutzerzugriff 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-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.

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 Schnellstartbeispiele herunterladen.

Schritt 2: SDK installieren und Firebase initialisieren

Auf dieser Seite finden Sie eine Einrichtungsanleitung für die modulare API des Firebase JS SDK, die ein JavaScript-Modul Format verwendet.

Dieser Workflow verwendet npm und erfordert Modul-Bundler oder JavaScript-Framework Tools, da die modulare API für die Verwendung mit Modul-Bundlern optimiert ist, um ungenutzten Code zu entfernen (Tree Shaking) und die SDK-Größe zu verringern.

  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 die allgemeine Konfiguration gespeichert ist 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 enthält, die auf serverseitigem Rendering (Server-Side Rendering, SSR) basieren, müssen Sie einige zusätzliche Schritte ausführen, um sicherzustellen, dass Ihre Konfiguration bei der serverseitigen und clientseitigen Rendering-Übergabe beibehalten wird. Implementieren Sie in Ihrer Serverlogik die FirebaseServerApp Schnittstelle, um die Sitzungsverwaltung Ihrer App mit Service Workern zu optimieren.

Schritt 3: Auf Firebase in Ihrer App zugreifen

Firebase-Dienste wie Cloud Firestore, Authentication, Realtime Database, Remote Config und mehr können in einzelnen Unterpaketen 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 'firebase/<service>';

// TODO: Replace the following with your app'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 Web SDK ist für die Verwendung mit Modul-Bundlern konzipiert, um ungenutzten 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 verarbeiten das Modul-Bundling automatisch für Bibliotheken, die über npm installiert und in Ihre Codebasis importiert wurden.

Weitere Informationen finden Sie in unserer Anleitung Modul-Bundler mit Firebase verwenden.

Verfügbare Firebase-Dienste für das Web

Nachdem Sie Firebase eingerichtet haben, können Sie Ihrer Webanwendung die folgenden verfügbaren Firebase-Dienste hinzufügen und verwenden.

Die folgenden Befehle zeigen, wie Sie Firebase-Bibliotheken importieren, die lokal mit npm installiert wurden. Alternative Importoptionen finden Sie in der Dokumentation zu den verfügbaren Bibliotheken.

1 Firebase AI Logic hieß früher "Vertex AI in Firebase" und das Paket war firebase/vertexai.

Nächste Schritte

Weitere Informationen zu Firebase :