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.

Prerequisites

Install your preferred editor or IDE.
Sign into Firebase using your Google account.

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

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 project, you can select the project from the dropdown menu to add Firebase resources to that project.
(Optional) If you are creating a new project, you can 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.
Click Continue.

(Optional) Set up Google Analytics for your project, which enables you to have an optimal experience using any of the following Firebase products:

When prompted, select to use an existing Google Analytics account or to create a new account.
If you choose to create a new account, select your Analytics reporting location, then accept the data sharing settings and Google Analytics terms for your project.

Click Create project (or Add Firebase, if you're using an existing Google Cloud 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: Register your app with Firebase

After you have a Firebase project, you can add your web app to it.

Visit Understand Firebase Projects to learn more about best practices and considerations for adding apps to a Firebase project.

In the center of the Firebase console's project overview page, click the Web icon () to launch the setup workflow.

If you've already added an app to your Firebase project, click Add app to display the platform options.
Enter your app's nickname.
This nickname is an internal, convenience identifier and is only visible to you in the Firebase console.
(Optional) Set up Firebase Hosting for your web app.
- You can set up Firebase Hosting now or later. You can also link your Firebase Web App to a Hosting site at any time in your Project settings.
- If you choose to set up Hosting up now, select a site from the dropdown list to link to your Firebase Web App.
  - This list displays your project's default Hosting site and any other sites that you've set up in your project.
  - Any site that you've already linked to a Firebase Web App is unavailable for additional linking. Each Hosting site can only be linked to a single Firebase Web App.
Note: Firebase Hosting is not required for you to use Firebase products with your web app.
Click Register app.

Step 3: Add Firebase SDKs and initialize Firebase

Firebase provides JavaScript libraries for most Firebase products, including Remote Config, FCM, and more. You can add any of the available libraries to your app.

How you add Firebase SDKs to your Web app depends on whether you've chosen to use Firebase Hosting for your app, what tooling you're using with your app (like a module bundler), or if you're configuring a Node.js app. For more help choosing between these alternatives, see Ways to add the Web SDKs to your app.

If you're interested in trying out the new Beta SDK optimized for modular app development, select the option for version 9 (Beta). Keep in mind that there are no technical support obligations in a beta release.

With npm

You can configure partial import of the Firebase JavaScript SDK and only load the Firebase products that you need. If you're using a bundler (like Browserify or webpack), you can import individual Firebase products 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
```

To include only specific Firebase products (like Authentication and Cloud Firestore), import Firebase modules:

// 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";

Initialize Firebase in your 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);

From the CDN

You can configure partial import of the Firebase JavaScript SDK and only load the Firebase products that you need. Firebase stores each library of the Firebase JavaScript SDK on our global CDN (content delivery network).

To include only specific Firebase products (for example, Authentication and Cloud Firestore), add the following scripts to the bottom of your <body> tag, but before you use any Firebase services:

<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.8.0/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.8.0/firebase-analytics.js"></script>

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

Include the entire Firebase JavaScript SDK, rather than individual SDKs (not recommended for production apps)

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

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

Initialize Firebase in your 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>

From Hosting URLs

When you use Firebase Hosting, you can configure your app to load the Firebase JavaScript SDK libraries dynamically from reserved URLs. Learn more about adding SDKs via reserved Hosting 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 setup option also works for testing your web app locally.

To include only specific Firebase products (for example, Analytics, Authentication, or Cloud Firestore), add the following scripts to the bottom of your <body> tag, but before you use any Firebase services:

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

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="/__/firebase/8.8.0/firebase-analytics.js"></script>

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

Include the entire Firebase JavaScript SDK, rather than individual SDKs (not recommended for production apps)

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

    <!-- Add the entire Firebase JavaScript SDK -->
    <script src="/__/firebase/8.8.0/firebase.js"></script>
  <body>

Initialize Firebase in your app (no need to include your Firebase config object when using reserved Hosting URLs):

<body>
  <!-- Previously loaded Firebase SDKs -->

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

Node.js apps

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 one of the following options to use the Firebase module in your app:
- You can require modules from any JavaScript file
  
  To include only specific Firebase products (like Authentication and 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");
```
  Include the entire Firebase JavaScript SDK, rather than individual SDKs (not recommended for production apps)
  
  Loading the entire SDK is not efficient for production web apps.
  Use this option for development purposes only.
```
var firebase = require("firebase");
```
- You can use ES2015 to import modules
  
  To include only specific Firebase products (like Authentication and 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";
```
  Include the entire Firebase JavaScript SDK, rather than individual SDKs (not recommended for production apps)
  
  Loading the entire SDK is not efficient for production web apps.
  Use this option for development purposes only.
```
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
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Learn about the Firebase config object

To initialize Firebase in your app, you need to provide your app's Firebase project configuration. You can obtain your Firebase config object at any time.

If you use reserved Hosting URLs, your Firebase config is automatically pulled from your Firebase project, so you don't need to explicitly provide your config object in your code.
We do not recommend manually editing your config object, especially the following required "Firebase options": apiKey, projectId, and appID. If you initialize your app with invalid or missing values for these required "Firebase options", users of your app may experience serious issues.
If you enabled Google Analytics in your Firebase project, your config object contains the field measurementId. Learn more about this field in the Analytics getting started page.

Here's the format of a config object with all services enabled (these values are automatically populated):

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

Here's a config object with example values:

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

Step 4: (Optional) Install CLI and deploy to Firebase Hosting

If you linked your Firebase Web App with a Firebase Hosting site, you can deploy your site's content and configuration now (when setting up your Web App) or anytime later.

To deploy to Firebase, you'll use the Firebase CLI, a command-line tool.

Visit the Firebase CLI documentation to learn how to install the CLI or update to its latest version.
Initialize your Firebase project. Run the following command from the root of your local app directory:
```
firebase init
```
What does this initialization command do?
- Links your local app directory with Firebase
- Generates a firebase.json file (a required file for Firebase Hosting)
- Prompts you to specify a public root directory which contains your public static files (HTML, CSS, JS, etc.)
  
  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.
Deploy your content and hosting configuration to Firebase Hosting.
Default Hosting site
By default, every Firebase project has free subdomains on the web.app and firebaseapp.com domains (PROJECT_ID.web.app and PROJECT_ID.firebaseapp.com).
1. Deploy to your site. Run the following command from your app's root directory:
```
firebase deploy
```
2. View your site at either of your default sites:
  - PROJECT_ID.web.app
  - PROJECT_ID.firebaseapp.com
Non-default Hosting site
Firebase projects support multiple sites (these are considered your non-default sites). You can add additional sites to your project either during the console's Web App setup workflow or from the console's Hosting page.

The quickstart instructions provided below are for initial development only. For production apps, follow the best practices for setting up deployments for your additional sites.
1. Add your site to your firebase.json file (which was created during firebase init).
  
  Note that this firebase.json configuration assumes that you have separate repositories for each of your sites.
```
{
  "hosting": {
    "site": "SITE_ID",
    "public": "public",

    // ...
  }
}
```
2. Deploy to your site. Run the following command from your app's root directory:
```
firebase deploy --only hosting:SITE_ID
```
3. View your site at either:
  - SITE_ID.web.app
  - SITE_ID.firebaseapp.com

Step 5: Access Firebase in your app

The Firebase JavaScript SDK supports the following Firebase products. Each product is optional and can be accessed as shown.

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

Firebase product	Namespace (v8 and lower)	Web	Node.js
Analytics	`firebase.analytics()`
Authentication	`firebase.auth()`
Cloud Firestore	`firebase.firestore()`
Cloud Functions for Firebase Client SDK	`firebase.functions()`
Cloud Messaging	`firebase.messaging()`
Cloud Storage	`firebase.storage()`
Performance Monitoring (beta* release)*	`firebase.performance()`
Realtime Database	`firebase.database()`
Remote Config (beta* release)*	`firebase.remoteConfig()`

Available libraries

Available Firebase JS SDKs (from reserved Hosting URLs)

Firebase product	Library reference (reserved URL)
Firebase core (required)	<script src="/__/firebase/8.8.0/firebase-app.js"></script>
Analytics	<script src="/__/firebase/8.8.0/firebase-analytics.js"></script>
Authentication	<script src="/__/firebase/8.8.0/firebase-auth.js"></script>
Cloud Firestore	<script src="/__/firebase/8.8.0/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK	<script src="/__/firebase/8.8.0/firebase-functions.js"></script>
Cloud Messaging	<script src="/__/firebase/8.8.0/firebase-messaging.js"></script> For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics.
Cloud Storage	<script src="/__/firebase/8.8.0/firebase-storage.js"></script>
Performance Monitoring (beta* release)*	<script src="/__/firebase/8.8.0/firebase-performance.js"></script>
Realtime Database	<script src="/__/firebase/8.8.0/firebase-database.js"></script>
Remote Config (beta* release)*	<script src="/__/firebase/8.8.0/firebase-remote-config.js"></script> For an optimal experience using Remote Config, also add the Firebase SDK for Analytics.
Firebase JavaScript SDK (entire SDK)	<script src="/__/firebase/8.8.0/firebase.js"></script>

Available Firebase JS SDKs (from the CDN)

Firebase product	Library reference
Firebase core (required)	<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>
Analytics	<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-analytics.js"></script>
Authentication	<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-auth.js"></script>
Cloud Firestore	<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK	<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-functions.js"></script>
Cloud Messaging	<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-messaging.js"></script> For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics.
Cloud Storage	<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-storage.js"></script>
Performance Monitoring (beta* release)*	<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-performance.js"></script> Visit the Performance Monitoring Get Started to add a standalone, lightweight Performance Monitoring SDK option.
Realtime Database	<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-database.js"></script>
Remote Config (beta* release)*	<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-remote-config.js"></script> For an optimal experience using Remote Config, also add the Firebase SDK for Analytics.

Available Firebase JS SDKs (using bundler with modules)

Firebase product	Library reference for v8 namespaced SDK
Firebase core (required)	`import "firebase/app";`
Analytics	`import "firebase/analytics";`
Authentication	`import "firebase/auth";`
Cloud Firestore	`import "firebase/firestore";`
Cloud Functions for Firebase Client SDK	`import "firebase/functions";`
Cloud Messaging	`import "firebase/messaging";` For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics.
Cloud Storage	`import "firebase/storage";`
Performance Monitoring (beta* release)*	`import "firebase/performance";`
Realtime Database	`import "firebase/database";`
Remote Config (beta* release)*	`import "firebase/remote-config";` For an optimal experience using Remote Config, also add the Firebase SDK for Analytics.

Available Firebase JS SDKs (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"`

Next steps

Learn about Firebase:

Explore sample Firebase apps.
Get hands-on experience with the Firebase Web Codelab.
Explore the open source code in GitHub.
Review the supported environments for the Firebase JavaScript SDK.
Speed up your development with additional Firebase-maintained open source libraries, like AngularFire, RxFire, and FirebaseUI for web.
Prepare to launch your app:
- Set up budget alerts for your project in the Google Cloud Console.
- Monitor the Usage and billing dashboard in the Firebase console to get an overall picture of your project's usage across multiple Firebase services.
- Review the Firebase launch checklist.

Add Firebase services to your app:

Host your app with Firebase Hosting.
Set up a user authentication flow with Authentication.
Store data, like user information, with Cloud Firestore or Realtime Database.
Store files, like photos and videos, with Cloud Storage.
Gain insight into your app's performance issues with Performance Monitoring.
Trigger backend code that runs in a secure environment with Cloud Functions.
Send notifications with Cloud Messaging.

Add Firebase to your JavaScript project

Prerequisites

Step 1: Create a Firebase project

Step 2: Register your app with Firebase

Step 3: Add Firebase SDKs and initialize Firebase

With npm

From the CDN

From Hosting URLs

Node.js apps

Learn about the Firebase config object

Step 4: (Optional) Install CLI and deploy to Firebase Hosting

Default Hosting site

Non-default Hosting site

Step 5: Access Firebase in your app

Available libraries

Available Firebase JS SDKs (from reserved Hosting URLs)

Available Firebase JS SDKs (from the CDN)

Available Firebase JS SDKs (using bundler with modules)

Available Firebase JS SDKs (modules for Node.js)

Next steps