npm install - устанавливаем зависимости
npm run start:dev или npm run start:dev:vite - запуск сервера + frontend проекта
npm run start
- Запуск frontend проекта на webpack dev servernpm run start:vite
- Запуск frontend проекта на vitenpm run start:dev
- Запуск frontend проекта на webpack dev server + backendnpm run start:dev:vite
- Запуск frontend проекта на vite + backendnpm run start:dev:server
- Запуск backend сервераnpm 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
- Исправление 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 storybook
- Запуск Storybooknpm run storybook:build
- Сборка Storybook билдаnpm run prepare
- прекоммит хукиnpm run generate:slice
- Скрипт для генерации FSD слайсов
Проект написан в соответствии с методологией Feature sliced design
Ссылка на документацию - feature slices design
В проект используется библиотека i18next для работы с переводами. Файлы с переводами хранятся в public/locales.
Для комфортной работы рекомендуется установить плагин для phpstorm/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 для проверки файлов со стилями.
Так же для строго контроля главных архитектурных принципов используется собственный plugin nayteruz-test-production-plugin, который содержит 3 правила
- path-cheker - запрешает использовать абсолютные импорты в рамках одного модуля
- layer-imports - проверяет корректность использования слоев с точки зрения FSD(например widgets нельзя использовать в features и entities)
- public-api-imports - разрешает импорт из других модулей только из public api. Имеет auto fix.
npm run lint:ts
- Проверка ts файлов линтеромnpm run lint:ts:fix
- Исправление ts файлов линтеромnpm run lint:scss
- Проверка scss файлов style линтеромnpm run lint:scss:fix
- Исправление scss файлов style линтером
В проекте для каждого компонента описываются стори-кейсы. Запросы на север мокаются с помощью styrybook-addon-mock.
Файл со сторикейсами создаем рядом с компонентом с расширением .stories.tsx
Запустить storybook можно командой:
npm run storybook
Подробнее о Storybook
Пример:
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Theme } from '@/shared/const/theme';
import { Button, ButtonSize, ButtonTheme } from './Button';
import { ThemeDecorator } from '../../config/storybook/ThemeDecorator/ThemeDecorator';
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 - конфигурация storybook
В папке scripts
находятся различные скрипты для рефакторинга\упрощения написания кода\генерации отчетов и тд.
Конфигурация github actions находится в /.github/workflows. В ci прогоняются все виды тестов, сборка проекта и storybook, линтинг.
В прекоммит хуках проверям проект линтерами, конфигурация находится в /.husky
Взаимодействие с данными осуществляется с помощью redux toolkit. По возможности переиспользуются сущности, которые необходимо нормализоват с помощью EntityAdapter.
Запросы на сервер отправляются с помощью RTK query
Для асинхронного подключения редюсеров (что бы не тянуть их в общий бандл) используется DynamicModuleLoader