Современный 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/ # Переиспользуемые пакеты
│ ├── common.* # Общие компоненты и утилиты
│ │ ├── common.api/ # API клиенты и интеграции
│ │ ├── common.auth/ # Аутентификация
│ │ ├── common.config/ # Конфигурация
│ │ ├── common.entities/ # Общие сущности и типы
│ │ ├── common.eslint/ # Конфигурация ESLint
│ │ ├── common.env/ # Переменные окружения
│ │ ├── common.services/ # Общие сервисы
│ │ ├── common.sockets/ # WebSocket клиенты
│ │ ├── common.theme/ # Тема приложения
│ │ ├── common.typescript/ # Конфигурация TypeScript
│ │ ├── common.ui/ # Базовые UI компоненты
│ │ ├── common.utils/ # Утилиты
│ │ └── common.types/ # Общие типы
- 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. Для более сложных компонентов рекомендуется использовать внешние библиотеки или создавать собственные в соответствующих пакетах.
Этот проект является starter-шаблоном и может быть использован в любых целях.