Зачем нужны локальные серверы
Нельзя полноценно протестировать фронтенд, просто открыв 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.