Файлы ресурсов в NodeJS


Давайте теперь научимся отдавать браузеру файлы ресурсов. Под ресурсами понимаются файлы картинок, файлы CSS стилей, файлы клиентских скриптов и так далее.

Давайте рассмотрим работу с ресурсами на примере картинок. Пусть, например, по адресу /page.html мы хотим отдавать HTML файл, а по адресу /image.png - картинку.

Сделаем это:

http.createServer(async (request, response) => {
if (request.url != '/favicon.ico') {
let data;
let type;

if (request.url === '/page.html') {
data = await fs.promises.readFile('page.html', 'utf8');
type = 'text/html';
}

if (request.url === '/image.png') {
data = await fs.promises.readFile('image.png');
type = 'image/png'; // правильно укажем mime-тип
}

response.writeHead(200, {'Content-Type': type});
response.write(data);
response.end();
}
}).listen(3000);

Автоматические запросы браузера
Рассмотрим следующую HTML страницу:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my page</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<p>
my first page on NodeJS
</b>
<img src="img.png">
</body>
</html>
Как вы видите, на данной странице подключается CSS файл, JavaScript файл, а также картинка. Это значит, что когда браузер получит и прочитает HTML код нашей страницы, он автоматически отправит серверу еще 3 запроса для получения указанных файлов.