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 Endnutzerzugriff 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-App hinzufügen können, müssen Sie ein Firebase-Projekt erstellen und Ihre App bei diesem Projekt registrieren. Wenn Sie Ihre App bei Firebase registrieren, erhalten Sie ein Firebase-Konfigurationsobjekt, mit dem Sie Ihre App mit Ihren Firebase-Projektressourcen verbinden können.

Unter Informationen zu Firebase-Projekten finden Sie weitere Informationen zu Firebase-Projekten und Best Practices für das Hinzufügen von Apps zu Projekten.

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

Schritt 2: SDK installieren und Firebase initialisieren

Auf dieser Seite wird eine Anleitung zur Einrichtung der modularen API des Firebase JS SDK beschrieben, die ein JavaScript-Modulformat verwendet.

Dieser Workflow verwendet npm und erfordert Modul-Bundler oder JavaScript-Framework-Tools, da die modulare API für die Arbeit mit Modul-Bundlern optimiert ist, um nicht verwendeten Code (Baumwackeln) zu vermeiden 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 project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    Eine Firebase-App ist ein containerähnliches Objekt, das eine gemeinsame Konfiguration speichert und die Authentifizierung für alle Firebase-Dienste teilt. Nachdem Sie ein Firebase App-Objekt in Ihrem Code initialisiert haben, können Sie Firebase-Dienste hinzufügen und verwenden.

    Wenn deine App dynamische Funktionen enthält, die auf serverseitigem Rendering (SSR) basieren, sind einige zusätzliche Schritte erforderlich, damit deine Konfiguration bei jedem Server- und Client-Rendering erhalten bleibt. Implementieren Sie in Ihrer Serverlogik die FirebaseServerApp-Schnittstelle, um die Sitzungsverwaltung mit Service Workern Ihrer Anwendung zu optimieren.

Schritt 3: In Ihrer App auf Firebase zugreifen

Firebase-Dienste wie Cloud Firestore, Authentication, Realtime Database und Remote Config können in einzelnen Unterpaketen importiert werden.

Das folgende Beispiel zeigt, 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 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: Module Bundler (Webpack/Rollup) zur Größenreduzierung verwenden

Das Firebase Web SDK ist so konzipiert, dass es mit Modul-Bundlern verwendet werden kann, um nicht verwendeten Code zu entfernen (Baumwackeln). Wir empfehlen dringend, diesen Ansatz für Produktionsanwendungen zu verwenden. Tools wie 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 wurden.

Weitere Informationen finden Sie in unserem Leitfaden Modul-Bundler mit Firebase verwenden.

Verfügbare Firebase-Dienste für das Web

Nachdem Sie die Verwendung von Firebase nun 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 die lokal mit npm installierten Firebase-Bibliotheken importieren. Alternative Importoptionen finden Sie in der Dokumentation zu verfügbaren Bibliotheken.

Nächste Schritte

Informationen zu Firebase: