To Add Firebase to you JavaScript Project

5 min readMay 22, 2018

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. If you are upgrading from a 2.x version of the Firebase SDK, see our upgrade guide for Web / Node.js to get started.

If you are interested in using Node.js in privileged environments such as servers or serverless backends like Cloud Functions (as opposed to clients for end-user access like a Node.js desktop or IoT device), you should instead follow the instructions for setting up the Admin SDK.

Add Firebase to your app

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

Create a Firebase project in the Firebase console.

If you don’t have an existing Firebase project, click Add project and enter either an existing Google Cloud Platform project name or a new project name.
If you already have apps in your project, click Add Another App from the project overview page.

2. From the project overview page in the Firebase console, click Add Firebase to your web app.

3. Copy and paste your project’s customized code snippet in the <head> tag of your page, before other script tags.

Below is an example initialization code snippet:

Note: If you need to get the setup code again, go to Develop > Authentication in the Firebase console, and click on Web Setup.

WEB NODE.JS

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/5.0.1/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",
    projectId: "<PROJECT_ID>",
    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, Cloud Storage, the Realtime Database, and Cloud Firestore. 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-firestore - Cloud Firestore (optional).
firebase-storage - Cloud Storage (optional).
firebase-messaging - Firebase Cloud Messaging (optional).
firebase-functions - Cloud Functions for Firebase (optional).

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

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-app.js"></script><!-- Add additional services you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-functions.js"></script><!-- Comment out (or don't include) services you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.0.1/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:

// Firebase App is always required and must be first
var firebase = require("firebase/app");// Add additional services you want to use
require("firebase/auth");
require("firebase/database");
require("firebase/firestore");
require("firebase/messaging");
require("firebase/functions");// Comment out (or don't require) services you don't want to use
// require("firebase/storage");var config = {
  // ...
};
firebase.initializeApp(config);

Use Firebase services

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

firebase.auth() - Authentication
firebase.storage() - Cloud Storage
firebase.database() - Realtime Database
firebase.firestore() - Cloud Firestore
firebase.messaging() - Cloud Messaging
firebase.functions() - Cloud Functions

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 CLIto run a local server like this:

$ npm install -g firebase-tools
$ firebase init    # Generate a firebase.json (REQUIRED)
$ firebase serve   # Start development server

Host 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 a 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.

SDK imports and implicit initialization

Web apps hosted with Firebase Hosting can benefit from simpler project configuration. Paste the following code snippets into your application HTML to import the Firebase SDK and configure it automatically for the project your app is hosted on:

<!-- Firebase App is always required and must be first -->
    <script src="/__/firebase/5.0.1/firebase-app.js"></script>    <!-- Add additional services you want to use -->
    <script src="/__/firebase/5.0.1/firebase-auth.js"></script>
    <script src="/__/firebase/5.0.1/firebase-database.js"></script>
    <script src="/__/firebase/5.0.1/firebase-messaging.js"></script>
    <script src="/__/firebase/5.0.1/firebase-functions.js"></script>    <!-- Comment out (or don't include) services you don't want to use -->
    <!-- <script src="/__/firebase/5.0.1/firebase-storage.js"></script> -->    <script src="/__/firebase/init.js"></script>

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

Note: Each app instance has its own configuration options and authentication state.

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.

Add Firebase features to your app:

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

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated May 22, 2018.