Как создать простейший HTTP-сайт на Node.js и Express

Короткий ответ: создайте папку проекта, установите Express, напишите файл server.js, запустите node server.js и откройте http://localhost:3000. Если в браузере появился текст страницы, у вас уже работает минимальный сайт на Node.js

Запрос «как создать простейший http сайт node.js express» обычно задает человек, который слышал, что Node.js подходит для backend-а, но пока не понимает, где начинается сайт: с HTML-файла, с сервера, с маршрута или с команды npm. В Express сайт начинается с приложения, которое слушает порт и отвечает на HTTP-запросы

Создайте папку проекта

mkdir express-simple-site
cd express-simple-site
npm init -y

После npm init -y появится package.json. Он нужен, чтобы проект понимал свои зависимости и команды запуска

Установите Express

npm install express

Express попадет в dependencies, а в папке появится node_modules. Эту папку не нужно редактировать руками: npm скачал туда код пакетов

Напишите минимальный сервер

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

const express = require("express");

const app = express();
const port = 3000;

app.get("/", (request, response) => {
  response.send("<h1>Мой первый сайт на Express</h1><p>Сервер работает</p>");
});

app.listen(port, () => {
  console.log(`Сайт открыт: http://localhost:${port}`);
});

Запустите

node server.js

Откройте в браузере

http://localhost:3000

Если видите заголовок и текст, Express получил запрос браузера и отправил HTML-ответ

Добавьте вторую страницу

В Express страница обычно начинается с маршрута. Добавьте ниже первого app.get

app.get("/about", (request, response) => {
  response.send("<h1>О проекте</h1><p>Это учебная страница</p>");
});

Перезапустите сервер и откройте

http://localhost:3000/about

Теперь у сайта две страницы: главная / и страница /about

Почему сервер нужно перезапускать

Обычный запуск через node server.js не отслеживает изменения файлов. Если вы поменяли код, остановите сервер через Ctrl + C и запустите снова

Для удобства в обучении можно позже подключить nodemon, но в первом уроке полезно вручную почувствовать механику: код изменили, сервер перезапустили, браузер обновили

Добавьте команду npm start

В package.json добавьте скрипт

{
  "scripts": {
    "start": "node server.js"
  }
}

Теперь запускать сайт можно так

npm start

Это привычный формат для Node.js-проектов: пользователь проекта не обязан знать внутреннее имя файла, он запускает стандартную команду

Мини-практика

Создайте третью страницу /contacts и выведите на ней простой HTML. Затем поменяйте порт с 3000 на 3001, перезапустите сервер и проверьте новый адрес

Так вы закрепите две важные вещи: маршрут отвечает за адрес, а порт отвечает за адрес локального сервера

Частые ошибки

Cannot find module express Express не установлен в этой папке. Выполните npm install express в корне проекта

Браузер не открывает localhost Проверьте, запущен ли сервер и не остановили ли вы терминал. Пока процесс не запущен, сайт не отвечает

Порт уже занят Другой сервер уже использует 3000. Поменяйте порт или остановите старый процесс

Открыли server.js как файл в браузере Express-сайт открывается через localhost, а не через двойной клик по server.js

Что почитать дальше по Node.js

Если нужен общий маршрут по теме, откройте рубрику Node.js. Для соседних задач пригодятся эти разборы:

• Как запустить сервер Node.js: простой HTTP-сервер и Express
• Как создать чат-приложение на Node.js: Express и Socket.IO
• Как в Node.js Express отдать файл по ссылке: sendFile и static
• Как достать данные из модуля с базой в Node.js Express