How to Use Template Engine in Express: Simple Guide

To use a template engine in Express, first install the engine package (like pug or ejs), then set it with app.set('view engine', 'engineName'). Use res.render('templateName', data) to render templates with dynamic data.

Syntax

Express uses the app.set() method to specify the template engine. The key 'view engine' tells Express which engine to use. Templates are rendered with res.render(), passing the template name and optional data.

• app.set('view engine', 'engineName'): sets the template engine.
• res.render('templateName', data): renders the template with data.

javascript

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

app.get('/', (req, res) => {
  res.render('index', { title: 'Home', message: 'Hello from Express!' });
});

Example

This example shows how to use the pug template engine in Express. It sets up Express, configures pug, and renders a simple page with dynamic title and message.

javascript

import express from 'express';
import path from 'path';

const app = express();

// Set the directory where template files are located
app.set('views', path.join(process.cwd(), 'views'));
// Set Pug as the template engine
app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.render('index', { title: 'Welcome', message: 'Hello from Express with Pug!' });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

Output

Server running on http://localhost:3000

When visiting http://localhost:3000, the browser shows a page with the title "Welcome" and the message "Hello from Express with Pug!".

Common Pitfalls

Common mistakes when using template engines in Express include:

• Not installing the template engine package (e.g., npm install pug).
• Forgetting to set the views directory where templates are stored.
• Using res.send() instead of res.render() to render templates.
• Incorrect template file extension or name mismatch.

javascript

/* Wrong: Using res.send instead of res.render */
app.get('/', (req, res) => {
  res.send('index', { title: 'Oops' }); // This will not render the template
});

/* Right: Use res.render to render templates */
app.get('/', (req, res) => {
  res.render('index', { title: 'Correct' });
});

Quick Reference

Summary tips for using template engines in Express:

• Install the template engine package (e.g., pug, ejs).
• Set the engine with app.set('view engine', 'engineName').
• Set the views folder with app.set('views', 'path_to_templates') if not default.
• Render templates with res.render('templateName', data).
• Keep template files in the views folder with correct extensions.

Key Takeaways

Always install and set the template engine before rendering templates.

Use res.render() to send dynamic HTML from templates.

Set the views directory if your templates are not in the default folder.

Check template file names and extensions carefully to avoid errors.

Common errors include forgetting to install the engine or using res.send() instead of res.render().