Проект написан в соответствии с методологией Feature sliced design

Ссылка на документацию - feature sliced design

• npm run start - Запуск frontend проекта на webpack dev server
• npm run start:vite - Запуск frontend проекта на vite
• npm run start:dev - Запуск frontend проекта на webpack dev server + backend
• npm run start:dev:vite - Запуск frontend проекта на vite + backend
• npm run start:dev:server - Запуск backend сервера
• npm run build:prod - Сборка в prod режиме
• npm run build:dev - Сборка в dev режиме (не минимизирован)
• npm run build:prod:ba - Сборка в prod режиме + запуск Bundle Analyzer
• npm run lint:ts - Проверка ts,tsx файлов линтером
• npm run lint:ts:fix - Исправление ts,tsx файлов линтером
• npm run lint:scss - Проверка scss файлов style линтером
• npm run lint:scss:fix - Исправление scss файлов style линтером
• npm run prettier - Исправление ts, tsx, json файлов prettier
• npm run test:unit - Запуск unit тестов с jest
• npm run test:ui - Запуск скриншотных тестов с loki
• npm run test:ui:ok - Подтверждение новых скриншотов
• npm run test:ui:ci - Запуск скриншотных тестов в CI
• npm run test:ui:report - Генерация полного отчета для скриншотных тестов
• npm run test:e2e - Открытие e2e тестов в Сypress
• npm run storybook - запуск Storybook
• npm run generate:slice - Скрипт для генерации FSD слайсов

В проекте используется библиотека i18next для работы с переводами. Файлы с переводами хранятся в public/locales.

Для комфортной работы рекомендуем установить плагин для webstorm/vscode

Документация i18next - https://react.i18next.com/

В проекте используются 4 вида тестов:

1. Обычные unit тесты на jest - npm run test:unit
2. Тесты на компоненты с React testing library - npm run test:unit
3. Скриншотное тестирование с loki + генерация отчета npm run test:ui:report
4. e2e тестирование с Cypress npm run test:e2e

В проекте используется eslint для проверки typescript кода, stylelint для проверки файлов со стилями и prettier для форматирования файлов .ts, .tsx и .json.

Также для строгого контроля главных архитектурных принципов используется собственный eslint plugin eslint-plugin-igor21v, который содержит 3 правила

1. path-checker - запрещает использовать абсолютные импорты в рамках одного модуля
2. layer-imports - проверяет корректность использования слоев с точки зрения FSD (например widgets нельзя использовать в features и entitites)
3. public-api-imports - разрешает импорт из других модулей только из public api. Имеет auto fix

• npm run lint:ts - Проверка ts, tsx файлов линтером
• npm run lint:ts:fix - Исправление ts файлов линтером
• npm run lint:scss - Проверка scss файлов style линтером
• npm run lint:scss:fix - Исправление scss файлов style линтером
• npm run prettier - Исправление ts, tsx, json файлов prettier

В проекте для каждого компонента описываются стори-кейсы.

Запустить сторибук можно командой:

• npm run storybook

Подробнее о Storybook

Для разработки проект содержит 2 конфига:

1. Webpack - ./config/build
2. vite - vite.config.ts

Оба сборщика адаптированы под основные фичи приложения.

Вся конфигурация хранится в /config

• /config/babel - babel
• /config/build - конфигурация webpack
• /config/jest - конфигурация тестовой среды
• /config/storybook - конфигурация сторибука

В папке scripts находятся различные скрипты для рефакторинга\упрощения написания кода\генерации отчетов и тд.

В папке .fttemplates находится шаблоны для расширения Folder Templates для создания слайсов и отдельных компонентов UI.

Конфигурация github actions находится в /.github/workflows. В ci прогоняются тесты, сборка проекта и сторибука, линтинг. Генерируются отчеты по исполнению тестов: https://igor21v.github.io/webitem/

В прекоммит хуках проверяем проект линтерами, конфиг в /.husky

Взаимодействие с данными осуществляется с помощью redux toolkit. По возможности переиспользуемые сущности необходимо нормализовать с помощью EntityAdapter

Запросы на сервер отправляются с помощью RTK query

Для асинхронного подключения редюсеров (чтобы не тянуть их в общий бандл) используется DynamicModuleLoader