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

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.

This docs using Firebase web version 8.10.0

Step 1: Set up Firebase configs

Adding file & code in ./src/lib/firebase.js

// Vendors
import firebase from 'firebase/app';
import 'firebase/analytics';
import 'firebase/performance';

// Firebase configs
const firebaseConfig = {
  apiKey: `${process.env.NEXT_PUBLIC_FIREBASE_API_KEY}`,
  authDomain: `${process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN}`,
  databaseURL: `${process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL}`,
  projectId: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}`,
  storageBucket: `${process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET}`,
  messagingSenderId: `${process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID}`,
  appId: `${process.env.NEXT_PUBLIC_FIREBASE_APP_ID}`,
  measurementId: `${process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID}`,
};

// Initialize Firebase
let firebasePerformance = '';
if (typeof window !== 'undefined' && !firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
  // Performance
  firebasePerformance = firebase.performance();
  const trace = firebasePerformance.trace('app_start');
  trace.start();

  trace.putAttribute('experiment', '_app_start');

  trace.stop();
}

// Analytics
const firebaseAnalytics = firebase.analytics;

// Log Events
const firebaseEvent = (eventName) => firebase.analytics().logEvent(eventName);

export { firebase, firebaseAnalytics, firebasePerformance, firebaseEvent };

Step 2: Import firebaseAnalytics in to ./src/pages/_app.js

Here it works for the first initial firebase, analytics and performance data will be stored in firebase.

// Vendors
import React from 'react';

// Lib
import { firebaseAnalytics, firebasePerformance } from '@/firebase';

const App = (props) => {
    React.useEffect(() => {
    // Initialize Firebase
    firebaseAnalytics();
    ...
  }, []);
    ...
};

export default App;

Step 3: Using log event

Use this function in specific file which requires user event handler log.

// Lib
import { firebaseEvent } from '@/firebase';

// Log event firebase
firebaseEvent('Event_Name');

Step 4: 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.