Skip to main content

How to Display Flash Messages in EJS using Node.js and Express

Displaying Flash Messages in EJS with Node.js and Express

Flash messages are a great way to give users quick feedback — like "Login successful!" or "Please enter all fields!". In this guide, you’ll learn how to implement them using:

  • express-session
  • connect-flash
  • EJS templating

📦 Step 1: Install Required Packages

npm install express express-session connect-flash ejs

⚙️ Step 2: Setup Express App and Middleware


const express = require('express');
const session = require('express-session');
const flash = require('connect-flash');
const app = express();

// Set view engine
app.set('view engine', 'ejs');

// Middleware
app.use(express.urlencoded({ extended: true }));

app.use(session({
  secret: 'yourSecretKey',
  resave: false,
  saveUninitialized: true
}));

app.use(flash());

// Make flash messages available to all views
app.use((req, res, next) => {
  res.locals.success_msg = req.flash('success_msg');
  res.locals.error_msg = req.flash('error_msg');
  next();
});

📄 Step 3: Define Routes and Use Flash


app.get('/', (req, res) => {
  res.render('index');
});

app.post('/submit', (req, res) => {
  const name = req.body.name;

  if (!name) {
    req.flash('error_msg', 'Name is required!');
    return res.redirect('/');
  }

  req.flash('success_msg', `Hello, ${name}!`);
  res.redirect('/');
});

🖼️ Step 4: Display Messages in EJS

Inside your views/index.ejs file:


<!DOCTYPE html>
<html>
<head>
  <title>Flash Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">

    <% if (success_msg) { %>
      <div class="alert alert-success"><%= success_msg %></div>
    <% } %>

    <% if (error_msg) { %>
      <div class="alert alert-danger"><%= error_msg %></div>
    <% } %>

    <form method="POST" action="/submit">
      <input type="text" name="name" placeholder="Enter your name" class="form-control mb-2">
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

  </div>
</body>
</html>

🚀 Done!

You’ve now added flash message support to your Express + EJS app. You can expand this for login/logout, form validation, or any other user interaction.

Labels:

Comments

Post a Comment

Popular posts from this blog

Realtime Device Tracker using Node.js, Socket.IO & Leaflet

Realtime Device Tracker using Node.js, Socket.IO & Leaflet In this tutorial, you’ll learn how to build a realtime location tracking application that uses the browser’s GPS, Socket.IO for live communication, and Leaflet.js to display users on a map. 🚀 Project Overview Backend: Node.js, Express.js, Socket.IO Frontend: HTML, Leaflet.js, Socket.IO client Features: Live GPS tracking, multi-user map, disconnect cleanup 📁 Folder Structure project-root/ ├── app.js ├── package.json ├── src/ │ ├── public/ │ │ ├── css/ │ │ │ └── style.css │ │ └── js/ │ │ └── script.js │ ├── routes/ │ │ └── routers.js │ ├── socket/ │ │ └── socketHandler.js │ └── views/ │ └── index.ejs 🧠 How It Works Each user shares their location using the browser's navigator.geolocation API. Location is sent to the server via Socket.IO . The server broadcasts each user’s position to all clien...
Post a Comment
Read more

How to Send Emails in Node.js using Nodemailer and Ethereal

How to Send Email in Node.js using Nodemailer Email functionality is essential in modern web applications. Whether you're sending confirmation emails, password resets, or notifications, Node.js with Nodemailer makes this simple. In this blog, we'll walk through setting up email sending using Node.js , Express , and Ethereal Email for testing. 🧾 Prerequisites Node.js installed Basic knowledge of Express.js Internet connection 📁 Project Structure project-folder/ ├── index.js ├── .env ├── package.json └── app/ └── controller/ └── emailSendController.js 📦 Step 1: Install Dependencies npm init -y npm install express nodemailer dotenv npm install --save-dev nodemon 🔁 Configure nodemon (Optional but Recommended) Update your package.json with a custom start script: "scripts": { "start": "nodemon index.js" } 🔐 Step 2: Create a .env File Create a .env file a...
Post a Comment
Read more