Add Firebase to your JavaScript project

Follow this guide to use the Firebase JavaScript SDK in your web app or as a client for end-user access, for example, in a Node.js desktop or IoT application.

Before you begin

  • Install your preferred editor or IDE.

  • Open your JavaScript project (web or Node.js).

  • Sign into Firebase using your Google account.

If you don't already have a JavaScript project, you can download one of our quickstart samples if you just want to try out Firebase.

Step 1: Create a Firebase project

Before you can add Firebase to your JavaScript app, you need to create a Firebase project to connect to your app.

Visit Understand Firebase Projects to learn more about Firebase projects and best practices for adding apps to projects.

Step 2: Obtain your Firebase config object

Each of the configuration steps in this guide require that you initialize with a Firebase configuration object.

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",
};

At any time, you can obtain your Firebase config object.

Step 3: Configure your app to use Firebase

You can configure a web app or a Node.js app to use Firebase.

WEB NODE.JS

Configure a web app

Use any of the following options to configure your JavaScript web app to use Firebase:

Option 1: Add specific SDKs implicitly from the CDN

You can configure partial import of the Firebase JavaScript SDK — only load the Firebase products that you need.

Firebase stores each library of the Firebase JavaScript SDK on our global CDN (content delivery network).

For example, to include only Authentication and Realtime Database, use the following script tags within the body tag for your app:

<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/5.10.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-database.js"></script>

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
<body>


You can also delay the inclusion of the Firebase SDK until the entire page has loaded.

First, add a defer flag to each script tag for the Firebase SDKs, then defer the initialization of Firebase using a second script, for example:

<script defer src="https://www.gstatic.com/firebasejs/5.10.0/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/5.10.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/5.10.0/firebase-database.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

Next, create an init-firebase.js file, then include the following in the file:

// TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
Available Firebase SDKs for JavaScript apps (implicitly from the CDN)
Firebase product Library reference
Firebase core
(required)
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-app.js"></script>
Authentication
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-auth.js"></script>
Cloud Firestore
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-functions.js"></script>
Cloud Messaging
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-messaging.js"></script>
Cloud Storage
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-storage.js"></script>
Realtime Database
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-database.js"></script>

Option 2: Bundle or dynamically load specific SDKs

You can configure partial import of the Firebase JavaScript SDK — only load the Firebase products that you need.

If you're using a bundler (like Browserify or webpack), you can import the individual Firebase products that you want to use when you need them.

  1. Install the Firebase JavaScript SDK:

    1. If you don't already have a package.json file, create one by running the following command from the root of your JavaScript project:

      npm init
    2. Install the firebase npm package and save it to your package.json file by running:

      npm install --save firebase
  2. Use Firebase modules in your app. For example, to load only Authentication and Realtime Database, use the following import statements:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // Add the Firebase products that you want to use
    import "firebase/auth";
    import "firebase/database";
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
     // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
Available Firebase SDKs for JavaScript apps (import modules)
Firebase product Library reference
Firebase core (required) import "firebase/app";
Authentication import "firebase/auth";
Cloud Firestore import "firebase/firestore";
Cloud Functions for Firebase Client SDK import "firebase/functions";
Cloud Messaging import "firebase/messaging";
Cloud Storage import "firebase/storage";
Realtime Database import "firebase/database";

Option 3: Add the entire Firebase JavaScript SDK

To load the entire Firebase JavaScript SDK, use the following script tags within the body tag for your app:

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Loads the entire Firebase JavaScript SDK -->
  <script src="https://www.gstatic.com/firebasejs/5.10.0/firebase.js"></script>

  <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
  </script>
</body>

Configure a Node.js app

  1. Install the Firebase JavaScript SDK:

    1. If you don't already have a package.json file, create one by running the following command from the root of your JavaScript project:

      npm init
    2. Install the firebase npm package and save it to your package.json file by running:

      npm install --save firebase
  2. Use the Firebase module in your app. Use one of the following options:

    • You can require modules from any JavaScript file:

      • To include only the Firebase products that you want to use (like Authentication and Realtime Database):

        // 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/database");
        
      • To include the entire Firebase JavaScript SDK:

        var firebase = require("firebase");
    • You can use ES2015 to import modules:

      • To include only the Firebase products that you want to use (like Authentication and Realtime Database):

        // Firebase App (the core Firebase SDK) is always required and
        // must be listed before other Firebase SDKs
        import * as firebase from "firebase/app";
        
        // Add the Firebase services that you want to use
        import "firebase/auth";
        import "firebase/database";
        
      • To include the entire Firebase JavaScript SDK:

        import firebase from "firebase";
  3. Initialize Firebase in your app:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
     // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
Available Firebase SDKs for JavaScript apps (modules for Node.js)
Firebase product Library module
Firebase core (required) "firebase/app"
Authentication "firebase/auth"
Cloud Firestore "firebase/firestore"
Cloud Functions for Firebase Client SDK "firebase/functions"
Realtime Database "firebase/database"

Step 4: Access Firebase in your app

The Firebase JavaScript SDK supports the following Firebase products. Each product is optional and can be accessed from the firebase namespace.

Learn about the available methods in the Firebase JavaScript reference documentation.

Firebase product Namespace Web Node.js
Authentication firebase.auth()
Cloud Firestore firebase.firestore()
Cloud Functions for Firebase Client SDK firebase.functions()
Cloud Messaging firebase.messaging()
Cloud Storage firebase.storage()
Realtime Database firebase.database()

Additional setup options

Use multiple Firebase projects in a single app

In most cases, you only have to initialize Firebase in a single, default app. You can access Firebase from that app in two equivalent ways:

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultDatabase = defaultProject.database();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultDatabase = firebase.database();

Sometimes, though, you need to access multiple Firebase projects at the same time. For example, you might want to read data from the database of one Firebase project but store files in a different Firebase project. Or you might want to authenticate one project while keeping a second project unauthenticated.

The Firebase JavaScript SDK allows you to initialize and use multiple Firebase projects in a single app at the same time, with each project using its own Firebase configuration information.

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultDatabase = firebase.database();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherDatabase = otherProject.database();

Run a local web server for development

If you're building a web app, some parts of the Firebase JavaScript SDK require that you serve your web app from a server rather than from the local filesystem. You can use the Firebase CLI to run a local server.

  1. Install the Firebase CLI.

    Run the following command from anywhere on your computer:

    npm install -g firebase-tools
  2. Link your local app directory with Firebase and generate a firebase.json file (required for Firebase Hosting).

    Run the following command from the root of your local app directory:

    firebase init

    During initialization, you're prompted to specify a directory that contains your public static files (your public root directory). The default name for the directory that Firebase looks for is "public". You can also set the public directory later by directly modifying your firebase.json file.

  3. Start the local server for development.

    Run the following command from the root of your local app directory:

    firebase serve

Load SDKs from reserved URLs

If you're hosting your web app with Firebase Hosting, you can configure your app to load the Firebase JavaScript SDK libraries dynamically from reserved URLs.

With this setup option, after you deploy to Firebase, your app automatically pulls the Firebase configuration object from the Firebase project to which you've deployed. You can deploy the same codebase to multiple Firebase projects, but you don't have to track the Firebase configuration that you're using for firebase.initializeApp().

This reserved URLs setup option also works for testing your web app locally.

For example, to include only Authentication and Realtime Database, use the following script tags within the body tag for your app:

<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/5.10.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/5.10.0/firebase-auth.js"></script>
  <script src="/__/firebase/5.10.0/firebase-database.js"></script>

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>
Available Firebase SDKs for JavaScript apps (reserved URLS)
Firebase product Library reference (reserved URL)
Firebase core
(required)
<script src="/__/firebase/5.10.0/firebase-app.js"></script>
Authentication
<script src="/__/firebase/5.10.0/firebase-auth.js"></script>
Cloud Firestore
<script src="/__/firebase/5.10.0/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK
<script src="/__/firebase/5.10.0/firebase-functions.js"></script>
Cloud Messaging
<script src="/__/firebase/5.10.0/firebase-messaging.js"></script>
Cloud Storage
<script src="/__/firebase/5.10.0/firebase-storage.js"></script>
Realtime Database
<script src="/__/firebase/5.10.0/firebase-database.js"></script>
Firebase JavaScript SDK
(entire SDK)
<script src="/__/firebase/5.10.0/firebase.js"></script>

Learn more about this setup option in the Hosting documentation.

Next steps

Learn about Firebase:

Add Firebase services to your app, like:

Оставить отзыв о...

Текущей странице
Нужна помощь? Обратитесь в службу поддержки.