Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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: