The Node.js Connect-flash module is extremely useful for developers whenever a flash message needs to be sent. When a user is redirected to a specific webpage, the connect-flash module in Node.js allows developers to display a pop-up message. For example, in your Node.js demo application, you might want to notify your users when they log in and out. You can accomplish this by utilizing the connect-flash module in your Node.js app.
Flash is a session-specific area used to store messages. Messages are written to the flash and then cleared after the user sees them. Flash is commonly used in conjunction with redirects to ensure that the message is available on the next page to be rendered.
To know more about Node.js & Npm, refer to:
How To Export Data To A CSV File Using Multiple Npm Packages In Node.Js?
Hands-on
In this hands-on, we will have a look at how we can display flash messages on a webpage whenever needed (ie. Based on displaying a success or failure message pop-up to a user). To do so, we will first begin with creating the package.json file and installing the required packages for successful results. Verifying the package installations, we will then proceed further and import the packages into our codebase. Then we will define a port number where our application will run and we will create a session secret to encrypt any personal information. Followed by that, we will define the routes as to where the message is to be displayed on hitting a specific URL. Testing out the same, we will install the ejs view engine, create a template, beautify the message display file, alter the main codebase to accommodate the same, and finally restart the server and test out the execution.
Required installations for the process:
- Node.js: It is a JavaScript runtime environment that executes JavaScript code outside the browsers.
- Connect-flash: The following package allows users to display a pop-up message whenever a user is directed to a specific page on an application.
- Express: It is a Node.js framework required for the execution of the package connect-flash.
- Express-session: It is used to create a session whenever a message is flashed.
- ejs: It is a template language that allows us to create HTML pages using Javascript.
Note: Please ensure that Node.js is properly installed onto the local machine or else it might display multiple errors while following the process.
Create a new directory on your local machine.
Open the newly created directory into a code editor.
Right-click in the left navigation pane and click on New file.
Create a new file with the name package.json.
Right-click in the newly created directory and click on Git Bash Here.
Run the command: npm init
Press yes after selecting the default values.
Verify the configuration setup in the package.json file created above.
To implement flash messages, we need to install the following dependencies as we discussed above.
Run the command: npm install connect-flash express express-session --save
This command will install the connect-flash package, express, and express-session.
Verify the package installations by navigating to the package.json file.
A new package-lock.json file will be created in the directory.
Create a new file with the name index.js.
In the index.js file, import the installed packages using the code below.
Define a port number using the below code on which our application will run.
We will then define a session secret encrypting any information using the below code. Using the last line, we will call the connect-flash module.
We will use the below path for displaying the specified message thereby redirecting the user to the /flash-message path.
The following path will be used for displaying the specific message on the web page.
After adding and combining the entire code set, the combined code looks like as shown in the image below.
Now, run node index.js in cmd to start the server.
Hit the following path on any of the browsers.
On successful execution of the code, you will see the message on the screen as shown in the image below.
Now we will display the flash messages using the view file.
Run the following command to install the ejs view engine.
npm install ejs
Open the index.js file and add the below code in the same file.
Create a view folder in the existing code directory.
Create a file with the name flash.ejs inside the views folder.
Open the flash.ejs file and add the below code in it. This will print the message on the application.
Alter the flash-message route to the following code so that it renders the flash ejs file on hitting the URL.
Adding the above code snippets, the entire code looks like as shown in the image below.
Restart the server using the command:
node index.js
Hit the following URL on any of the browsers.
On success, you will see the message on the screen as shown in the image below.
Let’s beautify the message that is being displayed on the screen. To do so, add the following code to the index.ejs file.
Restart the server using the command:
node index.js
Hit the same URL on any of the browsers.
On success, you will see the beautified message displayed on the screen.
Conclusion
In this hands-on, we had a look at how we can display flash messages on a webpage whenever needed (ie. Based on displaying a success or failure message pop-up to a user). To do so, we first began with creating the package.json file and installing the required packages for successful results. Verifying the package installations, we then proceeded further and imported the packages into our codebase. Then we defined a port number where our application would run and we created a session secret to encrypt any personal information. Followed by that, we defined the routes as to where the message is to be displayed on hitting a specific URL. Testing out the same, we installed the ejs view engine, created a template, beautified the message display file, altered the main codebase to accommodate the same, and finally restarted the server to test out the execution. We will come up with more such use cases in our upcoming blogs.
Meanwhile…
If you are an aspiring Node.js developer and want to explore more about the above topics, here are a few of our blogs for your reference:
- How to create and delete Email Templates on Amazon SES using Node.js and Postman API?
- How to send customized emails by integrating SendGrid with a Node.js application?
- How to connect to MySQL database and run CRUD operations in Node.js?
Stay tuned to get all the updates about our upcoming blogs on the cloud and the latest technologies.
Keep Exploring -> Keep Learning -> Keep Mastering
At Workfall, we strive to provide the best tech and pay opportunities to kickass coders around the world. If you’re looking to work with global clients, build cutting-edge products and make big bucks doing so, give it a shot at workfall.com/partner today!
