[Video](https://www.youtube.com/watch?v=rQvOAnNvcNQ)

Follow this guide to use the Firebase JavaScript SDK in your web app or as a client for
end-user access, for example, in a Node.js desktop or IoT application.

## **Step 1**: Create a Firebase project and register your app

Before you can add Firebase to your JavaScript app, you need to create a
Firebase project and register your app with that project. When you register your
app with Firebase, you'll get a Firebase configuration object that you'll use to
connect your app with your Firebase project resources.

> [!NOTE]
> **Note:** Upgrading from the version 8 Firebase SDK? Check out our [upgrade guide](https://firebase.google.com/docs/web/modular-upgrade.md.txt).

Visit [Understand Firebase Projects](https://firebase.google.com/docs/projects/learn-more.md.txt) to learn more
about Firebase projects and best practices for adding apps to projects.

#### **Create a Firebase project**

### New to Firebase or Cloud


Follow these steps if you're new to Firebase or Google Cloud.  

You can also follow these steps if you want to create a wholly new
Firebase project (and its underlying Google Cloud project).

1. Sign into the [Firebase console](https://console.firebase.google.com/).
2. Click the button to create a new Firebase project.
3. In the text field, enter a **project name**.

   If you're part of a Google Cloud org, you can optionally select which
   folder you create your project in.

   > [!CAUTION]
   > Your project name is used as a display name in Firebase interfaces, and Firebase auto-creates a unique project ID based on this project name. Note that you can optionally click the **Edit** icon now to set your preferred project ID, but you cannot change this ID after project creation. Learn about [how Firebase uses the
   > project ID](https://firebase.google.com/docs/projects/learn-more#project-id).

4. If prompted, review and accept the [Firebase terms](https://firebase.google.com/terms.md.txt), then click **Continue**.
5. *(Optional)* Enable AI assistance in the Firebase console (called "Gemini in Firebase"), which can help you get started and streamline your development process.
6. *(Optional)* Set up Google Analytics for your project,
   which enables an optimal experience using these Firebase products:
   [Firebase A/B Testing](https://firebase.google.com/docs/ab-testing.md.txt),
   [Cloud Messaging](https://firebase.google.com/docs/cloud-messaging.md.txt),
   [Crashlytics](https://firebase.google.com/docs/crashlytics.md.txt),
   [In-App Messaging](https://firebase.google.com/docs/in-app-messaging.md.txt), and
   [Remote Config](https://firebase.google.com/docs/remote-config.md.txt)
   (including
   [Personalization](https://firebase.google.com/docs/remote-config/personalization.md.txt)).

   Either select an existing
   [Google Analytics account](https://support.google.com/analytics/answer/1009618)
   or create a new account. If you create a new account, select your
   [Analytics reporting location](https://firebase.google.com/docs/projects/locations.md.txt),
   then accept the data sharing settings and Google Analytics terms
   for your project.

   > [!NOTE]
   > You can always set up Google Analytics later in the [*Integrations* tab](https://console.firebase.google.com/project/_/settings/integrations) of your *Project settings*.

7. Click **Create project**.

Firebase creates your project, provisions some initial resources, and
enables important APIs. When the process completes, you'll be taken to the
overview page for your Firebase project in the Firebase console.

### Existing Cloud project


Follow these steps if you want to start using Firebase with an existing
Google Cloud project. Learn more about and troubleshoot
["adding
Firebase" to an existing Google Cloud project](https://firebase.google.com/docs/projects/use-firebase-with-existing-cloud-project).

1. Sign into the [Firebase console](https://console.firebase.google.com/) with the account that gives you access to the existing Google Cloud project.
2. Click the button to create a new Firebase project.
3. At the bottom of the page, click **Add Firebase to Google Cloud project**.
4. In the text field, start entering the **project name** of the existing project, and then select the project from the displayed list.
5. Click **Open project**.
6. If prompted, review and accept the [Firebase terms](https://firebase.google.com/terms.md.txt), then click **Continue**.
7. *(Optional)* Enable AI assistance in the Firebase console (called "Gemini in Firebase"), which can help you get started and streamline your development process.
8. *(Optional)* Set up Google Analytics for your project,
   which enables an optimal experience using these Firebase products:
   [Firebase A/B Testing](https://firebase.google.com/docs/ab-testing.md.txt),
   [Cloud Messaging](https://firebase.google.com/docs/cloud-messaging.md.txt),
   [Crashlytics](https://firebase.google.com/docs/crashlytics.md.txt),
   [In-App Messaging](https://firebase.google.com/docs/in-app-messaging.md.txt), and
   [Remote Config](https://firebase.google.com/docs/remote-config.md.txt)
   (including
   [Personalization](https://firebase.google.com/docs/remote-config/personalization.md.txt)).

   Either select an existing
   [Google Analytics account](https://support.google.com/analytics/answer/1009618)
   or create a new account. If you create a new account, select your
   [Analytics reporting location](https://firebase.google.com/docs/projects/locations.md.txt),
   then accept the data sharing settings and Google Analytics terms
   for your project.

   > [!NOTE]
   > You can always set up Google Analytics later in the [*Integrations* tab](https://console.firebase.google.com/project/_/settings/integrations) of your *Project settings*.

9. Click **Add Firebase**.

Firebase
[adds
Firebase to your existing project](https://firebase.google.com/docs/projects/use-firebase-with-existing-cloud-project#faq_what-happens-when-add-firebase).
When the process completes, you'll be taken to the overview page for your
Firebase project in the Firebase console.

#### **Register your app**

After you have a Firebase project, you can register your web app with that project.

1. In the center of the [Firebase console's project
   overview
   page](https://console.firebase.google.com/), click the **Web** icon
   ()
   to launch the setup workflow.

   If you've already added an app to your Firebase project, click **Add app** to
   display the platform options.
2. Enter your app's nickname.  

   This nickname is an internal, convenience identifier and is only visible to
   you in the Firebase console.

3. Click **Register app**.

4. Follow the on-screen instructions to add and initialize the Firebase SDK in your app.

   You can also find more detailed instructions for adding, initializing, and using the Firebase
   SDK in the next steps of this getting started page.

If you don't already have a JavaScript project and just want to try out a
Firebase product, you can download one of our
[quickstart samples](https://firebase.google.com/docs/samples.md.txt).

## **Step 2**: Install the SDK and initialize Firebase

This page describes setup instructions for the modular API for the
Firebase JavaScript SDK, which uses a
[JavaScript Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
format.

This workflow uses npm and requires module bundlers or JavaScript framework
tooling because the modular API is optimized to work with
[module bundlers](https://firebase.google.com/docs/web/module-bundling.md.txt)
to eliminate unused code (tree-shaking) and decrease SDK size.

> [!NOTE]
> **Note:** Using the modular API is strongly recommended, especially for production apps. If you need support for calling the API in other ways, like `window.firebase`, see [Upgrade from the namespaced API to the modular API](https://firebase.google.com/docs/web/modular-upgrade.md.txt#window-compat) or [Alternative ways to add Firebase](https://firebase.google.com/docs/web/alt-setup.md.txt).

1. Install Firebase using npm:

   ```
   npm install firebase
   ```
2. Initialize Firebase in your app and create a Firebase App object:

   ```javascript
   import { initializeApp } from 'firebase/app';

   // TODO: Replace the following with your app's Firebase configuration
   const firebaseConfig = {
     //...
   };

   const app = initializeApp(firebaseConfig);
   ```

   A Firebase App is a container-like object that stores common configuration
   and shares authentication across Firebase services. After you initialize a
   Firebase App object in your code, you can add and start using Firebase
   services.

   If your app includes dynamic features based on server-side rendering (SSR),
   you'll need to take some additional steps to ensure that your configuration
   persists across server rendering and client rendering passes. In
   your server logic, implement the
   [`FirebaseServerApp`](https://firebase.google.com/docs/reference/js/app.firebaseserverapp.md.txt) interface to
   optimize your app's
   [session management with service workers](https://firebase.google.com/docs/auth/web/service-worker-sessions.md.txt#server_side_changes).

   > [!NOTE]
   > Do you use ESM and want to use browser modules? Replace all your `import` lines to use the following pattern:  
   > `import { } from 'https://www.gstatic.com/firebasejs/13.2.0/firebase-SERVICE.js'`   
   > (where <var translate="no">SERVICE</var> is an SDK name such as `firebase-firestore`).
   >
   > Using browser modules is a quick way to get started, but we
   > recommend using a module bundler for production.

## **Step 3**: Access Firebase in your app

Firebase services (like Cloud Firestore, Authentication, Realtime Database,
Remote Config, and more) are available to import within individual
sub-packages.

The example below shows how you could use the Cloud Firestore Lite SDK to retrieve
a list of data.

```javascript
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}
```

## **Step 4**: Use a module bundler (webpack/Rollup) for size reduction

> [!NOTE]
> **Note:** You can skip this step if you are using a JavaScript framework CLI tool like the [Angular CLI](https://angular.io/cli), [Next.js](https://nextjs.org/), [Vue CLI](https://cli.vuejs.org/), or [Create React App](https://reactjs.org/docs/create-a-new-react-app.html). For more information, check out our [guide on module bundling](https://firebase.google.com/docs/web/module-bundling.md.txt).

The Firebase JavaScript SDK is designed to work with module bundlers to remove any
unused code (tree-shaking). We strongly recommend using this approach for
production apps. Tools such as the
[Angular CLI](https://angular.io/cli),
[Next.js](https://nextjs.org/),
[Vue CLI](https://cli.vuejs.org/), or
[Create React App](https://reactjs.org/docs/create-a-new-react-app.html)
automatically handle module bundling for libraries installed through npm and
imported into your codebase.

For more information, see our guide
[Using module bundlers with Firebase](https://firebase.google.com/docs/web/module-bundling.md.txt).

## Available Firebase services for web

Now that you're setup to use Firebase, you can start adding and using any of the
following available Firebase services in your web app.

The following commands show how to import Firebase libraries installed locally
with [`npm`](https://npmjs.com). For alternative import options,
see the
[available libraries documentation](https://firebase.google.com/docs/web/learn-more.md.txt#available-libraries).
-

  #### [Firebase AI Logic](https://firebase.google.com/docs/ai-logic/get-started.md.txt) ^1^

  import { } from 'firebase/ai';
-

  #### [Analytics](https://firebase.google.com/docs/analytics/web/get-started.md.txt)

  import { } from 'firebase/analytics';
-

  #### [App Check](https://firebase.google.com/docs/app-check/web/recaptcha-provider.md.txt)

  import { } from 'firebase/app-check';
-

  #### [Authentication](https://firebase.google.com/docs/auth/web/start.md.txt)

  import { } from 'firebase/auth';
-

  #### [Cloud Firestore](https://firebase.google.com/docs/firestore/quickstart.md.txt)

  import { } from 'firebase/firestore';
-

  #### [Cloud Functions](https://firebase.google.com/docs/functions/callable.md.txt#call_the_function)

  import { } from 'firebase/functions';
-

  #### [Cloud Messaging](https://firebase.google.com/docs/cloud-messaging/js/client)

  import { } from 'firebase/messaging';
-

  #### [Cloud Storage](https://firebase.google.com/docs/storage/web/start.md.txt)

  import { } from 'firebase/storage';
-

  #### [Performance Monitoring](https://firebase.google.com/docs/perf-mon/get-started-web.md.txt)

  import { } from 'firebase/performance';
-

  #### [Realtime Database](https://firebase.google.com/docs/database/web/start.md.txt)

  import { } from 'firebase/database';
-

  #### [Remote Config](https://firebase.google.com/docs/remote-config/web/get-started.md.txt)

  import { } from 'firebase/remote-config';
-

  #### [SQL Connect](https://firebase.google.com/docs/sql-connect/quickstart.md.txt#web) ^2^

  import { } from 'firebase/data-connect';

^**1** *Firebase AI Logic was formerly called
"Vertex AI in Firebase" with the package
`firebase/vertexai`.*^

^**2** *Firebase SQL Connect was formerly called
"Firebase Data Connect".*^

## Next steps

**Learn about Firebase:**

- Explore [sample Firebase apps](https://firebase.google.com/docs/samples.md.txt).

- Get hands-on experience with the
  [Firebase Web Codelab](https://firebase.google.com/codelabs/firebase-nextjs).

- Explore the [open source code in
  GitHub](https://github.com/firebase/firebase-js-sdk).

- Review the [supported environments](https://firebase.google.com/docs/web/environments-js-sdk.md.txt) for the
  Firebase JavaScript SDK.

- Speed up your development with additional Firebase-maintained open source
  libraries, like
  [AngularFire](https://firebaseopensource.com/projects/angular/angularfire2/),
  [RxFire](https://github.com/firebase/firebase-js-sdk/tree/master/packages/rxfire#rxfire),
  and
  [FirebaseUI for web](https://firebaseopensource.com/projects/firebase/firebaseui-web/).

- Prepare to launch your app:

  - Set up [budget alerts](https://firebase.google.com/docs/projects/billing/budget-alerts.md.txt) for your project in the Google Cloud console.
  - Monitor the [*Usage and billing* dashboard](https://console.firebase.google.com/project/_/usage?useAutoProject=true) in the Firebase console to get an overall picture of your project's usage across multiple Firebase services.
  - Review the [Firebase launch checklist](https://firebase.google.com/support/guides/launch-checklist.md.txt).