🔥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 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

• Firebase Performance Monitoring

• Firebase Log Events

How to use

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

The official Firebase documentation

Step 1: Create a Firebase project

Head to the Firebase Console, 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.

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.

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.

Logging Events

To log events, simply call the logEvent function on the Firebase Analytics instance:

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.

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.

Step 6: Testing analytics metric, performance and log events

First install browser extentions Google Analytics Debugger. 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.