Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu

Befolgen Sie diese Anleitung, um das Firebase JavaScript SDK in Ihrer Web-App 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 einfach 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 werden Einrichtungsanweisungen für die modulare 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 Zusammenarbeit mit Modul-Bundlern optimiert ist, um ungenutzten 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 allgemeine Konfigurationen 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.

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 das Cloud Firestore Lite SDK verwenden können, um eine Liste von Daten abzurufen.

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 Modul-Bundler (Webpack/Rollup) zur Größenreduzierung

Das Firebase Web SDK ist für die Zusammenarbeit mit Modul-Bundlern konzipiert, 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 „Verwenden von Modul-Bundlern mit Firebase“ .

Verfügbare Firebase-Dienste für das Web

Nachdem Sie nun 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 lokal mit npm installierte Firebase-Bibliotheken importiert werden. Informationen zu alternativen Importoptionen finden Sie in der Dokumentation zu den verfügbaren Bibliotheken .

Nächste Schritte

Erfahren Sie mehr über Firebase: