Node JS Express JS Flash Messages Tutorial

In node express js, you can use express-flash and express-session to display flash messages on web pages.

How to Display Flash Messages in Node js Express JS?

Here are steps:

Step 1 – Set Up Express JS

Open your cmd or terminal window and type express --view=ejs MyApp to set up node express JS:

npm install express-generator -g
express --view=ejs MyApp
cd MyApp

Step 2 – Install Flash & Session

Run the following commands on the cmd to install express-flash and express-session:

 npm install    
 npm install express-flash --save
 npm install express-session --save

Step 3 – Import Flash and Session

Edit app.js file and use flash messages to send notifications on web pages:

var flash = require('express-flash');
var session = require('express-session');

app.use(flash());

app.use(session({ 
    secret: '123456cat',
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 60000 }
}))

Step 4 – Set Up Flash Messages in Route

Navigate routers directory and open index.js file, and add the following routes for form render view with flash messages:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Flash Messages in Node Express JS' });
});
//display registration form page
router.get('/register', function(req, res, next){    
    res.render('form', {
        title: 'Flash Messages in Node Express JS',
        name: '',
        email: '',
        password: ''     
    })
})

// validate and save registration
router.post('/post-register', function(req, res, next){ 

   req.flash('success', 'You have successfully signup!');
   res.redirect('/register');
})
module.exports = router;

Step 5 – Display Flash Messages in View

Navigate to views directory and create a form name form.ejs:

<!DOCTYPE html>
<html>
<head>
  <title><%= title %> - Tutsmake.com</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="col-md-6 offset-md-3">
      <h5 class="card-title mb-2 mt-2">Node Js Express Form Submit with Validation</h5>
  <% if (messages.error) { %>
  <p style="color:red"><%- messages.error %></p>
  <% } %>
   
  <% if (messages.success) { %>
      <p style="color:green"><%- messages.success %></p>
  <% } %>
  
  <form action="/post-register" method="post" name="form1">
    <div class="form-group">
      <label for="exampleInputEmail1">Name</label>
      <input type="name" name="name" class="form-control" id="name" aria-describedby="nameHelp" placeholder="Enter name" value="">
    </div>   
    <div class="form-group">
      <label for="exampleInputEmail1">Email</label>
      <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" value="">
    </div>
    <div class="form-group">
      <label for="exampleInputEmail1">Password</label>
      <input type="password" name="password" class="form-control" id="password" aria-describedby="emailHelp" placeholder="*********" value="">
    </div>
    <input type="submit" class="btn btn-primary" value="Submit">
  </form> 
  </div>
</body>
</html>

Step 6 – Test Application

Run the following command to start the development server:

//run the below command

npm start

Test this application using the following URL:

http://127.0.0.1:3000
OR
http://127.0.0.1:3000/register

Conclusion

That’s it; you have learned how to add and show flash messages in node express js application.

Subscribe to Blog via Email