Зачем нужны локальные серверы

Нельзя полноценно протестировать фронтенд, просто открыв html файл в браузере. Многое может работать по-другому или не работать вообще, например, асинхронные запросы к API. И разумеется для тестирования бэкэнда нужен сервер. При этом использовать живой сервер для активного тестирования неудобно, медленно и небезопасно.

Нативные

Это серверы, встроенные в языковую платформу или в виде отдельных модулей. Как правило их достаточно, чтобы протестировать фронтенд c не самым сложным бэкэнд кодом (например, для отправки данных форм) или чистый фронтенд. Кроме того вы сможете ближе познакомиться с бэкэндом, настройкой конфигов и запуском команд через терминал)

Node.js

Сначала установите саму Ноду (менеджер пакетов npm идет в комплекте). В Ноде нет встроенного сервера, но как всегда есть готовые модули. Для тестирования я использую http-server.

Установите его глобально. Запускается просто командой http-server внутри папки проекта. После чего можно указать точный адрес до html файла в браузере (если это не index в корне).

Про то, как включить поддержку https шифрования читайте в отдельной заметке.

Python

Для сервера на Питоне вам понадобиться установить сам Питон и, скорее всего, фреймворк Джанго.

На windows запускается командой py -3 -m http.server.

PHP

В PHP есть встроенный локальный сервер. Достаточно установить сам php, после чего можно запустить сервер командой php -S localhost:8000.

минусы: медленный (по крайней мере у меня/из коробки), долгая перезагрузка страницы

Java

Хотя значительная часть современных инструментов для фронтенд-разработчиков написана на ноде в виде npm пакетов, вы можете встретить тулзы и на других языках. Например на Джаве написана локальная версия w3c валидатора.

Сборки с бэкэндом

Пригодится, если вам нужно тестировать сайт с более сложным бэкэндом, CMS (например, на Wordpress), но вы не хотите устанавливать и настраивать все вручную.

XAMPP

XAMPP - это набор из сервера Apache с поддержкой PHP, базы данных MariaDB (форк MySQL) и Perl. Есть простой графический интерфейс, но можно залезть и в конфиг файлы. После небольших манипуляций также возможно запускать Питон код.

Есть много других вариантов: WAMP, Laravel, Local, Laragon.

Расширения для VS Code

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

Не советую использовать расширения, которые показывают страницу прямо в VS Code. Даже если технически это движок от Хрома, все равно лучше тестировать ваш сайт максимально близко к тому, что использует юзер. То есть в официальных стабильных версиях браузеров.

Live Server

Самый популярный вариант для VS Code - Live Server.

минусы: запускает файлы только из боковой панели (по крайней мере у меня), то есть не получится запустить для одиночного файла, только для проекта в workspace.