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-sessionconnect-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.
Comments
Post a Comment