Приложение представляет собой простой блог с фейковым API (json-server) и следующим функционалом:
- Архитектура по FSD с разделением на слои и слайсы
- Feature-флаги и автоматическое удаление кода, спрятанного за фича-флагами
- Переключение тем и языков
- Переключение на старый/новый дизайн
- Настройки пользователя через Json-settings
- Покрытие unit и e2e тестами
- Storybook на компоненты
- Классический набор функционала - логин, приватные роуты по ролям, пагинация и бесконечный скролл, скелетоны, сортировки, попапы, шторки, списки и тп.
https://blog-nu-jet.vercel.app
npm install - устанавливаем зависимости
npm run start:dev или npm run start:dev:vite - запуск сервера + frontend проекта в dev режиме
npm run start
- Запуск frontend проекта на webpack dev servernpm run start:dev
- Запуск frontend проекта на webpack dev server + backendnpm run start:dev:vite
- Запуск frontend проекта на vite + backendnpm run build:prod
- Сборка в prod режимеnpm run build:dev
- Сборка в dev режиме (не минимизирован)npm run lint
- Проверка ts файлов линтеромnpm run lint:fix
- Исправление ts файлов линтеромnpm run lint:scss
- Проверка scss файлов style линтеромnpm run lint:scss-fix
- Исправление scss файлов style линтеромnpm run test:unit
- Запуск unit тестов с jestnpm run test:ui
- Запуск скриншотных тестов с lokinpm run test:ui-approve
- Подтверждение новых скриншотовnpm run test:ui-ci
- Запуск скриншотных тестов в CInpm run test:ui-report
- Генерация полного отчета для скриншотных тестовnpm run storybook
- запуск Storybooknpm run storybook:build
- Сборка storybook билдаnpm run prepare
- прекоммит хукиnpm run postinstall
- выполняет очистку кеша после установки пакетовnpm run remove-features
- удаляет код под feature-флагом
Проект написан в соответствии с методологией 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 plugin fsd-path-checker (подключается локально через npm link eslint-plugin-fsd-path-checker
),
который содержит 3 правила
- path-checker - запрещает использовать абсолютные импорты в рамках одного модуля
- layer-imports - проверяет корректность использования слоев с точки зрения FSD (например widgets нельзя использовать в features и entitites)
- public-api-imports - разрешает импорт из других модулей только из public api. Имеет auto fix
npm run lint:ts
- Проверка ts файлов линтеромnpm run lint:fix
- Исправление ts файлов линтеромnpm run lint:scss
- Проверка scss файлов style линтеромnpm run lint:scss-fix
- Исправление scss файлов style линтером
В проекте для каждого компонента описываются стори-кейсы. Запросы на сервер мокаются с помощью storybook-addon-mock.
Файл со сторикейсами создает рядом с компонентом с расширением .stories.tsx
Подробнее о Storybook
Для разработки проект содержит 2 конфига:
- Webpack - ./config/build
- vite - vite.config.ts
Оба сборщика адаптированы под основные фичи приложения.
Вся конфигурация хранится в /config
- /config/babel - babel
- /config/build - конфигурация webpack
- /config/jest - конфигурация тестовой среды
- /config/storybook - конфигурация сторибука
В папке scripts
находятся различные скрипты для рефакторинга\упрощения написания кода\генерации отчетов и тд.
Конфигурация github actions находится в /.github/workflows. В ci прогоняются все виды тестов, сборка проекта и сторибука, линтинг.
В прекоммит хуках проверяем проект линтерами, конфиг в /.husky
Взаимодействие с данными осуществляется с помощью redux toolkit. По возможности переиспользуемые сущности необходимо нормализовать с помощью EntityAdapter
Запросы на сервер отправляются с помощью RTK query
Для асинхронного подключения редюсеров (чтобы не тянуть их в общий бандл) используется useDynamicReducerLoader
Разрешено использование feature flags только с помощью хелперов toggleFeatures
и ToggleFeaturesWrapper
в него передается объект с опциями:
{
name: название фича-флага,
on: функция, которая отработает после Включения фичи
of: функция, которая отработает после ВЫключения фичи
}
Для автоматического удаления фичи использовать скрипт removeFeatures.ts, который принимает 2 аргумента
- Название удаляемого фича-флага
- Состояние (on\off)
TODO: Добавить список фичей со ссылками на описание каждой фичи