Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now

Learn more about Web and Firebase

As you're developing a Web app using Firebase, you might encounter unfamiliar concepts, or areas where you need more information to make the right decisions for your project. This page aims to answer those questions or point you to resources to learn more.

If you have questions about a topic not covered on this page, visit one of our online communities. We'll also update this page with new topics periodically, so check back to see if we've added the topic you want to learn about.

SDK versions 8 and 9

Firebase provides two SDK versions for Web apps, one of which is currently in Beta:

  • Version 8. This is the JavaScript interface that Firebase has maintained for several years and is familiar to Web developers with existing Firebase apps.
  • Modular version 9 (Beta). This SDK introduces a modular approach that provides reduced SDK size and greater efficiency with modern JavaScript build tools such as Webpack or Rollup.

Version 9 integrates well with build tools that strip out code that isn't being used in your app, a process known as "tree-shaking." Apps built with this SDK benefit from greatly reduced size footprints. Version 8, though available as a module, does not have a strictly modular structure and does not provide the same degree of size reduction.

Though the majority of the version 9 SDK follows the same patterns as version 8, the organization of the code is different. Generally, version 8 is oriented towards a namespace and service pattern, while version 9 is oriented toward discrete functions. For example, version 8's dot-chaining, such as firebaseApp.auth(), is replaced in version 9 by a single getAuth() function that takes firebaseApp and returns an Authentication instance.

This means that Web apps created with version 8 or earlier require refactoring in order to take advantage of version 9's modular approach. Firebase provides compat libraries to ease that transition; see the upgrade guide for further details.

What is supported?

While version 8 and version 9 (Beta) have different code styles, they provide very similar support for Firebase features and options. As we'll describe in detail in this guide, both SDK versions support JavaScript and Node.js variants along with several options for adding/installing the SDKs.

Add SDKs with 8.0 (Namespaced) 9.0 (Modular Beta)
npm
  • For JavaScript
  • For Node.js
  • For JavaScript
  • For Node.js
CDN (Content Delivery Network)
  • For JavaScript
  • Coming soon for JavaScript
Hosting URLs
  • For JavaScript
  • For Node.js
  • Coming soon for JavaScript and Node.js

For more information, see Ways to add the Web SDKs to your app and Firebase Web SDK variants later on this page.

Version 9 for new apps

If you're starting on a new integration with Firebase, you can opt into the version 9 Beta SDK when you add and initialize the SDK.

As you develop your app, keep in mind that your code will be organized principally around functions. In version 9, services are passed as the first argument, and the function then uses the details of the service to do the rest. For example:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

For more examples and details, see the guides for each product area as well as the version 9 reference documentation.

Ways to add the Web SDKs to your app

Firebase provides JavaScript libraries for most Firebase products, including Remote Config, FCM, and more. How you add Firebase SDKs to your Web app depends on whether you've chosen to use Firebase Hosting for your app, what tooling you're using with your app (like a module bundler), or if your app runs in a non-browser environment such as Node.js.

You can add any of the available libraries to your app via one of the supported methods:

  • npm (for module bundlers and Node.js)
  • CDN (content delivery network)
  • Firebase Hosting URLs

For detailed setup instructions for each method, see Add Firebase to your JavaScript App. The rest of this section contains information to help you choose from the available options.

npm

Downloading the Firebase npm package (which includes both browser and Node.js bundles) provides you with a local copy of the Firebase SDK, which may be needed for non-browser applications such as Node.js apps, React Native, or Electron. The download includes Node.js and React Native bundles as an option for some packages. The Node.js bundles are necessary for the server-side rendering (SSR) step of SSR frameworks.

Using npm with a module bundler such as Webpack or Rollup provides optimization options to "tree-shake" unused code and apply targeted polyfills, which can greatly reduce the size footprint of your app. Implementing these features may add some complexity to your configuration and build chain, but various mainstream CLI tools can help mitigate that. These tools include Angular, React, Vue, Next, and others.

In summary:

  • Provides valuable app size optimization
  • Robust tooling is available to manage modules
  • Required for SSR with Node.js

CDN (content delivery network)

Adding libraries that are stored on Firebase's CDN is a simple SDK setup method that may be familiar to many developers. Using the CDN to add the SDKs, you won't need a build tool, and your build chain may tend to be simpler and easier to work with compared to module bundlers. If you're not especially concerned about the instaled size of your app and don't have special requirements such as transpiling from TypeScript, then CDN could be a good choice.

In summary:

  • Familiar and simple
  • Appropriate when app size is not a major concern
  • Appropriate when your website does not use build tools.

Hosting URLs

Firebase Hosting provides reserved URLs that let you improve performance by loading files from the same origin. If you are already using or planning to use Firebase Hosting in your app, you can add JavaScript SDKs via Hosting URLs and benefit from this performance gain. Additionally, this method supports automatic initialization of the SDK, which can simplify management of multiple environments such as dev, staging, and production. Learn more about adding SDKs via reserved Hosting URLs.

In summary:

  • Provides a slight performance advantage over CDN
  • Can simplify working in multiple development environments
  • Convenient for apps already using Firebase Hosting

Firebase Web SDK variants

Currently, Firebase provides two Web SDK variants:

  • A JavaScript bundle supporting all Firebase features for use in the browser.
  • A client-side Node.js bundle that supports many—but not all— Firebase features. See the list of supported environments.

Both of these SDK variants are designed to help build web apps or client apps for end-user access, such as in a Node.js desktop or IoT application. If your goal is to set up administrative access from privileged environments (such as servers) use the Firebase Admin SDK instead.

Environment detection with bundlers and frameworks

When you install the Firebase Web SDK using npm, the JavaScript and Node.js versions are both installed. The package provides detailed environment detection to enable the right bundles for your application.

If your code uses Node.js require statements, the SDK finds the Node-specific bundle. Otherwise, your bundler's settings must be correctly figured to detect the right entry point field in your package.json file (for example, main, browser, or module). If you experience runtime errors with the SDK, check to make sure your bundler is configured to prioritize the correct type of bundle for your environment.

Available libraries

Additional setup options

Delay loading of Firebase SDKs (from CDN)

You can delay the inclusion of the Firebase SDKs until the entire page has loaded.

  1. Add a defer flag to each script tag for the Firebase SDKs, then defer the initialization of Firebase using a second script, for example:

    <script defer src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.4.1/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Create an init-firebase.js file, then include the following in the file:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Use multiple Firebase projects in a single app

In most cases, you only have to initialize Firebase in a single, default app. You can access Firebase from that app in two equivalent ways:

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

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

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

Sometimes, though, you need to access multiple Firebase projects at the same time. For example, you might want to read data from the database of one Firebase project but store files in a different Firebase project. Or you might want to authenticate one project while keeping a second project unauthenticated.

The Firebase JavaScript SDK allows you to initialize and use multiple Firebase projects in a single app at the same time, with each project using its own Firebase configuration information.

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

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

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

Run a local web server for development

If you're building a web app, some parts of the Firebase JavaScript SDK require that you serve your web app from a server rather than from the local filesystem. You can use the Firebase CLI to run a local server.

If you already set up Firebase Hosting for your app, you might have already completed several of the steps below.

To serve your web app, you'll use the Firebase CLI, a command-line tool.

  1. Visit the Firebase CLI documentation to learn how to install the CLI or update to its latest version.

  2. Initialize your Firebase project. Run the following command from the root of your local app directory:

    firebase init

  3. Start the local server for development. Run the following command from the root of your local app directory:

    firebase serve

Open source resources for Firebase JavaScript SDKs

Firebase supports open source development, and we encourage community contributions and feedback.

Firebase JavaScript SDKs

Most Firebase JavaScript SDKs are developed as open source libraries in our public Firebase GitHub repository.

Quickstart samples

Firebase maintains a collection of quickstart samples for most Firebase APIs on Web. Find these quickstarts in our public Firebase GitHub quickstart repository. You can use these quickstarts as example code for using Firebase SDKs.