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.

Create a Firebase project

In the Firebase console, click Add project, then select or enter a Project name.

If you have an existing Google Cloud Platform (GCP) project, you can select the project from the Project name dropdown menu. Otherwise, enter a new Project name.
(Optional) Edit the Project ID.

Firebase automatically assigns a unique ID to your Firebase project. Visit Understand Firebase Projects to learn about how Firebase uses the project ID.

After Firebase provisions resources for your Firebase project, you cannot change your project ID.
To use a specific identifier, you must edit your project ID during this setup step.
Follow the remaining setup steps in the Firebase console, then click Create project (or Add Firebase, if you're using an existing Google project).

Firebase automatically provisions resources for your Firebase project. When the process completes, you'll be taken to the overview page for your Firebase project in the Firebase console.

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:

Add specific Firebase SDKs implicitly from the CDN
Bundle or dynamically load specific Firebase SDKs
Add the entire Firebase JavaScript SDK

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.

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
```

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

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
```
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";
```
Note: Using the import syntax directly with Node.js is experimental, but you can convert to CommonJS format (require syntax) using compilers like Babel.

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.

Install the Firebase CLI.

Run the following command from anywhere on your computer:
```
npm install -g firebase-tools
```
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.
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.