npm install - встановлюємо залежності
npm run start або npm run star:webpack - запуск frontend проєкту
npm run start- Запуск frontend прєкта на vitenpm run star:webpack- Запуск frontend проєкта на webpack dev servernpm run build:prod- Сбірка у prod режиміnpm run build:dev- Сбірка і dev режимі (не мінімизировано)npm run lint:ts- Перевірка ts файлів линтеромnpm run lint:ts:fix- Виправлення ts файлів линтеромnpm run lint:scss- Перевірка scss файлів style линтеромnpm run lint:scss:fix- Виправлення scss файлів style линтеромnpm run unit- Запуск unit тестів з jestnpm run pret- Формотування файлів prettier
Проєкт написано у відповідності до методології Feature sliced design
Посилання на документацію - feature sliced design
У проєкте неведено приклад використання тестів:
- Звичайні unit тесты на jest -
npm run test:unit
У проєкті використовується eslint для перевірки typescript коду та stylelint для перевірки файлів зі стилями.
Для більш гнучкого контролю додані додаткові правила. Eslint має підключення з prettier.
npm run lint:ts- Перевірка ts файлів линтеромnpm run lint:ts:fix- Виправлення ts файлів линтеромnpm run lint:scss- Перевірка scss файлів style линтеромnpm run lint:scss:fix- Виправлення scss файлів style линтером
Для девелопингу проєкт містить 2 конфіга:
- Webpack - ./config/build
- vite - vite.config.ts
Обидва збірщика адаптовано під основні фічи проєкту.
Уся конфігурація зберігається у /config
- /config/babel - babel
- /config/build - webpack
- /config/jest - конфігурация тестовой середи
Конфігурация github actions знаходиться у /.github/workflows. В ci прогоняються усі типу линтингу, тести, сбірка проєкту.
У прекоммит хуках перевіряємо проєкт линтерами, конфіг в /.husky
Взаємодія з даними відбувається за допомогою Redux toolkit
Запити на сервер відправляються за допомогою RTK query
Для прикладу виконане леніве завантаження модалки
Використано леніве завантаження бібліотеки, наприкладі 'react-toastify'