http-server — быстрый локальный сервер для статики

  • 15 мая 2026

Софт

Евгений Шкляр

Открыть HTML-файл двойным кликом — плохая идея. Браузер откроет его по протоколу file://, и сразу начнутся проблемы: не загружаются шрифты, блокируются запросы к API из-за CORS, не работают относительные пути к модулям. Чтобы страница вела себя как в интернете, ей нужен настоящий HTTP-сервер.

http-server — минималистичный статический сервер, который запускается одной командой и не требует настройки.

Установка и запуск

Запустить без установки через npx:

npx http-server

Или установить глобально, чтобы использовать как команду:

npm install -g http-server
http-server

По умолчанию сервер поднимается на порту 8080 и раздаёт файлы из текущей папки. Откройте http://localhost:8080 — и увидите содержимое директории.

Полезные флаги

http-server -p 3000        # другой порт
http-server ./dist         # раздавать из конкретной папки
http-server -o             # сразу открыть браузер
http-server --cors         # включить CORS-заголовки
http-server -c-1           # отключить кеширование (удобно при разработке)
http-server --ssl          # HTTPS (нужны сертификаты)

Попробуйте сами — что происходит в двух режимах

file://
http-server
✗ES-модули (`import/export`) не работают — браузер блокирует по соображениям безопасности
✗fetch() к внешним API блокируется из-за CORS — origin `null` не разрешён
✗Шрифты и шрифтовые иконки могут не загружаться
✗Service Worker недоступен — требует HTTPS или localhost
✓ES-модули работают нормально
✓fetch() работает, CORS-заголовки можно включить флагом --cors
✓Все ресурсы загружаются по HTTP, как в реальном браузере
✓Service Worker работает на localhost
~$ npx http-server ./dist -p 3000 -o

Starting up http-server, serving ./dist

Available on:http://127.0.0.1:3000http://192.168.1.42:3000

Hit CTRL-C to stop the server

Проверить собранный проект

Самый частый сценарий — посмотреть на продакшен-сборку перед деплоем:

npm run build          # собрать в dist/
npx http-server dist   # поднять сервер из dist/

Vite для этого имеет встроенную команду npm run preview, но http-server удобен, когда нужен сервер для любой папки без настроек.

Показать проект по сети

Если к вашему компьютеру подключены устройства в одной сети (например, телефон), сервер автоматически доступен по локальному IP:

http://192.168.1.42:8080

Этот адрес http-server печатает при запуске. Удобно для проверки адаптивности на реальном устройстве.

Что запомнить

http-server — это один npx-вызов, чтобы поднять HTTP-сервер в любой папке. Открывайте HTML-файлы через него, а не двойным кликом — это избавит от непонятных ошибок с модулями, CORS и Service Worker.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники