Курс

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

МОДУЛЬ 3: СОЗДАЁМ ПРОЕКТ • Урок 5 из 5

В прошлом уроке Claude создал твой проект. Теперь нужно его увидеть — запустить и открыть в браузере.

[ ЗАПУСКАЕМ ПРОЕКТ ]

Когда Claude закончил создавать файлы, попроси его запустить результат:

Запусти проект в браузере через свой терминал. Не показывай мне команду — выполни её сам.

Claude сам выполнит команду в терминале и откроет проект в браузере. Тебе ничего вводить не нужно.

🎯 Что ты должен увидеть:

Работающий проект в браузере — с дизайном, функциями и интерактивностью.

[ ЧТО ТАКОЕ LOCALHOST ]

Когда ты открываешь сайт, браузер обращается к серверу где-то в интернете. Но пока проект на твоём компьютере, никакого сервера нет.

localhost — это твой компьютер, притворяющийся сервером. Браузер думает что открывает сайт, а на самом деле смотрит файлы на твоём диске.

💡 Простыми словами:

localhost = "этот компьютер". Когда в адресной строке видишь localhost:3000 — это не интернет, это твоя машина.

[ КАК ЗАПУСТИТЬ ]

Claude обычно сам говорит как запустить проект. Но вот типичные варианты:

Терминал с командами

Для веб-проектов (HTML/CSS/JS):

npx serve

или

python -m http.server 3000

Для React/Vue/Next.js:

npm run dev

или

npm start
⚠️ Важно:

Команды вводятся в терминале VS Code. Открой терминал: View → Terminal или Ctrl + ` (клавиша под Esc).

[ ОТКРЫТИЕ В БРАУЗЕРЕ ]

После запуска в терминале появится адрес. Обычно это:

Local:   http://localhost:3000
Network: http://192.168.1.XX:3000
Браузер с localhost

Чтобы открыть:

  1. Скопируй адрес http://localhost:3000 (или какой показывает)
  2. Открой браузер (Chrome, Safari, Firefox)
  3. Вставь адрес в адресную строку
  4. Нажми Enter
💡 Лайфхак:

В VS Code можно кликнуть на ссылку в терминале с зажатым Cmd (Mac) или Ctrl (Windows) — откроется сразу в браузере.

[ СМОТРИМ НА ТЕЛЕФОНЕ ]

Хочешь проверить как выглядит на мобильном? Используй Network адрес:

  1. Телефон должен быть в той же Wi-Fi сети что и компьютер
  2. В терминале найди строку Network: http://192.168.X.X:3000
  3. Открой этот адрес в браузере телефона
💡 Совет:

Если Network адрес не показывается — проверь настройки файрвола. Иногда он блокирует доступ извне.

[ HOT RELOAD ]

Магия современных инструментов: меняешь код — страница обновляется сама.

Как это работает:

  • Claude меняет файл
  • Сервер видит изменения
  • Браузер автоматически перезагружает страницу

Не нужно каждый раз жать F5 или обновлять вручную.

⚠️ Если не обновляется:
  • Проверь что сервер запущен (в терминале что-то работает)
  • Попробуй обновить страницу вручную (Cmd/Ctrl + R)
  • Очисти кэш: Cmd/Ctrl + Shift + R

[ КОНФЛИКТ ПОРТОВ ]

Иногда при запуске видишь ошибку:

Error: Port 3000 is already in use

Это значит что-то другое уже использует этот порт.

Решения:

  • Закрой другие проекты/серверы
  • Используй другой порт: npm run dev -- --port 3001
  • Найди и убей процесс (для продвинутых)
💡 Простой способ:

Перезагрузи компьютер. Все порты освободятся. Грубо, но работает.

[ ОСТАНОВКА СЕРВЕРА ]

Когда закончил работу, сервер нужно остановить:

  1. Кликни в терминал (чтобы он был активен)
  2. Нажми Ctrl + C
  3. Сервер остановится

Если просто закроешь VS Code — сервер тоже остановится. Но лучше делать это явно.

[ ПРАКТИКА ]

Попробуй со своим проектом:

  1. Запусти проект командой Claude или вручную (npx serve)
  2. Открой localhost в браузере
  3. Попроси Claude изменить цвет фона или текст
  4. Посмотри как страница обновится автоматически
  5. Проверь на мобильном (через Network адрес)
  6. Останови сервер (Ctrl + C)

Проверка:

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

Всё так? → Переходи к следующему уроку.

💬 Совет:

Не бойся терминала. Да, там текст и команды вместо кнопок. Но это не сложнее чем написать сообщение в чат. Копируй команды, вставляй, жми Enter. Со временем привыкнешь и поймёшь что это удобнее чем кликать мышкой.