Monorepo Starter

Современный starter-шаблон для создания React-приложений с использованием монорепозитория

Этот репозиторий представляет собой готовый к использованию шаблон для быстрого старта разработки современных веб-приложений на React с использованием TypeScript, Vite и TanStack Router.

🚀 Начало работы

Установка зависимостей

Выполните установку зависимостей, запустив команду в корне репозитория:

pnpm i

Если зависимости не устанавливаются, возможно, потребуется использовать флаг --legacy-peer-deps.

Запуск приложения

Запустите следующую команду в корне репозитория для начала локальной разработки:

pnpm run dev

Запустится приложение web на http://localhost:5173/, а также все пакеты перейдут в режим HMR.

📦 Структура проекта

Проект построен по принципу монорепозитория с использованием Turborepo:

monorepo-starter/
├── apps/                       # Приложения
│   └── web/                    # Основное фронтенд-приложение
├── packages/                   # Переиспользуемые пакеты
│   ├── calls.*                 # Пакеты ВКС (@xipkg/calls-*)
│   │   ├── calls/              # @xipkg/calls — основной UI
│   │   ├── calls.config/       # @xipkg/calls-config
│   │   ├── calls.types/        # @xipkg/calls-types
│   │   ├── calls.utils/        # @xipkg/calls-utils
│   │   └── …                   # hooks, ui, store, providers, …
│   └── common.*                # Инфраструктура монорепо (eslint, env, typescript)

🛠️ Технологии

Инфраструктура

• Turborepo – инструмент для создания и управления монорепозиториями
• pnpm – менеджер пакетов
• Prettier – форматирование кода
• ESLint – линтер с правилами написания кода
• Husky – инструмент вызова прекоммит хуков в git
• CommitLint – линтер наименования коммитов

Приложение (apps/web)

• TypeScript v5 – типизированный JavaScript
• React v19 – библиотека для создания пользовательских интерфейсов
• Tailwind CSS v4 – утилитарный CSS-фреймворк
• Vite – сборщик проекта
• TanStack Router – организация роутинга на основе файловой системы
• TanStack Query – организация кеширования и управления данными
• Zustand – управление состоянием в приложении
• i18next – интернационализация
• Axios – работа с REST API
• Socket.IO – взаимодействие с WebSockets

📝 Команды

Разработка

# Запуск приложения в режиме разработки
pnpm run dev

# Запуск всех пакетов в режиме разработки
pnpm run dev:all

# Предпросмотр production сборки
pnpm run preview

# Запуск livekit-сервера

Сборка

# Сборка всех пакетов
pnpm run build

# Сборка в режиме разработки
pnpm run build:dev

# Сборка с отладочной информацией
pnpm run build:debug

Качество кода

# Запуск ESLint во всех пакетах
pnpm run lint

# Форматирование кода с помощью Prettier
pnpm run format

# Проверка форматирования без изменений
pnpm run format-check

🏗️ Архитектура

Принципы организации

1. Модульность - код организован в переиспользуемые пакеты
2. Feature-based структура - функциональность разделена на модули
3. Разделение ответственности - общий код выделен в пакеты common.*
4. Монорепозиторий - использование Turborepo для управления зависимостями

Система маршрутизации

Проект использует @tanstack/react-router для организации навигации по принципу файловой системы:

• Структура директорий в apps/web/src/pages/ автоматически формирует маршруты
• __root.tsx - корневой маршрут и контекст
• _layout.tsx - шаблоны для вложенных маршрутов
• (папка) - группировка маршрутов (не влияет на URL)

Локализация

Проект использует i18next для многоязычности. Переводы организованы по модульному принципу и распределены по соответствующим пакетам.

🔧 Переменные окружения

Проект использует переменные окружения для конфигурации. Они доступны через модуль common.env и используют префикс VITE_ для экспорта в клиентский код.

Создайте файл .env.local в папке apps/web/ для локальных переменных окружения:

VITE_SERVER_URL_BACKEND=http://localhost:3000
VITE_DEVTOOLS_ENABLED=true

LiveKit демо-режим

Демо-режим xi.calls позволяет установить соединение и использовать функции ВКС изолированно, не используя инфраструктуру xi.tutor.

Для этого нужно:

1. Установить LiveKit сервер:
   • macOS: brew install livekit
   • Windows: скачать livekit-server_<version>_windows_amd64.zip
2. Установить lk для генерации токена:
   • macOS: brew install livekit-cli
   • Windows: скачать lk_<version>_windows_amd64.zip
3. Сгенерировать LiveKit токен:

   <Path to lk.exe> token create \
     --api-key devkey --api-secret secret \
     --join --room demo --identity demo-user \
     --valid-for 24h

4. Добавить в .env.local (создать переменные, если их нет):

   VITE_LIVEKIT_DEV_MODE=true
   VITE_SERVER_URL_LIVEKIT_DEV=<server url из шага 3>
   VITE_LIVEKIT_DEV_TOKEN=<токен из шага 3>

5. Запустить сервер в отдельном терминале:

   livekit-server --dev (macOS)
   <Path to livekit.exe> --dev (windows)

Оставьте LiveKit сервер запущенным и перезапустите клиентское приложение (pnpm run dev), если оно уже было запущено — Vite подхватывает .env.local только при старте.

Токен ограничен по времени (--valid-for 24h) — по истечении срока просто повторите шаг 3 и обновите VITE_LIVEKIT_DEV_TOKEN.

📚 Создание новых пакетов

Для создания нового пакета:

1. Создайте директорию в packages/ с префиксом common.*, modules.* или features.*
2. Создайте package.json с соответствующим именем
3. Добавьте пакет в зависимости приложения в apps/web/package.json
4. Используйте пакет в коде: import { Something } from 'package-name'

🎨 UI компоненты

Проект использует базовые UI компоненты из пакета common.ui. Для более сложных компонентов рекомендуется использовать внешние библиотеки или создавать собственные в соответствующих пакетах.

📖 Дополнительная информация

• Turborepo документация
• TanStack Router документация
• TanStack Query документация
• Vite документация
• Миграции пакетов calls

📄 Лицензия

Этот проект является starter-шаблоном и может быть использован в любых целях.