Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu

Befolgen Sie diese Anleitung, um das Firebase JavaScript SDK in Ihrer Webanwendung oder als Client für den Endbenutzerzugriff zu verwenden, beispielsweise in einer Node.js-Desktop- oder IoT-Anwendung.

Schritt 1 : Erstellen Sie ein Firebase-Projekt und registrieren Sie Ihre App

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.

Besuchen Sie Firebase-Projekte verstehen , um mehr über Firebase-Projekte und Best Practices für das Hinzufügen von Apps zu Projekten zu erfahren.

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

Schritt 2 : Installieren Sie das SDK und initialisieren Sie Firebase

Auf dieser Seite wird die Einrichtungsanleitung für Version 9 des Firebase JS SDK beschrieben, das ein JavaScript-Modulformat verwendet.

Dieser Workflow verwendet npm und erfordert Modul-Bundler oder JavaScript-Framework-Tools, da das v9-SDK für die Arbeit mit Modul-Bundlern optimiert ist, um nicht verwendeten Code (Tree-Shaking) zu eliminieren 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 gemeinsame Konfigurationen speichert und die Authentifizierung für alle Firebase-Dienste freigibt. Nachdem Sie ein Firebase-App-Objekt in Ihrem Code initialisiert haben, können Sie Firebase-Dienste hinzufügen und verwenden.

Schritt 3 : Greifen Sie in Ihrer App auf Firebase zu

Firebase-Dienste (wie Cloud Firestore, Authentifizierung, Echtzeitdatenbank, Remote-Konfiguration und mehr) können in einzelne Unterpakete importiert werden.

Das folgende Beispiel zeigt, wie Sie mit dem Cloud Firestore Lite SDK eine Datenliste 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 : Verwenden Sie einen Modulbündelr (Webpack/Rollup) zur Größenreduzierung

Das Firebase Web SDK wurde entwickelt, um mit Modul-Bundlern zusammenzuarbeiten, um ungenutzten Code zu entfernen (Tree-Shaking). Wir empfehlen dringend, diesen Ansatz für Produktions-Apps 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 werden.

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 eingerichtet haben, können Sie damit beginnen, einen der folgenden verfügbaren Firebase-Dienste in Ihrer Web-App hinzuzufügen und zu verwenden.

Die folgenden Befehle zeigen, wie Sie mit npm lokal installierte Firebase-Bibliotheken importieren. Informationen zu alternativen Importoptionen finden Sie in der Dokumentation zu den verfügbaren Bibliotheken .

Nächste Schritte

Erfahren Sie mehr über Firebase: