Template Engine in Express.js

What is a Template Engine?
A template engine in Express.js allows you to generate dynamic HTML pages.
Instead of writing plain HTML, you can insert variables, loops, and conditions directly in your templates. This makes it easier to build web pages that display data from your server.

A template engine is a tool that lets you create HTML pages with dynamic content using placeholders and logic.

How Template Engines Work

1. The server receives a request.
2. Express renders a template file (like .ejs, .pug, or .hbs).
3. The placeholders inside the template are replaced with real data.
4. The final HTML page is sent to the client.

Common Template Engines for Express

1. EJS (Embedded JavaScript)

• EJS (Embedded JavaScript)
• Looks similar to normal HTML.
• Uses <%= %> for embedding JavaScript variables.
  Example: <h1>Hello <%= name %></h1>

Express setup:

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

2. Pug (formerly Jade)

• Uses indentation instead of HTML tags.
• Cleaner and shorter syntax.
• Example:
  h1 Hello #{name}

Express setup:

app.set('view engine', 'pug');

3. Handlebars (hbs)

• Uses {{ }} for placeholders.
• Great for cleaner, logic less templates.
• Example:
  <h1>Hello {{name}}</h1>

Express setup:

app.set('view engine', 'hbs');

Example with Express

const express = require('express');
 const app = express();
 
 app.set('view engine', 'ejs'); // using EJS
 
 app.get('/', (req, res) => {
   res.render('index', { name: 'Sahil' });
 });
 
 app.listen(3000, () => console.log('Server running on port 3000'));

index.ejs contains:

<h1>Welcome <%= name %></h1>

The browser will display:

Welcome Sahil

Summary

• Template engines help create dynamic HTML pages.
• Popular ones in Express.js are EJS, Pug, and Handlebars.
• They allow you to mix HTML with variables and logic easily.