Template Engines & Views

// server.mjs
import { fileURLToPath } from 'node:url';
import path from 'node:path';
import { promisify } from 'node:util';
import express from 'express';

const here = path.dirname(fileURLToPath(import.meta.url));
const app = express();

app.set('views', path.join(here, 'views'));
app.set('view engine', 'ejs');
app.locals.siteName = 'Bookshelf';

const books = [
  { id: 1, title: 'Dune', author: 'Frank Herbert', note: '<b>classic</b>' },
  { id: 2, title: 'Hyperion', author: 'Dan Simmons', note: '' },
];

// per-request locals visible to every template
app.use((req, res, next) => {
  res.locals.currentPath = req.path;
  res.locals.user = null; // a real application sets this from the session
  next();
});

app.get('/', (req, res) => {
  res.render('books/list', { title: 'All books', books });
});

// app.render has no response: useful for e-mail bodies, exports and tests
const render = promisify(app.render.bind(app));
app.get('/preview/:id', async (req, res) => {
  const book = books.find((b) => b.id === Number(req.params.id));
  if (!book) {
    return res.status(404).render('error', { title: 'Not found', message: 'No such book' });
  }
  const html = await render('books/card', { book });
  res.type('html').send(html);
});

// error-handling middleware: four arguments
app.use((err, req, res, next) => {
  if (res.headersSent) {
    return next(err);
  }
  res.status(err.status ?? 500).render('error', {
    title: 'Something went wrong',
    message: process.env.NODE_ENV === 'production' ? 'Unexpected error' : err.message,
  });
});

app.listen(3000, () => console.log('http://localhost:3000'));

<!-- views/partials/header.ejs -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title><%= title %> - <%= siteName %></title>
</head>
<body>
  <nav>
    <a href="/" class="<%= currentPath === '/' ? 'active' : '' %>">Books</a>
    <% if (user) { %><span>Signed in as <%= user.name %></span><% } %>
  </nav>

<!-- views/partials/footer.ejs -->
  <footer><small><%= siteName %></small></footer>
</body>
</html>

<!-- views/books/card.ejs -->
<article>
  <h2><%= book.title %></h2>
  <p>by <%= book.author %></p>
  <% if (book.note) { %><p><%= book.note %></p><% } %>
</article>

<!-- views/books/list.ejs -->
<%- include('../partials/header') %>
<main>
  <h1><%= title %></h1>
  <% if (books.length === 0) { %>
    <p>The shelf is empty.</p>
  <% } else { %>
    <ul>
      <% for (const book of books) { %>
        <li><%- include('card', { book }) %></li>
      <% } %>
    </ul>
  <% } %>
</main>
<%- include('../partials/footer') %>

<!-- views/error.ejs -->
<%- include('partials/header') %>
<main>
  <h1><%= title %></h1>
  <p><%= message %></p>
</main>
<%- include('partials/footer') %>

// engines.mjs - one registration per engine; pick the one you use
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import express from 'express';

const here = path.dirname(fileURLToPath(import.meta.url));
const app = express();
app.set('views', path.join(here, 'views'));

// 1. EJS: install `ejs`, nothing else to register
app.set('view engine', 'ejs');

// 2. Pug: install `pug`, nothing else to register
// app.set('view engine', 'pug');

// 3. Handlebars: the engine function comes from express-handlebars
// const { engine } = await import('express-handlebars');
// app.engine('hbs', engine({
//   extname: '.hbs',
//   layoutsDir: path.join(here, 'views/layouts'),
//   partialsDir: path.join(here, 'views/partials'),
//   defaultLayout: 'main',
// }));
// app.set('view engine', 'hbs');

// 4. Nunjucks: configure() can attach itself to the app
// const { default: nunjucks } = await import('nunjucks');
// nunjucks.configure(path.join(here, 'views'), { autoescape: true, express: app, noCache: process.env.NODE_ENV !== 'production' });
// app.set('view engine', 'njk');

// views/books/list.pug - extends gives layout inheritance
extends ../layout
block content
  h1= title
  if books.length === 0
    p The shelf is empty.
  else
    ul
      each book in books
        li
          h2= book.title
          p by #{book.author}
          if book.note
            p= book.note

{{!-- views/books/list.hbs - rendered inside views/layouts/main.hbs through {{{body}}} --}}
<h1>{{title}}</h1>
{{#if books.length}}
  <ul>
    {{#each books}}
      <li>{{> bookCard this}}</li>
    {{/each}}
  </ul>
{{else}}
  <p>The shelf is empty.</p>
{{/if}}

{# views/books/list.njk - extends and block, like Pug but in HTML syntax #}
{% extends "layout.njk" %}
{% block content %}
  <h1>{{ title }}</h1>
  {% for book in books %}
    <article><h2>{{ book.title }}</h2><p>by {{ book.author }}</p></article>
  {% else %}
    <p>The shelf is empty.</p>
  {% endfor %}
{% endblock %}

// consolidate.mjs
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import express from 'express';
import consolidate from '@ladjs/consolidate';

const here = path.dirname(fileURLToPath(import.meta.url));
const app = express();

// the engine package (here: liquid-wrapper style packages such as "liquid" or "mustache") must be installed too
app.engine('mustache', consolidate.mustache);
app.set('view engine', 'mustache');
app.set('views', path.join(here, 'views'));

app.get('/', (req, res) => {
  res.render('index', { title: 'Bookshelf', books: [{ title: 'Dune' }] });
});

app.listen(3000);

// markdown-ish engine in the spirit of the official "markdown" and "template engine" examples
import { readFile } from 'node:fs/promises';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import express from 'express';

const here = path.dirname(fileURLToPath(import.meta.url));

const escapeHtml = (value) =>
  String(value)
    .replaceAll('&', '&')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#39;');

// {{name}} is escaped, {{{name}}} is trusted HTML
export function simpleEngine(filePath, options, done) {
  readFile(filePath, 'utf8').then(
    (source) => {
      const rendered = source
        .replace(/\{\{\{\s*(\w+)\s*\}\}\}/g, (_m, key) => String(options[key] ?? ''))
        .replace(/\{\{\s*(\w+)\s*\}\}/g, (_m, key) => escapeHtml(options[key] ?? ''));
      done(null, rendered);
    },
    (err) => done(err),
  );
}

const app = express();
app.engine('bk', simpleEngine); // .bk files go through simpleEngine
app.set('views', path.join(here, 'views'));
app.set('view engine', 'bk');

app.get('/', (req, res) => {
  res.render('welcome', { title: 'Bookshelf', intro: '<em>trusted markup</em>', who: req.query.who ?? 'reader' });
});

app.listen(3000);

// view-constructor.mjs - views kept in memory instead of on disk
import express from 'express';

const templates = new Map([
  ['greeting', 'Hello, {{name}}!'],
  ['empty', 'Nothing to show.'],
]);

class MemoryView {
  constructor(name, options) {
    this.name = name;
    this.engine = options.engines['.txt'] ?? null;
    // `path` must be truthy when the view exists, falsy otherwise
    this.path = templates.has(name) ? name : undefined;
  }

  render(options, callback) {
    const source = templates.get(this.name);
    const rendered = source.replace(/\{\{(\w+)\}\}/g, (_m, key) => String(options[key] ?? ''));
    // Express expects the callback asynchronously
    queueMicrotask(() => callback(null, rendered));
  }
}

const app = express();
app.set('view', MemoryView);

app.get('/', (req, res) => {
  res.type('text').render('greeting', { name: 'reader' });
});

app.listen(3000);

// flash.mjs
import { fileURLToPath } from 'node:url';
import path from 'node:path';
import express from 'express';
import session from 'express-session';

const sessionSecret = process.env.SESSION_SECRET;
if (!sessionSecret) {
  throw new Error('SESSION_SECRET must be set');
}

const here = path.dirname(fileURLToPath(import.meta.url));
const app = express();

app.set('views', path.join(here, 'views'));
app.set('view engine', 'ejs');

app.use(express.urlencoded({ extended: false }));
app.use(session({
  secret: sessionSecret,
  resave: false,
  saveUninitialized: false,
  cookie: { httpOnly: true, sameSite: 'lax', secure: process.env.NODE_ENV === 'production' },
}));

// 1. add req.flash(type, message) and move queued messages into res.locals
app.use((req, res, next) => {
  req.flash = (type, message) => {
    req.session.flash ??= [];
    req.session.flash.push({ type, message });
  };
  res.locals.flash = req.session.flash ?? [];
  delete req.session.flash; // consumed: shown by this response only
  next();
});

app.get('/reviews/new', (req, res) => {
  res.render('reviews/new', { title: 'New review' });
});

// 2. post-redirect-get: store the notice, redirect, show it once
app.post('/reviews', (req, res) => {
  const text = String(req.body.text ?? '').trim();
  if (text === '') {
    req.flash('error', 'The review cannot be empty.');
    return res.redirect('/reviews/new');
  }
  req.flash('success', 'Review saved.');
  res.redirect('/reviews/new');
});

app.listen(3000);