Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

Firebase zu Ihrem JavaScript-Projekt hinzufügen

Folgen Sie dieser 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.

Voraussetzungen

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

Schritt 1 : Erstellen Sie ein Firebase-Projekt

Bevor Sie Ihrer JavaScript-App Firebase hinzufügen können, müssen Sie ein Firebase-Projekt erstellen, um eine Verbindung zu Ihrer App herzustellen.

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

Schritt 2 : Registrieren Sie Ihre App bei Firebase

Nachdem Sie ein Firebase-Projekt erstellt haben, können Sie ihm Ihre Web-App hinzufügen.

Besuchen Sie Firebase-Projekte verstehen , um mehr über Best Practices und Überlegungen zum Hinzufügen von Apps zu einem Firebase-Projekt zu erfahren.

  1. Im Zentrum der Projektübersichtsseite der Firebase - Konsole , klicken Sie auf das Web - Symbol ( ) , um den Setup - Workflow zu starten.

    Wenn Sie Ihrem Firebase-Projekt bereits eine App hinzugefügt haben, klicken Sie auf App hinzufügen, um die Plattformoptionen anzuzeigen.

  2. Geben Sie den Spitznamen Ihrer App ein.
    Dieser Spitzname ist eine interne, praktische Kennung und ist nur für Sie in der Firebase-Konsole sichtbar.

  3. (Optional) Richten Sie Firebase Hosting für Ihre Web-App ein.

    • Sie können Firebase Hosting jetzt oder später einrichten. Sie können Ihre Firebase Web App auch jederzeit in Ihren Projekteinstellungen mit einer Hosting-Site verknüpfen.

    • Wenn Sie Hosting jetzt einrichten möchten, wählen Sie eine Site aus der Dropdown-Liste aus, um sie mit Ihrer Firebase-Web-App zu verknüpfen.

      • In dieser Liste werden die standardmäßige Hosting-Site Ihres Projekts und alle anderen Sites angezeigt, die Sie in Ihrem Projekt eingerichtet haben.

      • Websites, die Sie bereits mit einer Firebase-Web-App verknüpft haben, stehen für weitere Verknüpfungen nicht zur Verfügung. Jede Hosting-Site kann nur mit einer einzigen Firebase-Web-App verknüpft werden.

  4. Klicken Sie auf App registrieren .

Schritt 3 : Firebase SDKs hinzufügen und Firebase initialisieren

Firebase bietet JavaScript-Bibliotheken für die meisten Firebase-Produkte, einschließlich Remote Config, FCM und mehr. Sie können Ihrer App jede der verfügbaren Bibliotheken hinzufügen.

Wie Sie Ihrer Web-App Firebase SDKs hinzufügen, hängt davon ab, ob Sie Firebase Hosting für Ihre App verwenden, welche Tools Sie mit Ihrer App verwenden (z. B. einen Modulbundler) oder ob Sie eine Node.js konfigurieren App. Weitere Hilfe bei der Auswahl zwischen diesen Alternativen finden Sie unter Möglichkeiten zum Hinzufügen der Web-SDKs zu Ihrer App .

Wenn Sie daran interessiert sind, das neue Beta SDK, das für die modulare App-Entwicklung optimiert ist, auszuprobieren, wählen Sie die Option für Version 9 (Beta). Beachten Sie, dass in einer Betaversion keine Verpflichtungen für den technischen Support bestehen.

Mit npm

Sie können den teilweisen Import des Firebase JavaScript SDK konfigurieren und nur die Firebase-Produkte laden, die Sie benötigen. Wenn Sie einen Bundler (wie Browserify oder Webpack) verwenden, können Sie bei Bedarf einzelne Firebase-Produkte import .

  1. Installieren Sie das Firebase JavaScript SDK:

    1. Wenn Sie noch keine package.json Datei haben, erstellen Sie eine, indem Sie den folgenden Befehl im Stammverzeichnis Ihres JavaScript-Projekts package.json :

      npm init

    2. Installieren Sie das firebase npm-Paket und speichern Sie es in Ihrer package.json Datei, indem Sie package.json :

      npm install --save firebase

  2. Um nur bestimmte Firebase-Produkte (wie Authentication und Cloud Firestore) einzuschließen, import Firebase-Module:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // If you enabled Analytics in your project, add the Firebase SDK for Analytics
    import "firebase/analytics";
    
    // Add the Firebase products that you want to use
    import "firebase/auth";
    import "firebase/firestore";
    
  3. Initialisieren Sie Firebase in Ihrer App:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Aus dem CDN

Sie können den teilweisen Import des Firebase JavaScript SDK konfigurieren und nur die Firebase-Produkte laden, die Sie benötigen. Firebase speichert jede Bibliothek des Firebase JavaScript SDK in unserem globalen CDN (Content Delivery Network).

  1. Um nur bestimmte Firebase-Produkte (z. B. Authentication und Cloud Firestore) einzuschließen, fügen Sie die folgenden Skripts am Ende Ihres <body> -Tags hinzu, jedoch bevor Sie Firebase-Dienste verwenden:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script>
    </body>
    


  2. Initialisieren Sie Firebase in Ihrer App:

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <script>
        // TODO: Replace the following with your app's Firebase project configuration
        // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

Von Hosting-URLs

Wenn Sie Firebase Hosting verwenden, können Sie Ihre App so konfigurieren, dass die Firebase JavaScript SDK-Bibliotheken dynamisch von reservierten URLs geladen werden. Erfahren Sie mehr über das Hinzufügen von SDKs über reservierte Hosting-URLs .

Bei dieser Einrichtungsoption ruft Ihre App nach der Bereitstellung in Firebase automatisch das Firebase-Konfigurationsobjekt aus dem Firebase-Projekt ab, in dem Sie bereitgestellt haben. Sie können dieselbe Codebasis in mehreren Firebase-Projekten bereitstellen, müssen jedoch die Firebase-Konfiguration, die Sie für firebase.initializeApp() verwenden, nicht firebase.initializeApp() .

Diese Setup-Option funktioniert auch zum lokalen Testen Ihrer Web-App .

  1. Um nur bestimmte Firebase-Produkte (z. B. Analytics, Authentication oder Cloud Firestore) einzuschließen, fügen Sie die folgenden Skripts am Ende Ihres <body> -Tags hinzu, jedoch bevor Sie Firebase-Dienste verwenden:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.6.8/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.6.8/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.6.8/firebase-auth.js"></script>
      <script src="/__/firebase/8.6.8/firebase-firestore.js"></script>
    </body>
    


  2. Initialisieren Sie Firebase in Ihrer App (Sie müssen Ihr Firebase-Konfigurationsobjekt nicht einschließen, wenn Sie reservierte Hosting-URLs verwenden):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    </body>
    

Node.js-Apps

  1. Installieren Sie das Firebase JavaScript SDK:

    1. Wenn Sie noch keine package.json Datei haben, erstellen Sie eine, indem Sie den folgenden Befehl im Stammverzeichnis Ihres JavaScript-Projekts package.json :

      npm init
    2. Installieren Sie das firebase npm-Paket und speichern Sie es in Ihrer package.json Datei, indem Sie package.json :

      npm install --save firebase
  2. Verwenden Sie eine der folgenden Optionen, um das Firebase-Modul in Ihrer App zu verwenden:

    • Sie können require Module von jeder JavaScript - Datei

      So schließen Sie nur bestimmte Firebase-Produkte ein (wie Authentication und Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      var firebase = require("firebase/app");
      
      // Add the Firebase products that you want to use
      require("firebase/auth");
      require("firebase/firestore");
      


    • Sie können ES2015 verwenden, import Module zu import

      So schließen Sie nur bestimmte Firebase-Produkte ein (wie Authentication und Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      import firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. Initialisieren Sie Firebase in Ihrer App:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Weitere Informationen zum Firebase-Konfigurationsobjekt

Um Firebase in Ihrer App zu initialisieren, müssen Sie die Firebase-Projektkonfiguration Ihrer App bereitstellen. Sie können Ihr Firebase-Konfigurationsobjekt jederzeit abrufen .

  • Wenn Sie reservierte Hosting-URLs verwenden , wird Ihre Firebase-Konfiguration automatisch aus Ihrem Firebase-Projekt abgerufen, sodass Sie Ihr Konfigurationsobjekt nicht explizit in Ihrem Code angeben müssen.

  • Wir empfehlen nicht manuell Config - Objekt bearbeiten, vor allem die folgenden erforderlichen „Firebase - Optionen“: apiKey , projectId und appID . Wenn Sie Ihre App mit ungültigen oder fehlenden Werten für diese erforderlichen "Firebase-Optionen" initialisieren, können bei Nutzern Ihrer App schwerwiegende Probleme auftreten.

  • Wenn Sie Google Analytics in Ihrem Firebase-Projekt aktiviert haben, enthält Ihr Konfigurationsobjekt das Feld measurementId . Weitere Informationen zu diesem Feld finden Sie auf der Seite Analytics-Erste Schritte .

Hier ist das Format eines Konfigurationsobjekts mit allen aktivierten Diensten (diese Werte werden automatisch ausgefüllt):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Hier ist ein Konfigurationsobjekt mit Beispielwerten :

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

Schritt 4 : (Optional) CLI installieren und auf Firebase Hosting bereitstellen

Wenn Sie Ihre Firebase-Web-App mit einer Firebase-Hosting-Site verknüpft haben, können Sie den Inhalt und die Konfiguration Ihrer Site jetzt (beim Einrichten Ihrer Web-App) oder zu einem späteren Zeitpunkt bereitstellen.

Für die Bereitstellung in Firebase verwenden Sie die Firebase-CLI, ein Befehlszeilentool.

  1. In der Firebase-CLI-Dokumentation erfahren Sie, wie Sie die CLI installieren oder auf die neueste Version aktualisieren .

  2. Initialisieren Sie Ihr Firebase-Projekt. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen App-Verzeichnisses aus:

    firebase init

  3. Stellen Sie Ihre Inhalte und Hosting-Konfiguration auf Firebase Hosting bereit.

    Standard-Hosting-Site

    Standardmäßig hat jedes Projekt Firebase kostenlose Subdomains auf der web.app und firebaseapp.com Domänen ( PROJECT_ID .web.app und PROJECT_ID .firebaseapp.com ).

    1. Auf Ihrer Website bereitstellen. Führen Sie den folgenden Befehl aus dem Stammverzeichnis Ihrer App aus:

      firebase deploy
    2. Zeigen Sie Ihre Site auf einer Ihrer Standard-Sites an:

      • PROJECT_ID .web.app
      • PROJECT_ID .firebaseapp.com

    Nicht standardmäßige Hosting-Site

    Firebase-Projekte unterstützen mehrere Sites (diese gelten als Ihre nicht standardmäßigen Sites ). Sie können Ihrem Projekt entweder während des Web-App-Setup-Workflows der Konsole oder über die Hosting-Seite der Konsole zusätzliche Sites hinzufügen.

    1. Fügen Sie Ihre Site zu Ihrer Datei firebase.json (die während firebase init ).

      Beachten Sie, dass diese firebase.json Konfiguration davon ausgeht, dass Sie für jede Ihrer Sites über separate Repositorys verfügen.

      {
        "hosting": {
          "site": "SITE_ID",
          "public": "public",
      
          // ...
        }
      }
      
    2. Auf Ihrer Website bereitstellen. Führen Sie den folgenden Befehl aus dem Stammverzeichnis Ihrer App aus:

      firebase deploy --only hosting:SITE_ID
    3. Rufen Sie Ihre Website entweder auf:

      • SITE_ID .web.app
      • SITE_ID .firebaseapp.com

Schritt 5 : Greifen Sie in Ihrer App auf Firebase zu

Das Firebase JavaScript SDK unterstützt die folgenden Firebase-Produkte. Jedes Produkt ist optional und kann wie abgebildet aufgerufen werden.

Weitere Informationen zu den verfügbaren Methoden finden Sie in der Firebase-JavaScript-Referenzdokumentation .

Firebase-Produkt Namensraum (v8 und niedriger) Netz Node.js
Analytik firebase.analytics()
Authentifizierung firebase.auth()
Cloud Firestore firebase.firestore()
Cloud Functions for Firebase Client SDK firebase.functions()
Cloud-Messaging firebase.messaging()
Cloud-Speicher firebase.storage()
Leistungsüberwachung ( Betaversion ) firebase.performance()
Echtzeit-Datenbank firebase.database()
Remote-Konfiguration ( Betaversion ) firebase.remoteConfig()

Verfügbare Bibliotheken

Nächste Schritte

Weitere Informationen zu Firebase:

Fügen Sie Ihrer App Firebase-Dienste hinzu: