Add Firebase to your JavaScript Project

Prerequisites

Before you begin, you'll need a JavaScript (web or Node.js) app to add Firebase to. If you don't have an app already, you can download one of our quickstart samples.

Add Firebase to Your app

To add Firebase to your app, you'll need a Firebase project, the Firebase SDK, and a short snippet of initialization code that has a few details about your project.

1. Create a Firebase project in the Firebase console, if you don't already have one.
   • If you already have an existing Google project associated with your app, click Import Google Project. Otherwise, click Create New Project.
   • If you already have a Firebase project, click Add App from the project overview page.
2. Click Add Firebase to your web app.
3. Note the initialization code snippet, which you will use in a minute.

<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase-messaging.js"></script>

<!-- Leave out Storage -->
<!-- <script src="https://www.gstatic.com/firebasejs/3.6.9/firebase-storage.js"></script> -->

<script>
  var config = {
    // ...
  };
  firebase.initializeApp(config);
</script>

var firebase = require("firebase/app");
require("firebase/auth");
require("firebase/database");

// Leave out Storage
//require("firebase/storage");

var config = {
  // ...
};
firebase.initializeApp(config);

$ npm install firebase --save

var firebase = require("firebase");

import * as firebase from "firebase";

// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

Use Firebase services

A Firebase App can use multiple Firebase services. Each service can be accessed from the firebase namespace:

• firebase.auth() - Authentication
• firebase.storage() - Storage
• firebase.database() - Realtime Database

See the individual services for documentation on their use.

Run a Local Web Server for Development

If you are building a web app, you will find that some parts of the Firebase JavaScript SDK require that your web app be served from a server rather than from the local filesystem. You can use the Firebase CLI to run a local server like this:

$ npm install -g firebase-tools
$ firebase serve

Deploy your Web App Using Firebase Hosting

If you are building a web app and your web app is entirely static content, you can deploy it easily using Firebase Hosting.

Firebase Hosting is developer-focused static web hosting for modern front-end web applications. Using Firebase Hosting, you can deploy SSL-enabled web apps to your own domain on a global content-delivery network (CDN) from a single command.

Initialize multiple apps

In most cases, you will only have to initialize a single, default app. You can access services off of that app in two equivalent ways:

// Initialize the default app
var defaultApp = firebase.initializeApp(defaultAppConfig);

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

// You can retrieve services via the defaultApp variable...
var defaultStorage = defaultApp.storage();
var defaultDatabase = defaultApp.database();

// ... or you can use the equivalent shorthand notation
defaultStorage = firebase.storage();
defaultDatabase = firebase.database();

Some use cases require you to create multiple apps at the same time. For example, you might want to read data from the Realtime Database of one Firebase project and store files in another project. Or you might want to authenticate one app while have another app be unauthenticated. The Firebase SDK allows you create multiple apps at the same time, each with their own configuration information.

// Initialize the default app
firebase.initializeApp(defaultAppConfig);

// Initialize another app with a different config
var otherApp = firebase.initializeApp(otherAppConfig, "other");

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

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

// Use the otherApp variable to retrieve the other app's services
var otherStorage = otherApp.storage();
var otherDatabase = otherApp.database();

Next steps

Learn about Firebase:

• Explore sample Firebase apps.
• Get hands-on experience with the Firebase Web Codelab.

Add Firebase features to your app:

• Set up user authentication with Authentication.
• Store user info with Realtime Database or blob data with Storage.
• Receive notifications with Cloud Messaging.