Pug и Express

До сих пор Pug работал при сборке: скрипт один раз создавал HTML-файлы. На сервере всё иначе — Express (популярный веб-фреймворк для Node.js) собирает страницу из шаблона заново при каждом запросе и может подставить свежие данные, например из базы. Сам Express подробно разобран в курсе Express раздела JavaScript; здесь — только то, что связывает его с Pug.

Установка

Создайте новый проект и установите Express вместе с Pug:

mkdir cafe-server
cd cafe-server
npm init -y
npm pkg set type=module
npm install express pug

Урок рассчитан на Express 5 — текущую версию, которую ставит эта команда.

Сервер

Создайте файл src/server.js:

// src/server.js
import express from "express";
 
const app = express();
app.set("view engine", "pug");
 
const menu = [
  { name: "Эспрессо", price: 2 },
  { name: "Капучино", price: 3 },
];
 
app.get("/", (req, res) => {
  res.render("index", { title: "Кофейня «Утро»", menu });
});
 
app.listen(3000, () => {
  console.log("Сервер запущен: http://localhost:3000");
});

Строка app.set("view engine", "pug") говорит Express, что шаблоны написаны на Pug. res.render() находит шаблон по имени без расширения, передаёт ему объект с данными и отправляет готовый HTML в ответ.

Шаблон

Шаблоны Express ищет в папке views/ в корне проекта. Создайте views/index.pug:

doctype html
html(lang="ru")
  head
    meta(charset="utf-8")
    title= title
  body
    h1= title
    ul
      each item in menu
        li #{item.name} — $#{item.price}

Поля объекта из res.render() стали переменными title и menu, как раньше данные из build.js.

Запуск

node src/server.js

Откройте http://localhost:3000 — появятся заголовок и список напитков. Браузер получит такой HTML:

<!DOCTYPE html><html lang="ru"><head><meta charset="utf-8"><title>Кофейня «Утро»</title></head><body><h1>Кофейня «Утро»</h1><ul><li>Эспрессо — $2</li><li>Капучино — $3</li></ul></body></html>

Express не включает pretty, поэтому HTML пришёл одной строкой — так страница меньше весит. Посмотреть код удобнее в инструментах разработчика браузера: они показывают его с отступами.

Макеты и миксины на сервере

Всё из прошлых уроков работает и здесь: положите layout.pug, mixins.pug и папку includes/ в views/, а страницы начинайте с extends layout.pug. Пути в extends и include по-прежнему отсчитываются от текущего файла.

Частая ошибка

Вставлять через != или !{...} то, что прислали посетители: имя из формы, текст отзыва. На сервере такие данные приходят постоянно, и любая вставка без экранирования открывает дорогу XSS-атаке. Выводите пользовательские данные только через = и #{...}.