Статические файлы

Статические файлы — те, что браузер получает как есть, без обработки на сервере: стили CSS, картинки, шрифты, клиентские скрипты. Писать для каждого файла маршрут не нужно: встроенная middleware express.static() раздаёт целую папку.

Папка public

Создайте в корне проекта папку public/ и в ней файл стилей public/css/style.css:

body {
  max-width: 720px;
  margin: 0 auto;
  font-family: system-ui, sans-serif;
}

Подключение

Добавьте в src/app.js одну строку перед маршрутами:

// src/app.js
app.use(express.static('public'));

Откройте http://localhost:3000/css/style.css — браузер покажет содержимое файла. Имя папки public в адрес не входит: файл public/images/logo.png будет доступен по /images/logo.png.

Как использовать на странице

В HTML пишите адрес от корня сайта, с косой черты в начале:

<link rel="stylesheet" href="/css/style.css">
<img src="/images/logo.png" alt="Логотип блога">

Тогда стили и картинка загрузятся на любой странице блога — и на /posts, и на /posts/2.

Префикс адреса

Если файлы должны открываться по отдельному адресу, укажите его первым аргументом:

// src/app.js
app.use('/static', express.static('public'));

Теперь стили доступны по /static/css/style.css, а по /css/style.css — уже нет.

Абсолютный путь

Путь 'public' считается от папки, из которой запущен Node.js. Если запустить сервер из другого места, файлы не найдутся. Надёжнее строить путь от расположения самого app.js:

// src/app.js
import path from 'node:path';
 
const publicDir = path.join(import.meta.dirname, '..', 'public');
app.use(express.static(publicDir));

import.meta.dirname — папка текущего модуля, здесь src/. Две точки поднимаются на уровень выше, в корень проекта.

Кеширование

Опция maxAge разрешает браузеру хранить файлы у себя и не запрашивать их снова:

// src/app.js
app.use(express.static('public', { maxAge: '1d' }));

Браузер будет брать файлы из своего кеша в течение суток. На время разработки это лучше не включать: правки в CSS не будут видны сразу.

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

Всё, что лежит в public/, доступно любому, кто знает адрес. Не кладите туда файл .env, базу данных, исходный код сервера или загруженные пользователями документы, которые должны быть закрыты. В public/ — только то, что не жалко показать всему интернету.