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

Последнее обновление: 24.11.2023

Рассмотрим, как в Node.js + Express отправлять пользователю статические файлы html. Для работы со статическими файлами в Express определен специальный компонент express.static(), который указывает на каталог с файлами.

Итак, пусть у нас проект будет выглядеть следующим образом:

  • app.js: главный файл приложения

  • node_modules

  • package.json

  • public: папка где будет определен один файл

    • about.html

В папке public будет располагаться файл about.html со следующим содержимым:

<!DOCTYPE html>
<html>
<head>
	<title>О сайте</title>
	<meta charset="utf-8" />
</head>
<body>
	<h1>О сайте</h1>
</body>
<html>

Теперь определим в файле app.js следующий код:

const express = require("express");

const app = express();

app.use(express.static("public"));

app.use("/", function(_, response){
	
	response.send("<h1>Главная страница</h1>");
});

app.listen(3000);

Чтобы встроить компонент express.static в процесс обработки запроса, вызывается функция app.use(). Эта функция позволяет добавлять различные компоненты, которые еще называются middleware, в конвейер обработки запроса:

app.use(express.static("public"));

Причем данный вызов помещается до всех остальных вызовов функции app.get().

В саму же функцию express.static() передается путь к папке со статическими файлами. В данном случае мы указываем относительный путь - к папке "public" внутри текущей папки проекта. При необходимости также можно задать абсолютный путь:

app.use(express.static(__dirname + "/public"));

Здесь специальное выражение __dirname позволяет получить полный путь к папке, к которому далее добавляется путь "/public".

Запустим приложение на выполнение и обратимся в браузере по пути "http://localhost:3000/about.html":

Статические файлы html в Express и Node.js

Следует отметить, что для обращения к файлу мы указываем только имя файла без названия каталога public. Также не следует путать подобное обращение к файлам с действием функции sendFile: в данном случае мы напрямую обращаемся к статическим файлам, а функция sendFile фактически берет содержимое из файла и отсылает его пользователю.

Дополнительно мы можем изменить путь к каталогу статических файлов:

const express = require("express");

const app = express();

app.use("/static", express.static("public"));

app.use("/", function(_, response){
	
	response.send("<h1>Главная страница</h1>");
});

app.listen(3000);

Теперь чтобы обратиться к файлу about.html, необходимо отправить запрос http://localhost:3000/static/about.html.

В заключение стоит отметить, что таким образом мы можем определить различные пути к статическим файлам. Например, у нас файлы html располагаются в однйо папке, стили - в другой, а клиентские скрипты javascript - в третьей:

app.use(express.static("html"));
app.use(express.static("styles"));
app.use(express.static("scripts"));

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850