💡 Understanding Common Code Reuse in Express.js (EJS)

In real-world applications, multiple pages often share the same navigation bar, footer, sidebar, or other repeated UI blocks. Instead of rewriting this code on every page, EJS allows you to include common files and reuse them easily.

This makes your code cleaner, reduces repetition, and simplifies future updates — update once, and all pages reflect the change!

Create the following folder and file structure inside your project:

📁 project-folder
 ┣ 📁 views
 ┃ ┣ 📄 home.ejs
 ┃ ┣ 📄 about.ejs
 ┃ ┣ 📄 contact.ejs
 ┃ ┗ 📁 common
 ┃     ┣ 📄 header.ejs
 ┃     ┗ 📄 footer.ejs
 ┗ 📄 index.js
        

In your main Express file, set EJS as the view engine and render pages normally:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.set('view engine', 'ejs');

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

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

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

app.listen(8080, () => {
    console.log("Server running at http://localhost:8080");
});

Each page includes header.ejs and footer.ejs using the EJS include feature:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.set('view engine', 'ejs');

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

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

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

app.listen(8080, () => {
    console.log("Server running at http://localhost:8080");
});

• 📌 EJS include allows reusing common UI parts across multiple pages.
• 🧩 header.ejs and footer.ejs act as shared components.
• 🔗 home.ejs, about.ejs, and contact.ejs include these common sections.
• 🚀 Updating navigation or footer once updates all pages automatically.
• 🧹 Keeps your project clean, structured, and easy to maintain.