📦 How To Share Common Code in Multiple Pages in Express JS | EJS Template Includes

💡 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:

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

• 📌 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.