Этот документ описывает, как установить зависимости и запустить React‑приложение, созданное с помощью Vite.
Перед началом убедитесь, что у вас установлены:
- Node.js версии 20.x или выше
Проверить версию:
node -v- npm (обычно устанавливается вместе с Node.js) или yarn / pnpm
Рекомендуется использовать последнюю LTS‑версию Node.js.
git clone https://github.com/Dirty-architecture/chat-frontend.git
cd onlynpm installПроект использует переменные окружения через файл .env в корне репозитория.
- Создайте файл
.env(если его нет) - Добавьте необходимые переменные
Пример:
VITE_API_URL=http://localhost:4000npm run devПосле запуска в терминале появится адрес, обычно:
http://localhost:5173
Откройте его в браузере — приложение готово к работе 🎉
npm run dev— запуск в режиме разработкиnpm run build— сборка проекта для продакшенаnpm run preview— локальный просмотр продакшн‑сборкиnpm run lint— проверка кода (если настроен ESLint)
Для сборки оптимизированной версии приложения выполните:
npm run buildРезультат будет сохранён в папке dist/.
- Ошибка версии Node.js — обновите Node.js до LTS‑версии
- Порт занят — Vite автоматически предложит другой порт
- Зависимости не устанавливаются — попробуйте удалить
node_modulesиpackage-lock.json, затем выполнитьnpm install
В проекте для именования CSS‑классов используется методология БЭМ (Block — Element — Modifier). Это помогает поддерживать единый стиль, улучшает читаемость стилей и упрощает масштабирование интерфейса.
- Блок — независимая сущность интерфейса: block
- Элемент — часть блока, не существует отдельно: block-element
- Модификатор — состояние/вариация блока или элемента: block__modifier или block-element__modifier