View Engines
Configure a template engine like EJS or Pug to generate HTML.
Syntax
app.set('view engine', 'ejs')A view engine turns template files into HTML, injecting your data. Popular choices are EJS (HTML with embedded JavaScript) and Pug (indentation-based).
Install one (npm install ejs), then tell Express to use it with app.set(). By default, templates live in a views folder.
Example
app.set('view engine', 'ejs');
app.set('views', './views');
// views/hello.ejs contains:
// <h1>Hello, <%= name %>!</h1>
app.get('/', (req, res) => {
res.render('hello', { name: 'Learner' });
});When to use it
- A server-rendered blog uses EJS as its view engine, letting each article template loop over post data injected by the route handler.
- A team configures Handlebars as the Express view engine so designers can edit .hbs templates without touching route logic.
- A developer sets app.set('view engine', 'pug') to enable Pug templates that compile to HTML and are sent to the browser.
More examples
Configure EJS view engine
Sets EJS as the view engine and renders views/index.ejs, passing title and user as template variables.
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.set('views', './views'); // default, shown explicitly
app.get('/', (req, res) => {
res.render('index', { title: 'Home', user: 'Alice' });
});
app.listen(3000);Pug view engine setup
Configures Pug and renders views/about.pug, injecting dynamic data into the indentation-based template.
const express = require('express');
const app = express();
app.set('view engine', 'pug');
app.get('/about', (req, res) => {
res.render('about', { heading: 'About Us', year: new Date().getFullYear() });
});
app.listen(3000);Custom views directory
Overrides the default views directory to templates/ so Express looks for templates/dashboard.ejs.
const path = require('path');
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'templates'));
app.get('/dashboard', (req, res) => {
res.render('dashboard', { stats: { users: 120, posts: 45 } });
});
app.listen(3000);
Discussion