Современный 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 – линтер наименования коммитов
- 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# Сборка всех пакетов
pnpm run build
# Сборка в режиме разработки
pnpm run build:dev
# Сборка с отладочной информацией
pnpm run build:debug# Запуск ESLint во всех пакетах
pnpm run lint
# Форматирование кода с помощью Prettier
pnpm run format
# Проверка форматирования без изменений
pnpm run format-check- Модульность - код организован в переиспользуемые пакеты
- Feature-based структура - функциональность разделена на модули
- Разделение ответственности - общий код выделен в пакеты
common.* - Монорепозиторий - использование 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Для создания нового пакета:
- Создайте директорию в
packages/с префиксомcommon.*,modules.*илиfeatures.* - Создайте
package.jsonс соответствующим именем - Добавьте пакет в зависимости приложения в
apps/web/package.json - Используйте пакет в коде:
import { Something } from 'package-name'
Проект использует базовые UI компоненты из пакета common.ui. Для более сложных компонентов рекомендуется использовать внешние библиотеки или создавать собственные в соответствующих пакетах.
- Turborepo документация
- TanStack Router документация
- TanStack Query документация
- Vite документация
- Миграции пакетов calls
Этот проект является starter-шаблоном и может быть использован в любых целях.