Building an In-App Bell Notification in React using Novu

Suraj Vishwakarma - Nov 24 '22 - - Dev Community

Cover image by storyset on Freepik

Introduction

Push notifications are not seen as good practice. They distract you, want your attention or sometimes they are too frequent. But, In-app notifications are more useful and can update you about the application.

Novu is an open-source notification management tool. They provide Email, SMS, Push, and In-App notification. Email and SMS notifications are dependent on providers. They have providers such as Sendinblue for email and Twilio for SMS. There are other providers too.

So, today, we are going to use the In-App notification feature of Novu to setup the following:

  • Creating a trigger in Novu Dashboard
  • Building Bell Icon using Notification Center
  • Initiating trigger in Node using Express

Let's get started.

Prequisitise

Since its a web application project, I hope you know the following:

  • Web Development with HTML, CSS, and JavaScript
  • Basic React

As for the tools, we need to have these tools pre-installed.

  • Node: It provides you with a JavaScript runtime environment. It will help install dependencies and run scripts.

Creating account and Setting up Novu Dahboard

Visit novu.co and click on GET STARTED to create a Novu account. After creating the account, the Novu dashboard will open.

From the Notifications panel, Click on + New to create a notification template. From Create new template, Enter the Notification Name. Select Workflow Editor to add an In-App notification. Drag and drop the In-App steps from Steps to add to the Workflow editor.

Novu - Workflow Editor

Now, Click on the In-App step from the Workflow Editor to open its properties in the right panel. Click on Edit Template from that menu to add message content to the notification. Add your message and you can also add a button to the notification.

Novu - Edit Notificaiton Template

After adding the message content and URL, Click on Create to create the notification. A message will be pop-up with code to initialize the trigger. A trigger in Novu is a function that will start the sending of notifications. Click on Got it to proceed.

Now, its time to write some code.

Bell Icon in React

The project is going to have a frontend in React. In the frontend, we will build our bell icon and its feature using the notification center of Novu. The trigger for initializing the notification has to be in Node. That's why we are going to use ExpressJS for our node server. For exchanging data, we are going to use the API. Now, let's create the project/

Install a React project with the below command in the terminal.



npx create-react-app novu-inapp
Enter fullscreen mode Exit fullscreen mode

Remove the unnecessary file and code.

We are going to need the following dependencies on our frontend:

  • notificaiton-center: This is by Novu to manage the In-App notification. I will also provide us with the UI for the bell and notification panel.

  • axios: This will be helpful in making request to our Node server in Express.

You can install all the above dependencies with the below command:



npm i @novu/notification-center axios
Enter fullscreen mode Exit fullscreen mode

App.js

In App.js, we are going to build our UI and make a request to our backend server for initializing the notification. Here is the code.



import "./App.css";
import { useState } from "react";
import NovuBell from "./component/NovuBell";
import axios from "axios";

function App() {
  const [status, setStatus] = useState(); // status of passed/failed notificaiton

  const sendNotification = async () => {
    await axios
      .post("http://localhost:8000", {
        subscriberId: `${process.env.REACT_APP_SUBSCRIBER_ID}`,
      })
      .then((res) => {
        setStatus(res.status);
      });
  };

  return (
    <div className="App">
      <div className="NavBar">
        <h1>Notificaiton by Novu</h1>
        <NovuBell subscriberId={process.env.REACT_APP_SUBSCRIBER_ID} />
      </div>
      <button onClick={sendNotification}>Send Notification</button>
      {status === 201 && <h1>Notification Sent</h1>}
      {status === 400 && <h1>Notification couldn't sent</h1>}
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

As you can see, we are having a Send Notification button. This will call the sendNotificaiton function. This function will make a call to our server with the subscriberId. A subscriberId is a unique string. Novu is using it to identify the receiver of the notification. In a database, it can be the userId that you can fetch and pass as the parameter. We have implemented this as our environment for our application (You shouldn't do that, I am doing this for testing purposes only).

.env

As the environment variable, we are going to need Novu API and application identifier. You can get it from your Novu Dashboard. Navigate to Setting -> API keys.

Novu - Settings

Create a .env file in the root directory to add the API key and application identifier. Along with this, we are also going to add the subscriberId. This can be any random unique string. 



REACT_APP_NOVU_API=<API KEY>
REACT_APP_NOVU_IDENTIFIER=<APPLICATION IDENTIFIER>
REACT_APP_SUBSCRIBER_ID=<SUBSCRIBER ID>
Enter fullscreen mode Exit fullscreen mode

Notification Component

Now, it's time to create our bell notification. Create a component folder in the src folder. Within it creates a file with the name NovuBell.js

Here is the code for the notification bell. 



import {
  NovuProvider,
  PopoverNotificationCenter,
  NotificationBell,
} from "@novu/notification-center";

function NovuBell({}) {
  return (
    <NovuProvider
      subscriberId={process.env.REACT_APP_SUBSCRIBER_ID}
      applicationIdentifier={process.env.REACT_APP_NOVU_IDENTIFIER}
    >
      <PopoverNotificationCenter>
        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
      </PopoverNotificationCenter>
    </NovuProvider>
  );
}

export default NovuBell;
Enter fullscreen mode Exit fullscreen mode

server.js

Now it's time to create our server. In the root directory create a file with the name server.js.

We are going to need the following dependencies for our node server:

  • express: It's a framework to create our backend.

  • @novu/node: It is a library for accessing the feature of novu in node. We are going to use this for initializing the notification.

  • cors: For handling cors-related errors.

  • [dotenv]: For accessing the environment variable in our node server.

You can install all the above dependencies with the below command:



npm i express cors dotenv
Enter fullscreen mode Exit fullscreen mode

Here is the code for the server.js:



const { Novu } = require("@novu/node");
const express = require("express");
const cors = require("cors");
require("dotenv").config();

const app = express();

const novu = new Novu(process.env.REACT_APP_NOVU_API);

app.use(cors());
app.use(express.json({ extended: false }));

app.post("/", async (req, res) => {
  try {
    const { status } = await novu.trigger("bell-notification", {
      to: {
        subscriberId: req.body.subscriberId,
      },
      payload: {},
    });
    res.send(status);
  } catch (err) {
    console.log(err);
  }
});

const PORT = process.env.PORT || 8000;

app.listen(PORT, () => console.log(`Server started at ${PORT}`));
Enter fullscreen mode Exit fullscreen mode

In the try-catch block, we are initiating the bell-notification template. It is being initiated by novu.trigger. In to, we are sending the subscriberId of the receiver. You can pass more data such as name in the payload.

We are sending back the status of the call such as 401 and 200 to our frontend. On this status basis, we are going the decide whether the notification is successfully sent or not.

Testing the Applicaiton

Run the server with the below command:



node server.js
Enter fullscreen mode Exit fullscreen mode

It should print "Server started at 8000" in the console.

Run the React with the below command:



npm run start
Enter fullscreen mode Exit fullscreen mode

It will run the React at http://localhost:3000/. It should look like this:

Localhost - Notificaiton by Novu

Now, if you click on the Send Notificaiton button a notification will be sent. As our fronted will receive the notification. The bell icon will change to show the notification. Click on the bell icon to access the notification.

Bell Notificaiton

Conclusion

We have built the notification bell using the Novu. You can add a button to this notification to redirect the user once they click on it. You might encounter a few warnings in the console while running React. It is caused by the '@novu/notification-center` library. I tried to solve it but couldn't find any solution. If you find something, do mention it in the comment.

Novu can provide you with many interesting features of notification. You can read the Notification Center for React Component from their docs for adding more features to the existing project.

I hope this guide has provided you with useful information about Novu and its In-App notification. Thanks for reading the blog post.

Image
Organizando Suas Rotas de Forma Modular e Automática no Lithe

php, webdev, lithe, routing
Image
The Diamond Wire Saw: A Revolution in Cutting And Shaping Technology
Image
Enhancing Customer Interaction with Chatra.io: My Experience ✨

react, livechat, nextjs
Image
Macam-Macam Provider Slots Online Di Situs Judi Online Dapat dipercaya
Image
The Final Word Guide to Diamond Wire Saw: A Revolutionary Cutting Tool for Professionals And DIY Enthusiasts
Image
dapatkah kaya dengan main permainan judi slots online?
Image
Aplicando SOLID no NestJS

solidjs, nestjs, typescript, node
Image
【德州撲克與奧馬哈撲克：區別在哪裏？】
Image
HashMap: тайные комнаты, магия и коллизии

java, hashmap, beginners
Image
20 Questions You Need To Ask About L Shaped Triple Bunk Beds Uk Before You Purchase L Shaped Triple Bunk Beds Uk
Image
Learn The Locksmith Truck Key Tricks The Celebs Are Making Use Of
Image
From AI Search to Fact-Based Decisions: Our Strategy Revealed

medium, repost
Image
Why Nobody Cares About Fireplace Electric Stove
Image
Episode 4: Defensive Strategies with Commander Redux

react, webdev, javascript
Image
10 Locations Where You Can Find Volvo Truck Key
Image
Kabar Penting yang Mesti Anda Kenali dalam Situs Judi Online Bisa dipercaya
Image
The Diamond Wire Saw: A Revolution in Cutting And Shaping Technology
Image
10 Meetups Around Scania Truck Key You Should Attend
Image
🔒Zero Trust: Everything You Need to Know About the Cybersecurity Framework

cybersecurity, softwaredevelopment, programming, productivity
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .