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. 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, then enter either an existing Google Cloud Platform project name or a new project name.
- If you have an existing Firebase project that you'd like to use, select that project from the console.
From the project overview page in the Firebase console, click Add Firebase to your web app. If your project already has an app, select Add App from the project overview page.
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:

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/5.7.0/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 that your app uses by only including the features that you need. The individually installable components are:

firebase-app — The core firebase client (required)
firebase-auth — Firebase Authentication (optional)
firebase-database — 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 that you need (include firebase-app first):

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-functions.js"></script>

<!-- Comment out (or don't include) services that you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.7.0/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 that 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 that you don't want to use
// 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 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:

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're building a web app, 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 init    # Generate a firebase.json (REQUIRED)
$ firebase serve   # Start development server

Host your web app using Firebase Hosting

If you're building a web app and your web app is entirely static content, you can deploy it 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) using 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.7.0/firebase-app.js"></script>

    <!-- Add additional services that you want to use -->
    <script src="/__/firebase/5.7.0/firebase-auth.js"></script>
    <script src="/__/firebase/5.7.0/firebase-database.js"></script>
    <script src="/__/firebase/5.7.0/firebase-messaging.js"></script>
    <script src="/__/firebase/5.7.0/firebase-functions.js"></script>

    <!-- Comment out (or don't include) services that you don't want to use -->
    <!-- <script src="/__/firebase/5.7.0/firebase-storage.js"></script> -->

    <script src="/__/firebase/init.js"></script>

Initialize multiple apps

In most cases, you only have to initialize a single, default app. You can access services from 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 to 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.
Explore the open source code in GitHub.

Add Firebase services 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.

上次更新：十二月 7, 2018。