npm install - устанавливаем зависимости
npm run start:dev или npm run start:vite + npm run start:server - запуск сервера + frontend проекта в dev режиме
npm run start- Запуск frontend проекта на webpack dev servernpm run start:vite- Запуск frontend проекта на vitenpm run start:dev- Запуск frontend проекта на webpack dev server + backendnpm run start:server- Запуск backend сервераnpm run build:prod- Сборка в prod режимеnpm run build:dev- Сборка в dev режиме (не минимизирован)npm run typecheck- Запуск tsc --skipLibChecknpm 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: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 sb- Запуск Storybooknpm run sb:build- Сборка storybook билдаnpm run prepare- Прекоммит хукиnpm run generate:slice- Скрипт для генерации FSD слайсов
Взаимодействие с данными осуществляется с помощью redux toolkit.
Запросы на сервер отправляются с помощью RTK query
Для асинхронного подключения редюсеров (чтобы не тянуть их в общий бандл) используется DynamicModuleLoader
Также для правильной типизированной работы с async actions и dispatch, используется useActionCreatorsTyped:
export const useActionCreatorsTyped = <
Actions extends ActionCreatorsMapObject = ActionCreatorsMapObject
>(
actions: Actions
): BoundActions<Actions> => {
const dispatch = useAppDispatch()
const memoizedActions = useMemo(
() => bindActionCreators(actions, dispatch),
[actions, dispatch]
)
return memoizedActions
}Пример использования:
const actionsUser = useActionCreatorsTyped(userActions)
useEffect(() => {
actionsUser.initAuthData()
}, [actionsUser.initAuthData])Подробнее о хуке - useActionCreatorsTyped
Проект написан в соответствии с методологией Feature sliced design
Ссылка на документацию - feature sliced design
В проекте используется библиотека i18next для работы с переводами. Файлы с переводами хранятся в public/locales.
Для комфортной работы рекомендуем установить плагин для webstorm/vscode
Документация i18next - https://react.i18next.com/
В проекте используются 3 вида тестов:
- Обычные unit тесты на jest -
npm run test:unit - Тесты на компоненты с React testing library -
npm run test:unit - Скриншотное тестирование с loki
npm run test:ui
Подробнее о тестах - документация тестирование
В проекте используется eslint для проверки typescript кода и stylelint для проверки файлов со стилями.
Также для строгого контроля главных архитектурных принципов используется собственный eslint-plugin-fatboyy-plugin1, который содержит 3 правила
- path-checker - запрещает использовать абсолютные импорты в рамках одного модуля
- layer-imports - проверяет корректность использования слоев с точки зрения FSD (например widgets нельзя использовать в features и essence)
- public-api-imports - разрешает импорт из других модулей только из public api.
npm run lint:ts- Проверка ts файлов линтеромnpm run lint:ts:fix- Исправление ts файлов линтеромnpm run lint:scss- Проверка scss файлов style линтеромnpm run lint:scss:fix- Исправление scss файлов style линтером
В проекте для каждого компонента описываются стори-кейсы. Запросы на сервер мокаются с помощью storybook-addon-mock.
Файл со сторикейсами создает рядом с компонентом с расширением .stories.tsx
Запустить сторибук можно командой:
npm run sb
Подробнее о Storybook
Пример:
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
import { Button, ButtonSize, ButtonTheme } from './Button';
import { Theme } from '@/shared/const/theme';
export default {
title: 'SHARED/Button',
component: Button,
argTypes: {
backgroundColor: { control: 'color' },
},
} as ComponentMeta<typeof Button>;
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
children: 'Text',
};
export const Clear = Template.bind({});
Clear.args = {
children: 'Text',
theme: ButtonTheme.CLEAR,
};Для разработки проект содержит 2 конфига:
- Webpack - ./config/build
- vite - vite.config.ts
Оба сборщика адаптированы под основные фичи приложения.
Вся конфигурация хранится в /config
- /config/babel - babel
- /config/build - конфигурация webpack
- /config/jest - конфигурация тестовой среды
- /config/storybook - конфигурация сторибука
В папке scripts находятся различные скрипты для рефакторинга\упрощения написания кода\генерации отчетов и тд.
Разрешено использование feature flags только с помощью хелпера toggleFeatures
В него передается объект с опциями:
{ name: название фича-флага, on: ф-ция, которая отрабатывает после включения флага, off: ф-ция, которая отрабатывает после выключения флага } Для автоматического удаления фичи использовать скрипт remove-feature.ts, который принимает два аргумента:
- Название удаляемого фича-флага
- Состояние (on/off)
Конфигурация github actions находится в /.github/workflows. В ci прогоняются все виды тестов, сборка проекта и сторибука, линтинг.
В прекоммит хуках проверяем проект линтерами, конфиг в /.husky