Flash Message in Node.js

In this article, we will discuss the flash message in Node.js with its implementation.

Introduction

When a user is redirected to a certain webpage, developers can display a pop-up message using the connect-flash module in Node.js. For instance, we may like to alert users when they log in and log out of our Node.js showcase application. The connect-flash module allows us to use flash messages in Node.js apps.

Prerequisites:

Before getting started with the development of our demo app, let's see what the prerequisites are-

• Node.js and NPM installed
• Fundamentals of NodeJS and its modules

Initialize the application

The first step would be creating package.json to initialize the project. For that, run the below command:

Install dependencies

In order to implement flash messages in Node.js app with connect-flash module, we need to install the required dependencies using the command.

• Express: It is required by the library connect-flash to run.
• Express-session: It creates a session whenever a message is flashed so that the user can be redirected to a particular page.

Setting up index.js

Now, move on to the code section and take the index.js file name. It can have whatever name we choose. After that, open the index.js file and use the code below to import modules.

Now, it is time to get our hands on the logical part and implement it. Write the code in index.js file as shown below.

Output:

Explanation:

• After importing the modules, specify the port in which our demo application will launch.
• Establish a session-secret to encrypt our private data.
• By selecting SaveUninitialized, the browser will not use empty sessions. At this point, use the app to invoke the connect-flash module.employ(flash()).

Later define routes:

• / is used to display the message that has been specified, and then reroute the user to the / display-message route.
• The web page's specific message can be shown by using the /display-message property.

Run the application:

Once the development phase is complete, use the following command to launch the application and check its functionality.

The following output will be displayed in the browser once it is routed to the /display-message.

Display Flash Messages on the View File

Now, we are going to show flash messages on the view file. We must utilize the ejs view engine for this. Use the command listed below to install ejs.

Open index.js and add below code:

Make the display.ejs file, and views the folder in the application's root folder. Now, use the code below to render the view template (display.ejs) in the display-message route.

Once the process is completed, add the line below to views/index.js.

We're going to use Bootstrap CSS to make the Flash message look nice. Use the code below and include the bootstrap CSS file in the view template.

Launch the browser at http://localhost:3001/ and restart the node server. The output will look somewhat like this.