Смотрим результат в браузере

Проект создан. Но как увидеть что получается? Не файлы кода, а как это выглядит на самом деле — в браузере, как настоящий сайт.

Что такое localhost

Когда делаешь сайт, он должен где-то работать. В интернете сайты живут на серверах. Но пока разрабатываешь — сервер не нужен. Твой компьютер сам становится сервером.

localhost:8080 — это адрес твоего локального сервера. Как обычный сайт, только доступен только тебе.

💡 Простыми словами: Localhost — это «мой компьютер». Число после двоеточия (8080) — порт, как номер комнаты. Разные проекты могут работать на разных портах.

Как запустить

Claude сам запускает локальный сервер когда нужно. Просто попроси:

Запусти дев сервер

Или:

npm run dev

Claude выполнит команду и покажет что-то типа:

Local:   http://localhost:8080/
Network: http://192.168.1.100:8080/

Local — адрес для твоего компьютера
Network — адрес для других устройств в твоей сети

Открываем в браузере

Скопируй адрес http://localhost:8080 (или какой показал Claude)
Открой браузер (Chrome, Safari, Firefox — любой)
Вставь адрес в строку и нажми Enter

Готово. Ты видишь свой проект как настоящий сайт.

⚠️ Важно: Пока сервер работает — сайт доступен. Закроешь терминал, остановишь сервер, выключишь комп — сайт пропадёт. Это нормально, он живёт только локально.

Смотрим с телефона

Хочешь посмотреть проект на телефоне?

Условия: - Телефон и компьютер в одной Wi-Fi сети - Сервер запущен

Как: 1. Найди адрес Network (например http://192.168.1.100:8080) 2. Открой этот адрес в браузере на телефоне 3. Готово — видишь свой проект

💡 Совет: Network-адрес можно отправить себе в телеграм — быстрее, чем набирать вручную. Или просто попроси Claude показать адрес для мобильного.

Изменения в реальном времени

Большинство современных проектов поддерживают hot reload: 1. Сервер запущен, сайт открыт в браузере 2. Claude меняет файл 3. Браузер автоматически обновляется

Не надо каждый раз нажимать F5. Изменил → увидел.

Если порт занят

Иногда видишь:

Port 8080 is in use, trying another one...
Local: http://localhost:8081/

Это нормально. На порту 8080 уже что-то работает. Сервер выбрал другой порт — просто используй новый адрес.

Остановка сервера

В терминале: нажми Ctrl + C
Или закрой вкладку терминала
Или попроси Claude остановить

После остановки localhost перестанет работать. Для просмотра — запусти сервер заново.

Практика

Попроси Claude: Создай простую HTML-страницу с заголовком «Это мой первый проект»
Попроси: Запусти проект
Открой адрес в браузере
Убедись что видишь страницу
Если есть телефон — открой Network-адрес на нём

Проверка

✅ Понимаю что такое localhost
✅ Знаю как запустить сервер
✅ Могу открыть проект в браузере
✅ Знаю как посмотреть с телефона

Всё так? Переходим к GitHub.