Case Study: How Nike.com can leverage Layer0 to improve their First Page Loads and Navigation upto ~80%, acing Largest Contentful Paint.

```js
async function exec() {
  const fs = require('fs')
  const { nodeFileTrace } = require('@vercel/nft')
  // The whole app inside index.js
  const files = ['./build/index.js']
  // Compute file trace
  const { fileList } = await nodeFileTrace(files)
  // Store set of packages
  let packages = {}
  fileList.forEach((i) => {
    if (i.includes('node_modules/')) {
      let temp = i.replace('node_modules/', '')
      temp = temp.substring(0, temp.indexOf('/'))
      packages[`node_modules/${temp}`] = true
    } else {
      packages[i] = true
    }
  })
  // Sort the set of packages by name (for easier difference comparison with git)
  packages = Object.keys(packages)
    .sort()
    .reduce((obj, key) => {
      obj[key] = packages[key]
      return obj
    }, {})
  // Dump the list of the computed packages for further references while deploying the app
  fs.writeFileSync('./toInclude.json', JSON.stringify(packages, null, 2), 'utf-8')
}

exec()
```

Compute runtime dependencies for your Remix Express app via @vercel/nft

## Initialize Next.js Starter
```bash
npx create-next-app project-name
```

## Install firebase-admin
```bash
npm install firebase-admin
```

## Generate the firebase config
```js
// File: lib/fireConfig.js

export const fireConfig= {
// Place the json obtained as in
// https://firebase.google.com/docs/admin/setup#initialize-sdk
}
```

## Create firebase.js
```js
// File: lib/firebase.js

import admin from 'firebase-admin'
import { fireConfig } from './fireConfig'

try {
  admin.initializeApp({
    credential: admin.credential.cert(fireConfig),
  })
  console.log('Initialized.')
} catch (error) {
  /*
   * We skip the "already exists" message which is
   * not an actual error when we're hot-reloading.
   */
  if (!/already exists/u.test(error.message)) {
    console.error('Firebase admin initialization error', error.stack)
  }
}

export default admin
```
## Use firebase-admin in Next.js API Routes
```js
// File: pages/api/tryFirebaseAdmin.js

import admin from '@/lib/firebase'

export default async function handler(req, res) {
    const firebase = admin.firestore()

    // Return promise to handle serverless function timeouts
    return new Promise((resolve, reject) => {
       firebase
        . // set of operations
        .then(() => {
          res.status(200).json({ data })
          res.end()
          resolve()
        })
        .catch((e) => {
          res.status(405).json(e)
          res.end()
          resolve()
        })
    }

}
```

## Example
This page itself obtains data from server side data fetch with firebase-admin and Next.js. Feel free to add any problems in comments, or email me at [rishi18304@iiitd.ac.in](mailto:rishi18304@iiitd.ac.in). Find my portfolio's code at [rishi-raj-jain/rishi.app](https://github.com/rishi-raj-jain/rishi.app)


Using Firebase Admin with Next.js

This guide describes how to create dynamic images (used in web previews) with [Next.js](https://nextjs.org/), [Chrome AWS Lambda](https://github.com/alixaxel/chrome-aws-lambda) and [Layer0](https://www.layer0.co/).

## Motivation

You'd want this if you are lazy enough to **not** make preview images by yourself for each and every piece of content that you write, that would support dark mode, come with no need to deploy more than once, and the dimensions would be resizable on the fly.
![](https://rishi-raj-jain-html-og-image-default.layer0-limelight.link/api?title=Motivation%20to%20make%20your%20own%20dynamic%20previews&image=https://images.unsplash.com/photo-1461896836934-ffe607ba8211?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80)

## Setup Next.js
- Initialise a Next.js project by the following command:
```bash
npx create-next-app@latest dynamic-preview
```
- Remove **_app.js** and **index.js** inside the **pages** directory
- Rename **hello.js** under **pages/api** to **index.js**

## Setup Layer0
- Install Layer0 CLI with the following command:
```bash
npm i -g @layer0/cli
```
- Install Layer0 in the project by the command:
```bash
layer0 init
```
- This will automatically add all of the required dependencies and files to your project. These include:

  - The **@layer0/core** package - Allows you to declare routes and deploy your application on Layer0.
  - The **@layer0/next** package - Provides router middleware that automatically adds Next.js pages and api routes to the Layer0 router.
  - The **@layer0/prefetch** package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed.
  - The **@layer0/react** package - Provides a **Prefetch** component for prefetching pages.
  - **layer0.config.js**
  - **routes.js** - A default routes file that sends all requests to Next.js. Update this file to add caching or proxy some URLs to a different origin.
  - **sw/service-worker.js** A service worker implemented using Workbox.

- If your project does not have a **next.config.js** file, one will automatically be added when you run **layer0 init**. Doing so adds two plugins:
  - **withLayer0** (required)
  - **withServiceWorker** (optional)

If your project already has this config file, you need to add these plugins yourself.

```js
const { withLayer0, withServiceWorker } = require('@layer0/next/config')

module.exports = withLayer0(
  withServiceWorker({
    // Output source maps so that stack traces have original source filenames and line numbers when tailing
    // the logs in the Layer0 developer console.
    layer0SourceMaps: true,
  })
)
```

## Include jsconfig.json
Create **jsconfig.json** at root of your project to make imports easier as following:
```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/lib/*": ["lib/*"]
    }
  }
}
```

## Install Chrome AWS Lambda
To make sure your app functions the same as expected with serverless functions, install puppeteer alongwith chrome-aws-lambda by command as follows:
```bash
npm i puppeteer chrome-aws-lambda // specifically puppeteer@10.4.0 chrome-aws-lambda@10.1.0
```

## Setting up Dynamic Preview
As you might've guessed by now, we're gonna feed in html to chrome-aws-lambda, and it'll return us with the screenshot of the rendered page. To make things easier but dynamic, we can accept query parameters such as **width**, **height**, **title**, **author**, **mode**, **embedImage** to create the html on the fly.
After you're done figuring out how you want the preview images to look like, replace the contents in **pages/api/index.js** to the following:
```js
import chromium from 'chrome-aws-lambda'

export default async function handler(req, res) {
  const {
    title,
    image,
    mode = false, // default as light mode
    width = 1400, // default width as 1400px
    height = 720, // default width as 720px
  } = req.query

  // Your dynamic html
  const dom = generatePage(title, image, mode)

  // Load Chromium
  const browser = await chromium.puppeteer.launch({
    args: chromium.args,
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath,
    headless: chromium.headless,
    ignoreHTTPSErrors: true,
  })

  // Wait for the page 
  const page = await browser.newPage()

  // Set height and width of the page
  await page.setViewport({ 
   width: parseInt(width), 
   height: parseInt(height) 
  })

  // Pass dynamic html to the page
  await page.setContent(dom)

  // Set timeout so that all the resources load
  await page.waitForTimeout(10000) // wait for the page to get rendered
  const content = await page.$('body')
  const imageBuffer = await content.screenshot({ omitBackground: true })
  await page.close()
  await browser.close()

  // Cache Forever
  res.setHeader(
    'Cache-Control',
    `public, immutable, no-transform, s-maxage=31536000, max-age=31536000`
  )

  // Send the response as an image
  res.setHeader('Content-Type', 'image/png')
  res.send(imageBuffer)
  res.status(200)
}
```

## Deploy to Layer0
Deploying requires an account on Layer0. [Sign up here for free.](https://app.layer0.co/signup) Once you have an account, you can deploy to Layer0 by running the following in the root folder of your project:
```bash
layer0 deploy
```
See [deploying](https://docs.layer0.co/guides/deploying) for more information.
![](https://rishi-raj-jain-html-og-image-default.layer0.link/api?title=Yay,%20Deployed!&image=https://images.unsplash.com/photo-1519834785169-98be25ec3f84)

## Optional: More on creating your dynamic pages
The following function is used to create dynamic htmls. Play around TailwindCSS to visualise how previews would look like at [Play TailwindCSS](https://play.tailwindcss.com/).

```js
File: @/lib/dom.js

export function dom(title, image, mode) {
  return `
        <html>
            <head>
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
                />
                <link 
                    rel="stylesheet"
                    href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
                />
                <style>
                    body {
                        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                        background-image: radial-gradient(#C1C1C1 0%, transparent 20%), radial-gradient(#C1C1C1 0%, transparent 20%);
                        background-color: #FFFFFF;
                        background-position: 0 0, 10px 10px;
                        background-size: 10px 10px;
                        width: 100%;
                        height: 100%;
                        padding: 0px;
                        margin: 0px;
                    }
                </style>
            </head>
            <body>
                <div class="flex flex-row px-10 items-center justify-center h-screen w-screen ${mode ? 'bg-gray-900' : 'bg-gray-100'}">
                    <div class="px-5 py-0 m-0 w-4/5 h-4/5 flex flex-col">
                        <h5 class="text-2xl text-gray-500">
                            Checkout this article
                        </h5>
                        <h1 class="mt-2 text-4xl sm:text-6xl leading-none font-extrabold tracking-tight ${mode ? 'text-white' : 'text-gray-900'}">
                            ${title}
                        </h1>
                        <div class="flex flex-row items-start mt-auto">
                            <img src="https://rishi.app/static/favicon-image.jpeg" class="rounded-full" style="width: 120px; height: 120px;" />
                            <div class="ml-5 flex flex-col">
                                <h6 class="font-bold text-4xl ${mode ? 'text-gray-300' : 'text-gray-500'}">
                                    Rishi Raj Jain
                                </h6>
                                <p class="text-2xl text-gray-500">
                                    Wanna take everyone along in this web development journey by learning and giving back async
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="p-0 m-0 w-2/5 h-4/5">
                        <img src="${image}" class="object-cover h-full" />
                    </div>
                </div>
            </body>
        </html>
    `
}
```

Dynamic Previews with Next.js, TailwindCSS, Chrome AWS Lambda and Layer0

## Configuring your Svelte app for Layer0

This guide assumes that you're using Webpack with Svelte.

Find the GitHub Repo containing the entire setup at [layer0-docs/layer0-svelte-example](https://github.com/layer0-docs/layer0-svelte-example)

Deployed [link](https://rishi-raj-jain-svelte-default.layer0.link)

## [Optional] Svelte template with Webpack
To create a new project based on this template using degit:

```bash
npx degit sveltejs/template-webpack svelte-app
cd svelte-app
npm install
```

## Installation
To install the Layer0 CLI run:
```bash
npm i -g @layer0/cli
```

## Initialize your project
In the root directory of your project run:

```bash
0 init
```
This will automatically update your **package.json** and add all of the required Layer0 dependencies and files to your project. These include:

- The @layer0/core package - Allows you to declare routes and deploy your application on Layer0

- The @layer0/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed

-  layer0.config.js - A configuration file for Layer0

- routes.js - A default routes file that sends all requests to Svelte.

## Adding Layer0 Service Worker
To add service worker to your Svelte app, run the following in the root folder of your project:

```bash
npm i process register-service-worker workbox-webpack-plugin
```

Create **service-worker.js** at the root of your project with the following:
```js
import { skipWaiting, clientsClaim } from 'workbox-core'
import { precacheAndRoute } from 'workbox-precaching'
import { Prefetcher } from '@layer0/prefetch/sw'

skipWaiting()
clientsClaim()
precacheAndRoute(self.__WB_MANIFEST || [])

new Prefetcher().route()
```

To register the service worker, first create **registerServiceWorker.js** in the src folder:
```js
/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`/service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}
```

and to include the service worker in the app, edit **main.js** (in the src folder) as follows:
```js
import './global.css'
import App from './App.svelte'
+ import './registerServiceWorker'

const app = new App({
  target: document.body,
  props: {
    name: 'world',
  },
})

export default app
```

Now, in **webpack.config.js** at the root of your project with the following config:
```diff
+ const { InjectManifest } = require("workbox-webpack-plugin");
+ const webpack = require('webpack')
....rest of the config
  plugins: [
    + new webpack.ProvidePlugin({
    +   process: 'process/browser',
    + }),
    + new InjectManifest({
    +   swSrc: "./service-worker.js",
    + })
    ...rest of plugins
  ]
```

## Configure the routes
Next you'll need to configure Layer0 routing in the **routes.js** file. Replace the **routes.js** file that was created during **layer0 init** with the following:
```js
const { Router } = require('@layer0/core/router')

module.exports = new Router()
  // Send requests to static assets in the build output folder `public`
  .static('public')

  // Send everything else to the App Shell
  .fallback(({ appShell }) => {
    appShell('public/index.html')
  })
```

The example above assumes you're using Svelte as a single page app. It routes the static assets (JavaScript, CSS, and Images) in the production build folder **public** and maps all other requests to the app shell in **public/index.html**.

## Run the Svelte app locally on Layer0

Create a production build of your app by running the following in your project's root directory:

```bash
npm run build
```

Run layer0 on your local machine:

```bash
0 dev
```

Load the site: <a target="_blank" href="http://localhost:3000">http://localhost:3000</a>

## Deploying
Create a Layer0 production build of your app by running the following in your project's root directory:

```bash
0 build && 0 run -p
```

Next, deploy the build to layer0 by running the following in your project's root directory:
```bash
0 deploy
```

Svelte, Service Worker and Layer0

This guide describes how to configure A/B Testing with Layer0 and Google Optimize Server Side Experiment & deploy your Next SPA to Layer0. Clone the repo [nextjs-layer0-google-server-side-experiment-2](https://github.com/rishi-raj-jain/nextjs-layer0-google-server-side-experiment-2) to get the entire setup.

## Set up Google Analytics (Universal Analytics)

Follow Google's official guide for creating [Analytics for a website (Universal Analytics)](https://support.google.com/analytics/answer/10269537?hl=en)

## Set up Google Optimize

1\. To get started, login to your google optimize, and click on **Create account**.

![](https://a.storyblok.com/f/117912/3840x658/afc50d99d5/step-1.png)

2\. Input an **account name**, and click on **Next**

![](https://a.storyblok.com/f/117912/1562x1882/b9024cd715/step-2.png)

3\. Input a **Container name**, and click on **Create**

![](https://a.storyblok.com/f/117912/1566x984/fd4e183938/step-3.png)

4\. To start creating an experience, Input an **experience name**, the url of website to A/B Test upon, and click on **Create** (By default **A/B test** is selected as the experience type)

![](https://a.storyblok.com/f/117912/1562x1878/2b44a7491e/step-4.png)

5\. Scroll down, and click on **Link to Analytics** to link the created Google Analytics property.

![](https://a.storyblok.com/f/117912/3840x722/0c2c8ad1b8/step-5.png)

6\. Select the Google Analytics property you want to link with, and click on **Link**

![](https://a.storyblok.com/f/117912/1602x1436/369831577e/step-6.png)

7\. Make a note of the **Experiment ID**.

![](https://a.storyblok.com/f/117912/3218x944/cdd26c2953/step-7.png)

8\. Before we run an server-side experiment, we need to create a variant, so click on **Add variant**

![](https://a.storyblok.com/f/117912/3840x1106/48fe03cdb6/step-8.png)

9\. Input the desired **Variant name** (can be anything as the data reported is not matched with the Variant names, but their indices \[which by default starts with **0**\])

![](https://a.storyblok.com/f/117912/1554x658/a02407bf40/step-9.png)

10\. After you've add the variant, scroll down and delete the URL rule, pre-populated by Google for you.

![](https://a.storyblok.com/f/117912/3136x550/95b86f4557/step-10.png)

11\. Click on **Add URL rule** to start creating your own experiment rule

![](https://a.storyblok.com/f/117912/3194x408/7f94ef0e6c/step-11.png)

12\. Select **equals** as the matching URL rule, and **SERVER_SIDE** as the value for it. Click on **Add** to save the changes.

![](https://a.storyblok.com/f/117912/1876x1232/68e7a25706/step-12.png)

13\. Select the primary objective before you can run the server-side experiment.

![](https://a.storyblok.com/f/117912/3828x924/5bca921ec9/step-13.png)

14\. Click on **Start** to initiate experiment run.

![](https://a.storyblok.com/f/117912/3828x682/8109600e65/step-14.png)

15\. Ignore the **Installation not checked**, as we're posting data to Google Analytics by custom snippet as mentioned in the blog below.

![](https://a.storyblok.com/f/117912/1604x1036/da9bd8aa58/step-15.png)

## Set up Layer0

1.  Follow [this guide](https://docs.layer0.co/guides/next) for deploying a Next.js project with Layer0.
    
2.  Now, we want to create two deployment environments, and configure A/B split test with Layer0 Console. So, let's start by creating two environments,  **default** (initiated by default) and **preview**. To create an environment, click on **New Environment**
    

![](https://a.storyblok.com/f/117912/3840x716/17c8a8a6d3/step-16.png)

1.  Type in your name **environment name**, and click on **CREATE**
    

![](https://a.storyblok.com/f/117912/1516x1196/d359ed45f8/step-17.png)

NOTE: After you're done creating the **preview** environment, deploy the A/B testing versions (one on default, and the other on preview environment) of your website to Layer0.

## Configuring A/B Testing with Layer0

This section will walk you through the steps of configuring A/B testing with Layer0.

1\. To do so, open the desired environment (here **default**) to A/B Test on, and click on **EDIT**

![](https://a.storyblok.com/f/117912/3840x454/e9f1ec1a0e/step-18.png)

2\. Scroll down to **Split Testing**, and click on **Add RULE**

![](https://a.storyblok.com/f/117912/3690x730/b29e7833c1/step-19.png)

3\. Click on **ADD DESTINATION** and assign the desired percentages for your A/B test to both the environments (**current** and **preview**). Optionally, you may add further criterion for configuring the A/B test. Then, click on **APPLY** to save the changes.

![](https://a.storyblok.com/f/117912/3840x1326/975ded3cac/step-20.png)

4\. Click on **ACTIVATE**

![](https://a.storyblok.com/f/117912/3840x1594/00d3dc6466/step-21.png)

5\. Click on **YES, REDPLOY MY SITE NOW** to deploy your changes!

![](https://a.storyblok.com/f/117912/3840x1252/c6ba4700c9/step-22.png)

Now you're all set up with A/B Testing on your website. Open the web url assigned to the Layer0 environment on different clients to experience the A/B testing.

## Set up Next.js

This section will walk you through how to configure your Next.js **_app.js** to report A/B Testing metrics to Google Analytics (which reflects automatically in Google Optimize)

## Set up Next.js to Report A/B Testing Metrics to Google Analytics

To report the A/B testing metrics, we make use of **layer0_destination** cookie sent by Layer0 while serving your app. (Make sure that you've successfully configured A/B Testing on Layer0). These steps assume that you've two environments: **default** (initiated by default) and **preview**.

Run the following command inside your project:
```bash
npm install js-cookie
```
and edit \_app.js as follows:
```js
// File: _app.js

import { useEffect } from 'react'
import Cookies from 'js-cookie'

const GA_TRACKING_ID= '' // Your GA TRACKING ID here
const experimentID= ''  // Your experiment ID here

function addAnalytics(i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
}

// Get variant based on layer0_destination cookie
function getVariant(destination) {
    // Create your own environments' map here
    let variantMap = {
    default: 0, // variant codes are indexed from 0 and so on, 0 being for the original
    __layer0__env__preview: 1, // first variant (an environment named `preview`)
    }
    return variantMap[destination]
}

function MyApp({ Component, pageProps }) {

    useEffect(() => {
        // Get the variant index
        let variant = getVariant(Cookies.get('layer0_destination'))
        // Report it to Google Analytics
        addAnalytics(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga')
        ga('create', GA_TRACKING_ID, 'auto')
        ga('set', 'exp', `${experimentID}.${variant}`)
        ga('send', 'pageview')
    }, []);

    return <Component {...pageProps} />
}
```
## Conclusion

In this tutorial, we learned how to initiate A/B Testing with Google Optimize, configure A/B testing on Layer0, and integrate the analytics with google optimize, Next.js and Layer0 to start serving and visualizing the server-side experiment.

A/B testing using Layer0 Edge Split Testing with Google Optimize Server Side framework

While Vue users [await release of Workbox 5](https://github.com/vuejs/vue-cli/issues/5119), I crawled the entire internet for solutions to integrating Service Worker with Vue 2 and Vue 3. By actually trying different configurations, I've finally laid out the exact steps for you to rightly configure Service Worker with your Vue app.

To add service worker (app created with **vue create project-name**), run the following in your project:

```bash
npm install register-service-worker workbox-webpack-plugin
```

Create **service-worker.js** at the root of your project with the following:
```js
// Insert your service worker code here
```

To register the service worker, first create **registerServiceWorker.js** in the **src** folder:
```js
/* eslint-disable no-console */
import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}
```

and to include the service worker in the app, edit **main.js** (in the **src** folder) as follows:
```js
import { createApp } from 'vue'
import App from './App.vue'
+ import './registerServiceWorker'
createApp(App).mount('#app')
```

Now, create **vue.config.js** at the root of your project with the following config:
```js
const { InjectManifest } = require("workbox-webpack-plugin")
const config = {}
if (process.env.NODE_ENV === "production") {
  config["configureWebpack"] = {
    plugins: [
      new InjectManifest({
        swSrc: "./service-worker.js",
      }),
    ],
  }
}

module.exports = config
```

You're good to go ✨, now create a build of your app (**npm run build**) and celebrate! 🎉

Enabling Service Worker with Vue 2 and Vue 3

One of my todo items with React apps was having performance-first dynamic comments and likes system for static websites. Why? Because it brings the capabilities of going beyond content and add functionalities which invite **user engagement**.

### Both [Cusdis](https://cusdis.com/) and [Disqus](https://disqus.com/) are not performance-friendly as they highly affect [Cumulative Layout Shift (CLS)](https://web.dev/cls/).

So I set out on creating the system with [Firebase](https://firebase.google.com/), [TailwindCSS](https://tailwindcss.com/) and [React](https://reactjs.org/). While TailwindCSS is not a compulsion, it's my go to library. Let's get started

## Setting Up Firebase

1.  Install Firebase (Client Side) with the following command:
```bash
npm install firebase // yarn add firebase
```
2.  Create **firebase.js** with the following configuration:
```js
// File: @/lib/firebase.js
        
import 'firebase/firestore'
import firebase from 'firebase/app'

// More about firebase config on https://firebase.google.com/docs/web/setup#config-object
var firebaseConfig = {
  apiKey: '',
  authDomain: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
} else {
  firebase.app()
}
        
export const firestore = firebase.firestore()
export default firebase
```

## Creating Like Component

1.  Create the **like.js** file:
```js
// File: components/blog/like.js
import { firestore } from '@/lib/firebase'
```
2.  Add the **getLikes** function which takes in the slug of the blog page, and a callback function if needed.
```js
export const getLikes = (slug, callBackFunction) => {
  firestore
    .collection('likes')
    .doc(slug)
    .get()
    .then((doc) => {
      if (doc.exists) {
        callBackFunction(Object.keys(doc.data()).length)
      }
    })
    .catch((err) => {
      console.error(err)
    })
}
```
3.  Add the **postLike** function which takes in the slug of the blog page, and a callback function if needed.
```js
export const postLike = (slug, callBackFunction) => {
  fetch('https://api.ipify.org/?format=json', {
    method: 'GET',
  })
    .then((res) => res.json())
    .then((res) => {
      firestore
        .collection('likes')
        .doc(slug)
        .set(
          {
            [res['ip']]: null,
          },
          { merge: true }
        )
        .then(callBackFunction)
    })
    .catch((err) => {
      console.error(err)
    })
}
```

## Creating Comment Component

1.  Create the **comment.js** file:
```js
// File: components/blog/comments.js
      
import { useState } from 'react'
import firebase, { firestore } from '@/lib/firebase'
```
    
2.  Adding the **getComments** function which takes in the slug of the blog page, and a callback function if needed.
```js
export const getComments = (slug, callBackFunction) => {
  firestore
    .collection('comments')
    .get()
    .then((snapshot) => {
      const posts = snapshot.docs
        .map((doc) => doc.data())
        .filter((doc) => doc.slug === slug)
        .map((doc) => {
          return { id: doc.id, ...doc }
        })
      callBackFunction(posts)
    })
    .catch((err) => {
      console.log(err)
    })
}
```

3.  Adding the **writeComment** function which takes in the slug of the blog page, and a callback function if needed.
```js
export const writeComment = (name, slug, content, email, callBackFunction) => {
  let temp = {
    name,
    slug,
    content,
    time: firebase.firestore.Timestamp.fromDate(new Date()),
  }
  if (email.length > 0) temp['email'] = email
  firestore
    .collection('comments')
    .add(temp)
    .then(() => {
      callBackFunction()
    })
    .catch((err) => {
      console.error(err)
    })
}
```

4.  Creating the **LoadComments** function which takes in the set of the comments to display
```js
export const LoadComments = ({ comments }) => {
  return comments
    .sort((a, b) =>
      a.time.toDate().getTime() > b.time.toDate().getTime() ? -1 : 1
    )
    .map((item) => (
      <div
        key={item.time.seconds}
        className="border dark:border-gray-500 rounded p-5 w-full mt-5 flex flex-col"
      >
        <span className="text-lg text-gray-500 dark:text-gray-300 font-medium">
          {item.name} &middot; {item.time.toDate().toDateString()}
        </span>
        <span className="mt-3 text-md text-gray-500 dark:text-gray-300">
          {item.content}
        </span>
      </div>
    ))
}
```
    
5.  Creating the **WriteComment** component which takes in the slug of the blog page, and setComments for setting the new set of comments to be displayed.
```js
const WriteComment = ({ slug, setComments }) => {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [comment, setComment] = useState('')

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        writeComment(name, slug, comment, email, () =>
          getComments(slug, setComments)
        )
        setName('')
        setEmail('')
        setComment('')
      }}
      className="mt-10 flex flex-col w-full"
    >
      <h1 className="font-semibold text-lg">Write a comment</h1>
      <div className="flex flex-col sm:flex-row sm:space-x-5 items-start">
        <input
          required
          value={name}
          placeholder="Name*"
          onChange={(e) => setName(e.target.value)}
          className="mt-5 w-full sm:w-1/2 appearance-none outline-none ring-0 px-5 py-2 border dark:hover:border-white hover:border-black rounded hover:shadow text-black dark:bg-black dark:text-gray-300 dark:border-gray-500"
        />
        <div className="mt-5 w-full sm:w-1/2 flex flex-col space-y-1">
          <input
            value={email}
            placeholder="Email (Optional)"
            onChange={(e) => setEmail(e.target.value)}
            className="w-full appearance-none outline-none ring-0 px-5 py-2 border dark:hover:border-white hover:border-black rounded hover:shadow text-black dark:bg-black dark:text-gray-300 dark:border-gray-500"
          />
          <span className="text-sm text-gray-400">
            Email will remain confidential.
          </span>
        </div>
      </div>
      <textarea
        required
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        placeholder={'Comment*\nMaximum of 500 characters.'}
        className="mt-5 appearance-none outline-none ring-0 pt-5 px-5 pb-10 border dark:hover:border-white hover:border-black rounded hover:shadow text-black dark:bg-black dark:text-gray-300 dark:border-gray-500"
      />
      <button
        type="submit"
        className="w-[200px] appearance-none mt-5 py-2 px-5 text-center rounded border hover:bg-gray-100 dark:hover:bg-[#28282B] dark:border-gray-500"
      >
        Post a comment
      </button>
    </form>
  )
}

export default WriteComment
```    

## Creating Dynamic Blog Component

Load the components in the dynamic blog **\[slug\].js** file:
```js
import WriteComment, {
  getComments,
  LoadComments,
} from '@/components/blog/comments'

export default function Post({ post }) {
  const [comments, setComments] = useState([])
  return <>
    <WriteComment setComments={setComments} slug={post.slug} />
    <div className="mt-10 pt-10 w-full border-t dark:border-gray-500">
      <button
        onClick={() => getComments(post.slug, setComments)}
        className="w-[200px] appearance-none py-2 px-5 text-center rounded border hover:bg-gray-100 dark:hover:bg-[#28282B]   dark:border-gray-500"
      >
        Load Comments
      </button>
    </div>
    <LoadComments comments={comments} />
  </>
}
```

## Example

Well, just below this line you see the components in action! The source code is available [here](https://github.com/rishi-raj-jain/rishi.app/blob/master/components/blog/comments.js).

How To Build Your Own Likes and Comments System With Firebase and React

I've been writing since 13 March, 2020 ✨, mostly about web development and design. 🌐

Coming in from JSWORLD Conference? →

Blogs

I've been writing since 13 March, 2020 ✨, mostly about web development and design. 🌐

Recommended Posts