yarn - устанавливаем зависимости
yarn run start:dev или yarn run start:dev:vite - запуск сервера + frontend проекта в dev режиме
yarn start
- Запуск frontend проекта на webpack dev serveryarn run start:vite
- Запуск frontend проекта на viteyarn run start:dev
- Запуск frontend проекта на webpack dev server + backendyarn run start:dev:vite
- Запуск frontend проекта на vite + backendyarn run start:dev:server
- Запуск backend сервераyarn run build:prod
- Сборка в prod режимеyarn run build:dev
- Сборка в dev режиме (не минимизирован)yarn run lint:ts
- Проверка ts файлов линтеромyarn run lint:ts:fix
- Исправление ts файлов линтеромyarn run lint:scss
- Проверка scss файлов style линтеромyarn run lint:scss:fix
- Исправление scss файлов style линтеромyarn run test:unit
- Запуск unit тестов с jest
yarn run storybook
- запуск Storybookyarn run storybook:build
- Сборка storybook билдаyarn run prepare
- прекоммит хукиyarn run generate:slice
- Скрипт для генерации FSD слайсов
Проект написан в соответствии с методологией Feature sliced design
Ссылка на документацию - feature sliced design
В проекте используется библиотека i18next для работы с переводами. Файлы с переводами хранятся в public/locales.
Для комфортной работы рекомендуем установить плагин для webstorm/vscode
Документация i18next - https://react.i18next.com/
В проекте используются 2 вида тестов:
- Обычные unit тесты на jest -
yarn run test:unit
- Тесты на компоненты с React testing library -
yarn run test:unit
Подробнее о тестах - документация тестирование
В проекте используется eslint для проверки typescript кода и stylelint для проверки файлов со стилями.
Также для строгого контроля главных архитектурных принципов используется собственный eslint plugin eslint-plugin-lekarev, который содержит 3 правила
- path-checker - запрещает использовать абсолютные импорты в рамках одного модуля
- layer-imports - проверяет корректность использования слоев с точки зрения FSD (например widgets нельзя использовать в features и entitites)
- public-api-imports - разрешает импорт из других модулей только из public api. Имеет auto fix
yarn run lint:ts
- Проверка ts файлов линтеромyarn run lint:ts:fix
- Исправление ts файлов линтеромyarn run lint:scss
- Проверка scss файлов style линтеромyarn run lint:scss:fix
- Исправление scss файлов style линтером
В проекте для каждого компонента описываются стори-кейсы. Запросы на сервер мокаются с помощью storybook-addon-mock.
Файл со сторикейсами создает рядом с компонентом с расширением .stories.tsx
Запустить сторибук можно командой:
yarn run storybook
Подробнее о Storybook
Пример:
import { Meta, StoryObj } from '@storybook/react';
import { ECountrySchema } from '@/entities/Country';
import { ECurrency } from '@/entities/Currency';
import { StoreDecorator } from '@/shared/config/storybook/StoreDecorator/StoreDecorator';
import ProfilePage from './ProfilePage';
const url = `${__API__}/profile/1`;
export default {
title: 'pages/ProfilePage',
component: ProfilePage,
decorators: [StoreDecorator({})],
parameters: {
mockData: [
{
url,
method: 'GET',
status: 200,
response: {
firstName: 'Andrew2',
lastName: 'Ducalis',
age: '25',
currency: ECurrency.EUR,
country: ECountrySchema.USA,
city: 'Moscow',
username: 'Ducalis2000',
avatar: 'https://img.freepik.com/premium-photo/a-cat-wearing-sunglasses-and-a-hat-that-says-cat-on-it_924318-283.jpg',
},
},
],
},
} as Meta<typeof ProfilePage>;
type Story = StoryObj<typeof ProfilePage>;
export const Default: Story = {};
export const Loading: Story = {
parameters: {
mockData: [
{
url,
method: 'GET',
status: 200,
delay: 10000 * 10000,
response: {},
},
],
},
};
Для разработки проект содержит 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
Для асинхронного подключения редюсеров (чтобы не тянуть их в общий бандл) используется DynamicModuleLoader
Разрешено использование feature flags только с помощью хелпера toggleFeatures
в него передается объект с опциями
{ name: название фича-флага, on: функция, которая отработает после Включения фичи of: функция, которая отработает после ВЫключения фичи }
Для автоматического удаления фичи использовать скрипт remove-feature.ts, который принимает 2 аргумента
- Название удаляемого фича-флага
- Состояние (on\off)