Before you begin

If you don't already have a JavaScript project, you can download one of our
quickstart samples 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.

Note: If you already have a Firebase-registered mobile app and it shares
Firebase resources with your JavaScript app, skip this step and configure your
JavaScript app to use the same project as your mobile app.

Step 3: Add Firebase SDKs and initialize Firebase

How you add Firebase SDKs to your app depends on whether you've chosen to use
Firebase Hosting for your app, what tooling you're using with your app (like
a bundler), or if you're configuring a Node.js app.

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().

Note: You aren't required to use this option if you use
Firebase Hosting, but this option does offer a convenience for managing
your Firebase configuration when initializing Firebase.

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="/__/firebase/6.6.1/firebase-app.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="/__/firebase/6.6.1/firebase-auth.js"></script>
<script src="/__/firebase/6.6.1/firebase-firestore.js"></script>
</body>

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.

<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/6.6.1/firebase.js"></script>
<body>

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).

Note: You can use this option even if you use Firebase Hosting, but do
make sure to add your Firebase config object before
initializing Firebase.

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/6.6.1/firebase-app.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-firestore.js"></script>
</body>

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.

<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/6.6.1/firebase.js"></script>
</body>

Using module bundlers

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.

Note: You can use this option even if you use Firebase Hosting, but do
make sure to add your Firebase config object before
initializing Firebase.

Install the Firebase JavaScript SDK:

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

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

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

Node.js apps

Caution: The following instructions are for using the Firebase JavaScript SDK as a
client for end-user access (for example, in a Node.js desktop or IoT
application). To set up administrative access from privileged environments
(such as servers), set up the Firebase Admin SDK
instead.Note: You can use this option even if you use Firebase Hosting, but do
make sure to add your Firebase config object before
initializing Firebase.

Install the Firebase JavaScript SDK:

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

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:

// 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.

// 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/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.

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).

Deploy to your site. Run the following command from your app's root
directory:

firebase deploy

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.

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.

Note: Each Firebase project has its own Firebase configuration and
authentication state.

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.

If you already set up Firebase Hosting for your app, you might have already
completed several of the steps below.

To serve your web app, you'll use the Firebase CLI, a command-line tool.