npm install - Устанавливаем зависимости
npm run start:dev или npm run start:dev:vite - Запуск проекта
npm run start
- Запуск frontend проекта на webpacknpm run start:vite
- Запуск frontend проекта на vitenpm run start:dev
- Запуск frontend проекта на webpack dev server + backend + storybooknpm run stat:dev:vite
- Запуск frontend проекта на vite + backendnpm run start:dev:server
- Запуск backend сервераnpm run build:prod
- Сборка в prod-режимеnpm run build:dev
- Сборка в dev-режимеnpm run prettier
- Форматирование кода с помощью prettiernpm 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 test:unit
- Запуск unit тестов с jestnpm run test:e2e
- Запуск e2e тестов с cypressnpm run test:ui
- Запуск скриншотных тестов с lokinpm run test:ui:ok
- Подтверждение новых скриншотовnpm run test:ui:ci
- Запуск скриншотных тестов в CInpm run test:ui:report
- Генерация полного отчета для скриншотных тестовnpm run test:ui:json
- Генерация json отчета для скриншотных тестовnpm run test:ui:html
- Генерация HTML отчета для скриншотных тетсовnpm run storybook
- Запуск Storybooknpm run storybook:build
- Сборка Storybook билда
Проект написан в соответствии с методологией Feature Sliced Design
Ссылка на документацию - feature sliced design
В проекте используется библиотека i18next для работы с переводами. Файлы с переводами храняться в public/locales.
Для комфортной работы рекомендуем установить плагин для webstorm/vscode.
Документация i18next - https://react.i18next.com/
В проекте используются 4 вида тестов:
- Обычные unit тесты на jest -
npm run test:unit
- Тесты на компоненты с React testing library -
npm run test:unit
- Скриншотное тестирование с loki -
npm run test:ui
- e2e тестирование с Cypress -
npm run test:e2e
В проекте используется eslint для проверки typescript кода и stylelint для проверки файлов со стилями.
Так же для строгого контроля главных архитектурных принципов используются eslint-плагины, которые содержат 2 правила.
- boundaries/element-types - Проверяет корректность использования слоев с точки зрения FSD (Доступ к низлежащим слоям)
- no-restricted-imports - Разрешает импорт из других модулей только из public api.
В проекте для каждого компонента описываются стори-кейсы. Запросы на сервер мокаются с помощью storybook-addon-mock.
Файл со сторикейсами создает рядом с компонентом с расширением .stories.tsx
Запустить сторибук можно командой:
npm run storybook
Подробнее о Storybook
Пример Стори-кейса
Для разработки проект содержит 2 конфига:
- Webpack - ./config/build
- Vite - vite.config.ts
Оба сборщика адаптированы под основные фичи приложения.
Вся конфигурация хранится в /config
- /config/babel - babel
- /config/build - Конфигурация webpack
- /config/jest - Конфигурация тестовой среды
- /config/storybook - Конфигурация сторибука
В папке script
находятся разлиные скрипты для рефакторинга/упрощения написания кода/генерации отчетов и т.д
Конфигурация github actions находится в /.github/workflows. В ci прогоняются все виды тестов, сборка проекта и сторибука, линтинг.
В прекоммит хуках проверяем проект линтерами с помощью husky.
Взаимодействие с данными осуществляется с помощью redux toolkit. По возможности переиспользуемые сущности необходимо нормализовать с помощью EntityAdapter
Запросы на сервер отправляются с помощью RTK Query
Для асинхронного подключения редюсеров (Чтобы не тянуть их в общий бандл) используется DynamicModuleLoader
Разрешено использование feature flags только с помощью хелпера toggleFeatures в него передается объект с опциями
{ name: название фича-флага, on: функция, которая отработает после Включения фичи off: функция, которая отработает после ВЫключения фичи }
Для автоматического удаления фичи использовать скрипт remove-feature.ts, который принимает 2 аргумента
- Название удаляемого фича-флага
- Состояние (on/off)