Add Firebase to your Web Project

Prerequisites

Before you begin, you'll need a web app to add Firebase to. If you don't have a web app already, you can download one of our quickstart samples.

Note: If you are upgrading from a 2.X version of the Firebase SDK, see our upgrade guide for Web to get started.

Add Firebase to your app

To add Firebase to your app, you'll need a Firebase project and a short snippet of code to add to your application HTML 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 project, click Add App from the project overview page.
2. Click Add Firebase to your web app.
3. Click Copy, then paste the code snippet into your application HTML.

If you need to get the setup code again, just click Add App from the overview page and select the web option again.

The code you just copied should look like this:

  // TODO: Replace with your project's customized code snippet
  <script src="https://www.gstatic.com/firebasejs/3.0.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: '<your-api-key>',
      authDomain: '<your-auth-domain>',
      databaseURL: '<your-database-url>',
      storageBucket: '<your-storage-bucket>'
    };
    firebase.initializeApp(config);
  </script>

The snippet contains initialization information to configure the Firebase JavaScript SDK to useAuthentication, Storage and the Realtime Database.

Use Firebase services

A Firebase App can use multiple Firebase services. Each service can be accessed from thefirebase 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

Some parts of the Firebase Web SDK require that your website 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 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.

Advanced Usage

For advanced developers, Firebase has the capability to access multiple Apps at a time, each with their own configuration information. Usually, a program will only have a single (default) App. In that case, you can use a shorthand notation, such as firebase.database(), to access individual services of the default App.

When you need to access services across multiple Firebase Apps, you do so via methods of each individual Firebase App:

  // Intialize the "[DEFAULT]" App
  var mainApp = firebase.intializeApp({ ... });

  // Intialize a "Secondary" App
  var secondaryApp = firebase.initializeApp({ ... }, "Secondary");
  ...
  mainApp.database().ref("path/to/data").set(value);
  secondaryApp.database().ref("path/to/data").set(anotherValue);