Привет! Продолжаем серию статей-туториалов по видео Александра Сербула, руководителя больших данных, высоконагруженных систем и машинного обучения в компании Битрикс24.

Видео и статьи записаны и написаны специально для вайбкодеров без технического бэкграунда, которые хотят создавать надёжные веб-приложения. В туториалах мы будем использовать ИИ-агента для работы с приложениями на React — Claude Desktop.

Сами не программируем — всю работу проводит ИИ-агент, а мы пишем запросы и контролируем результат.

В прошлой статье мы сделали простой сайт, а сегодня подготовим его к публикации в интернете. Разберём термины «дистрибутив», «сборка» и «бандл» и покажем на примерах работы с Claude Desktop, что нужно сделать и как это выглядит.

Некоторые термины, которыми мы будем пользоваться

Это цикл статей о создании фронтенд-проекта на React.

Есть несколько основных терминов и технологий, которые появляются в нашем проекте. Если вам интересно, что это такое, вот краткий словарь-глоссарий:

Словарь терминов:

На какой стадии проект сейчас

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

Пока что это взаимодействие ограничивается фронтендом: даже если что-то выбрать, заполнить и нажать, в реальности это никак не отразится. Для этого нужна обработка всех этих команд и реальные люди, которые будут работать с этим сайтом. Поэтому пока что мы только показываем, как можно сделать веб-приложение для своих задач.

Что сделаем и о чём расскажем сегодня

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

1. Нам нужно сделать так, чтобы сайт работал всегда, а не только пока запущен наш компьютер. Для этого мы подготовим комплект файлов, которые в следующих статьях сможем разместить на сервере — постоянно работающем компьютере, который хранит наш сайт и показывает его пользователям. Этот комплект файлов называется дистрибутивом.

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

Посмотрите на такую схему — ниже мы разберём, что на ней есть и как устроено:

Здесь показан запуск двух разных серверов: dev и prod. Dev-сервер нужен для рабочего режима разработки. Preview-сервер нужен, чтобы локально проверить production-сборку перед публикацией. Он показывает те же файлы из dist, которые потом можно будет загрузить на настоящий хостинг.

Исходный код — это то, что мы сейчас создаём в приложении агента Claude Desktop. Это файлы кода и настроек сайта, которые можно посмотреть в приложении:

Чтобы пользователь увидел сайт, браузер должен получить с сервера все нужные файлы: HTML, JavaScript, CSS, картинки и шрифты. Во время разработки в проекте есть файлы, которые браузер не может напрямую использовать. Поэтому перед публикацией Vite подготавливает их: собирает, преобразует и оптимизирует. Ещё файлов много, и передавать их все с сервера на браузер разным людям будет долго.

Vite-dev сервер (от слова development) — режим для разработчиков. В этом режиме сайт можно увидеть в браузере, если вбить в адресную строку localhost:5173. Дев-сервер переводит файлы в нужные браузеру форматы на лету и при сохранении нового кода мгновенно обновляет страницу (на схеме выше есть слово HMR, которое означает hot module replacement). Дев-сервер видит только разработчик в своём браузере.

Vite — это сборщик проекта, который подготавливает код к публикации: преобразует файлы и уменьшает размер итоговой версии, чтобы сайт быстрее загружался. Что делает Vite в процессе сборки:

1. Переводит код из проекта в понятный браузеру формат.

2. Сжимает исходное приложение и упаковывает десятки файлов в несколько.

3. Очищает: выбрасывает неиспользуемый код. Например, из набора иконок оставляет только реально нужные.

4. Минифицирует — убирает пробелы и комментарии в коде, укорачивает имена переменных. Благодаря этому файлы становятся ещё меньше.

5. Добавляет к именам файлов хеш. Это уникальный лёгкий отпечаток файла. Так браузер сможет сохранить файлы в кэше и при следующем открытии быстрее загрузить сайт. А если файлы на сервере изменятся, браузер поймёт это по изменившемуся хешу и загрузит обновлённые версии.

Бандл — результат пункта 2: код, упакованный в несколько файлов.

dist или дистрибутив — папка, куда складывается результат сборки. Это статические файлы, которые может хранить и отдавать любой веб-сервер.

Прод или production — то, что реально видят пользователи: маленькое, быстрое, кешируемое веб-приложение. 

dist — это production-сборка: набор готовых файлов, которые можно загрузить на хостинг.

В профессиональной разработке нужны и dev-, и prod-режимы:

• Dev оптимизирован для удобного создания и отладки кода. Разработчики могут быстро вносить правки и сразу видеть результат, а программу удобно читать.

• Prod оптимизирован под удобство использования. Для этого приложение максимально сжимают, чтобы браузер мог быстро скачать его и сохранить в кэш.

Из каких файлов и папок состоит проект

Файлы можно открывать и смотреть, но лучше ничего не редактировать в них самостоятельно, а всё делать через указания агенту в чате.

Вот главные компоненты проекта, которые в финальном приложении после выполнения всех действий в статье.

Главные папки:

• src — самая важная папка. Здесь хранится исходный код сайта, то есть то, что разработчик обычно меняет руками.

• src/pages — отдельные экраны сайта. У нас сейчас есть главная страница, “О студии”, бронирование экскурсии, заявка.

• src/components — повторяемые кусочки интерфейса. Например, верхнее меню и переключатель темы. Это как готовые детали конструктора, из которых собираются страницы.

• src/components/ui — базовые элементы-компоненты интерфейса shadcn/ui, о которых мы рассказывали в предыдущей статье. Это кнопки, поля ввода, карточки, календарь, всплывающие окна.

• src/data — данные, которые показываются на сайте. Сейчас здесь есть список сотрудников студии: имена, роли, описания, фотографии.

• src/lib — вспомогательные технические функции. Это маленькое хранилище для кода, который помогает другим частям проекта.

• public— статические файлы, которые сайт просто показывает как есть: фоновые картинки, фотографии команды, иконка сайта. Здесь лежат фоны и фото сотрудников.

• dist — один из основных элементов сегодняшней статьи, дистрибутив. Это готовая собранная версия сайта.

• node_modules — установленные библиотеки-зависимости, которые использует проект: React, Vite, Tailwind и прочие.

Если сократить эти описания, то получается, что public хранит картинки, src хранит сам сайт, dist хранит готовую версию сайта, а node_modules — установленные библиотеки и инструменты, которые нужны проекту на компьютере разработчика. В готовую папку dist они целиком не попадают.

Ещё в основной директории проекта есть такие важные файлы:

• package.json — список команд и библиотек проекта.

• vite.config.js — настройки сборщика сайта Vite.

• index.html — HTML-точка входа, куда React “вставляет” приложение.

• src/App.jsx — главный файл приложения: он решает, какую страницу сейчас показать.

• src/main.jsx — стартовый файл проекта: он запускает React-приложение в браузере.

Создаём сборку через агента

Всё, что нам нужно сделать — попросить Claude примерно так:

Научись делать сборку проекта и показывать её в браузере

ИИ-агент всё подготовит и скажет, что теперь у нас есть два сервера — это как раз то, что нам нужно:

Теперь сборка открывается по адресу localhost:4173/ или в окне превью агента, если выбрать preview:

Командная строка в терминале

Вот ещё немного технических подробностей, которые обычно не нужны для работы с кодом через Claude, но полезны для общего понимания фронтенд-работы.

Терминал — инструмент командной строки, где можно выполнять команды напрямую:

Наше приложение использует Node.js как рабочую среду для разработки. Node.js позволяет запускать скрипты JavaScript не только в браузере, но и на компьютере разработчика. Благодаря этому проект может делать разные действия: скачивать дополнительные программы для работы, запускать локальный сайт, собирать готовую версию, чтобы потом загрузить её на сервер.

В каждом Node-проекте есть файл package.json, а в нём раздел scripts — это просто словарь коротких команд. У нас он такой:

"scripts": {

  "dev": "vite",

  "build": "vite build",

  "lint": "oxlint",

  "preview": "vite preview"

}

Можно посмотреть список доступных команд в Терминале. Для этого запускаем команду npm run — с этих двух слов начинается любая короткая команда:

Сейчас у нас доступно всего 4 команды.

npm run dev поднимает сервер для разработки по адресу localhost:5173 в браузере. Тут мы и работаем.

npm run build собирает прод-версию в папку dist/. Это оптимизированные файлы для деплоя в production.

npm run lint запускает дополнительную программу-линтер, которая проверяет код на ошибки и небрежности. Линтер просто ищет проблемы и сообщает.

npm run preview включает локальный сервер по адресу localhost:4173, который показывает уже собранную dist/. Это работает только после npm run build.

Обратите внимание, что иногда в адресах могут меняться 4173 и 4174, 5173 и 5174. Это нормально, потому что если один адрес занят, агент автоматически пробует следующий. Адрес может считаться занятым из-за того, что сервер уже запущен, а мы запускаем его заново.

Попробуем npm run lint. Видно одно предупреждение — исправлять его не нужно, потому что если это что-то важное, агент сам поправит его при запуске.

Теперь запустим команду для сборки дистрибутива npm run build. Видно, что команда выполнилась, и теперь у нас есть собранная версия сайта для production-сервера.

Запускаем сервер командой npm run preview:

В терминале видно, что сервер можно открыть по адресу http://localhost:4174/. Открываем этот адрес в браузере:

В прошлой статье мы тоже открывали сайт в браузере, но это была именно dev-версия по адресу http://localhost:5173/. Её видим только мы. А теперь браузер отображает сборку, которую увидят конечные пользователи.

Инструменты разработчика

Во всех браузерах есть дополнительная панель инструментов, которая помогает разработчикам корректировать сайты. Называется она DevTools или Инструменты разработчика. Работать с ними необязательно, но тут можно увидеть разницу в загрузке на дев-сервер и на прод-сервер.

Самый простой способ открыть DevTools — нажать в окне браузера F12 или кликнуть курсором по любому месту на странице и нажать Inspect или Посмотреть код:

В Safari и Яндекс-браузере Инструменты разработчика нужно сначала включить:

• Инструкция для Safari.

• Инструкция для Яндекс-браузера.

В DevTools нам понадобится вкладка Network, на которой нужно выбрать All. После этого обновляем страницу и смотрим запросы, которые должен сделать браузер. Если загружаем сборку, это всего 13 запросов:

Что интересного тут есть:

• index-C9Odn71L.js — это бандл: весь код приложения, все наши десятки файлов, которые склеены в один файл. 

• index-2ZdImaEl.css — все визуальные стили в одном файле.

• Остальное — просто ресурсы-ассеты, которые были бы в любом случае отдельно: картинки, 2 шрифта, favicon, сам HTML.

А теперь откроем в таком же режиме dev-server. Обновляем страницу и видим 52 запроса вместо 13. Dev не имеет бандла, и поэтому грузит файлы по одному. Это дольше и создаёт больше нагрузки на браузер.

Добавляем изменения в приложение и смотрим результат

Сейчас мы немного изменим сайт и посмотрим, как это будет отображаться.

У нас на сайте есть светлая и тёмная тема. Мы добавим новый фон для обеих тем и попросим внести новый раздел.

Фоновые картинки мы попросили сделать ИИ, а для нового раздела мы воспользуемся ресурсом из предыдущей статьи: app-117900122a91.vibecode.bitrix24.tech. Это сайт, где можно увидеть демо работы визуальных компонентов сайтов и прочитать их описание:

Для сегодняшнего проекта мы выбрали компонент «Карусель». Отдаём агенту две картинки и пишем примерно такой запрос:

Идём проверять результат.

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

Карусель тарифов работает как надо:

Но картинки агент не смог добавить и просит это сделать нас. Нужно переименовать файлы и перенести их в папку:

В качестве исключения сделаем часть работы самостоятельно: переименовываем изображения, переносим в папку /public и проверяем, что dev-сервер сразу отображает изменения:

Теперь попросим агента обновить сборку и запустить её на prod-сервере:

Просим агента создать файл логов для себя

Последнее на сегодня. Каждая новая сессия Claude Code начинается с чистого листа: агент не помнит, над чем работали в прошлый раз. Чтобы ИИ всегда был в курсе дела, в проекте стоит завести файл истории, которую удобно читать самому агенту. Для этого в чате нужно выполнить команду /init — Claude создаст файл CLAUDE.md, который удобно читать именно ему. Пишет он его тоже самостоятельно, поэтому нам что-то дописывать или читать этот файл необязательно.

Что сделаем дальше

У нас готов дистрибутив, который можно деплоить, чтобы сайт был доступен 24 часа в сутки без необходимости держать наш компьютер включенным. Этим займёмся в следующий раз.