npm install - устанавливаем зависимости
npm run start:dev или npm run start:dev:vite - запуск сервера + frontend проекта в dev режиме
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: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 storybook- запуск Storybooknpm run storybook:build- Сборка storybook билдаnpm run prepare- прекоммит хукиnpm run generate:slice- Скрипт для генерации FSD слайсов
Проект написан в соответствии с методологией 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 eslint-plugin-ulbi-tv-plugin, который содержит 3 правила:
- path-checker - запрещает использовать абсолютные импорты в рамках одного модуля
- layer-imports - проверяет корректность использования слоев с точки зрения FSD (например widgets нельзя использовать в features и entities)
- public-api-imports - разрешает импорт из других модулей только из public api. Имеет auto fix
Подробнее про linting
npm run lint:ts- Проверка ts файлов линтеромnpm run lint:ts:fix- Исправление ts файлов линтеромstylelint:scss- Проверка scss файлов style линтеромstylelint:scss:fix- Исправление scss файлов style линтером
В проекте для каждого компонента описываются стори-кейсы. Запросы на сервер мокаются с помощью storybook-addon-mock.
Файл со сторикейсами создает рядом с компонентом с расширением .stories.tsx
Запустить сторибук можно командой:
npm run storybook
Подробнее о Storybook
Пример story-файла:
import type { Meta, StoryObj } from '@storybook/react';
import { Theme } from '@/shared/lib';
import { StoreDecorator, ThemeDecorator } from '@/shared/config';
import { Code } from './Code';
const meta = {
title: 'shared/Code',
component: Code,
tags: ['autodocs'],
args: {
children: 'import type { Meta, StoryObj } from \'@storybook/react\';\n'
+ '\n'
+ 'import { Theme } from \'shared/lib\';\n'
+ 'import { StoreDecorator, ThemeDecorator } from \'shared/config\';\n'
+ 'import { Code } from \'./Code\';\n'
+ '\n'
+ 'const meta = {\n'
+ ' title: \'shared/Code\',\n'
+ ' component: Code,\n'
+ ' tags: [\'autodocs\'],',
},
} as Meta<typeof Code>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Dark: Story = {
decorators: [ThemeDecorator(Theme.DARK), StoreDecorator({})],
};
export const Light: Story = {
decorators: [ThemeDecorator(Theme.LIGHT), StoreDecorator({})],
};Для разработки проект содержит 2 конфига:
- production: Webpack - ./config/build
- development: vite - vite.config.ts
Оба сборщика адаптированы под основные фичи приложения.
Вся конфигурация хранится в /config
Сборка:
Тесты:
- jest - конфигурация тестовой среды
- storybook - конфигурация сторибука
- loki - конфигурация для скриншот тестов
В папке scripts находятся различные скрипты для рефакторинга\упрощения написания кода\генерации отчетов и тд.
Конфигурация github actions находится в /.github/workflows. В ci прогоняются все виды тестов, сборка проекта и сторибука, линтинг.
В прекоммит хуках проверяем проект линтерами, конфиг в /.husky
Взаимодействие с данными осуществляется с помощью redux toolkit. По возможности переиспользуемые сущности необходимо нормализовать с помощью EntityAdapter
Запросы на сервер отправляются с помощью RTK query
Для асинхронного подключения редюсеров (чтобы не тянуть их в общий бандл) используется DynamicModuleLoader
Для работы с путями в прокте используется React router DOM
Конфигурация роутера лежи в src/app/providers/router
- addCommentForm
- articleRating
- articleRecommendationsList
- AuthByUsername
- avatarDropdown
- editableProfileCard
- LangSwitcher
- notificationButton
- ThemeSwitcher
- AboutPage
- AdminPanelPage
- ArticleDetailsPage
- ArticlePage
- ForbiddenPage
- MainPage
- NotFoundPage
- ProfilePage
- В проекте используется кстомная UI библиотека, а также стороняя библиотека HeadlessUI. Все UI компоненты лежат в /src/shared/ui. Документация по каждому компоненту находитя рядом с компонентом *componentName*.md
- Все ассеты находятся в /src/shared/assets: assets.
- Все вспомогательные инструменты для тестирования и разработки, например хуки, контексты, оберткки или хелперы для тестирования, находятся в /src/shared/lib: lib.
- В папке config находятся конфигурационые файлы для тестов,
- storybook`a и функции геттеры для работы с роутингом.