Файлы ресурсов в 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);

Создайте файл styles.css. Отдайте его по соответствующему запросу. Не забудьте правильно указать тип данных.

Создайте файл script.js. Отдайте его по соответствующему запросу. Не забудьте правильно указать тип данных.

Разместите у себя файл с фавиконкой, назвав его favicon.ico. Уберите в вашем коде условие для блокировки двойного запроса, а вместо этого отдавайте корректную фавиконку.

Автоматические запросы браузера

Рассмотрим следующую 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 запроса для получения указанных файлов.

Скопируйте приведенный код HTML страницы и разместите его в файле. Отдайте этот файл браузеру по соответствующему запросу. Сделайте так, чтобы браузер получил запрошенные им файлы ресурсов, на которые ссылается наша HTML страница.