Building an In-App Bell Notification in React using Novu
Tags: webdev, react, javascript, beginners
Published: 2022-11-24 11:30:00

<a href="https://www.freepik.com/free-vector/push-notifications-concept-illustration_12463949.htm#query=notification%20bell&position=7&from_view=search&track=sph">Cover image by storyset</a> 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](https://novu.co/) 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](https://nodejs.org/en/download/): 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](https://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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ot9eguip5h140aolj1sw.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrijq73zda0kmppkn2sg.png)

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

Remove the unnecessary file and code.

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

- [notificaiton-center](https://docs.novu.co/notification-center/getting-started): 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](https://axios-http.com/docs/intro): 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
```

## 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.

```jsx
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;

```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weooo0if4oxr16wmzcn3.png)

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

## 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. 

```jsx
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;

```

# 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](https://expressjs.com/): 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
```

Here is the code for the `server.js`:

```javascript
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}`));

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

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

Run the React with the below command:
```
npm run start
```

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

![Localhost - Notificaiton by Novu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa83g8vsehmq36m2w2ns.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuu9f20hn8o8ioshfozb.png)


# 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](https://docs.novu.co/notification-center/react-components) 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.