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.

Web

Click Copy, then paste the code snippet into your application HTML. The code snippet should look like this:

<script src="https://www.gstatic.com/firebasejs/3.6.2/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>

The snippet contains initialization information to configure the Firebase JavaScript SDK to use Authentication, Storage and the Realtime Database. You can reduce the amount of code your app uses by just including the features you need. The individually installable components are:

  • firebase-app - The core firebase client (required).
  • firebase-auth - Firebase Authentication (optional).
  • firebase-database - The Firebase Realtime Database (optional).
  • firebase-storage - Firebase Storage (optional).
  • firebase-messaging - Firebase Cloud Messaging (optional).

From the CDN, include the individual components you need (include firebase-app first):

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

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

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

If you are using a bundler like Browserify or webpack, you can just require() the components that you use:

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

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

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

Node.js

The Firebase SDK is also available on npm. If you don't already have a package.json file, create one via npm init. Next, install the firebase npm package and save it to your package.json:

$ npm install firebase --save

To use the module in your application, require it from any JavaScript file:

var firebase = require("firebase");

If you are using ES2015, you can import the module instead:

import * as firebase from "firebase";

Then, initialize the Firebase SDK using the code snippet from above, which should look like this:

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

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.

Next steps

Learn about Firebase:

Add Firebase features to your app:

Send feedback about...

Need help? Visit our support page.