> For the complete documentation index, see [llms.txt](https://tokenomy.gitbook.io/boilerplate-code/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tokenomy.gitbook.io/boilerplate-code/services/firebase.md).

# Firebase

Firebase gives you the tools and infrastructure you need to build better mobile and web apps, improve app quality, and grow your business.

## Overview

[Firebase](https://firebase.google.com/) is a mobile and web application development platform that provides developers with a variety of tools and services to build and run their apps. It was first developed by Firebase Inc. in 2011, but was later acquired by Google in 2014.

In this boilerplate already supports integration with Firebase, several Firebase features that are already in boilerplate

* [Firebase Analytics](https://firebase.google.com/docs/analytics/get-started?platform=web)
* [Firebase Performance Monitoring](https://firebase.google.com/docs/perf-mon/get-started-web#web-version-8)
* [Firebase Log Events](https://firebase.google.com/docs/analytics/events?platform=web)

## How to use

Here we use Firebase. The installation method is as follows below.

{% hint style="info" %}
[The official Firebase documentation](https://firebase.google.com/docs/web/setup)
{% endhint %}

### Step 1: Create a Firebase project

Head to the [Firebase Console](https://console.firebase.google.com/), create a new project, and give it a name. 

Once the project is created, navigate to the "Project Settings" page by clicking the gear icon in the top left corner of the Firebase Console.

In the "Project Settings" page, select the "General" tab and take note of the "Project ID". You will need this later.

### Step 2: Install Firebase **SDK**

install the required Firebase dependencies. Use the following command to install the Firebase packages using npm or yarn.

```bash
yarn add firebase @firebase/analytics @firebase/performance @firebase/app-types @firebase/installations-types
```

### Step 3: Set up Firebase in Your App

create a file named `firebase.ts` (or any name you prefer) in the `src/services` directory. In this file, initialize Firebase with your Firebase configuration.

```typescript
import firebase from "firebase/app";
import "firebase/analytics";
import "firebase/performance";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

// For enable Analytics
firebase.analytics();
// For enable Performance Monitoring
firebase.performance();

export default firebase;
```

### Step 4: Add environment variable for firebase

We need update your `.env` data files.

```
NEXT_PUBLIC_FIREBASE_API_KEY=<your-api-key>
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<your-auth-domain>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<your-project-id>
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<your-storage-bucket>
NEXT_PUBLIC_FIREBASE_SENDER_ID=<your-messaging-sender-id>
NEXT_PUBLIC_FIREBASE_APP_ID=<your-app-id>
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=<your-measurement-id>
```

### Step 5: Implementation firebase functions

Below are some examples of using functions from several firebase features.

{% tabs %}
{% tab title="Logging Events" %}
To log events, simply call the `logEvent` function on the Firebase Analytics instance:

```typescript
import firebase from '@/services/firebase';

firebase.analytics().logEvent('my_event', {
  my_param: 'param_value',
});
```

Replace `'my_event'` with the name of the event you want to log and `{ my_param: 'param_value' }` with any parameters you want to include with the event.
{% endtab %}

{% tab title="Viewing Performance Monitoring Data" %}
To view performance monitoring data, navigate to the Firebase Console and select your project. Click on "Performance" in the left-hand menu to view your app's performance data.

From there, you can view metrics such as app start time, network requests, and more.
{% endtab %}
{% endtabs %}

### Step 6: Testing analytics metric, performance and log events

First install browser extentions [Google Analytics Debugger](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna). Turn it on and then run trigger event log on your code. For view realtime event you can see in **DebugView** menu in firebase console.