npm install - install dependencies npm run start:dev or npm run start:dev:vite - start the server + frontend project in dev mode
npm run start
- Start the frontend project on webpack dev servernpm run start:vite
- Start the frontend project on vitenpm run start:dev
- Start the frontend project on webpack dev server + backendnpm run start:dev:vite
- Start the frontend project on vite + backendnpm run start:dev:server
- Start the backend servernpm run build:prod
- Build in production modenpm run build:dev
- Build in development mode (not minified)npm run lint:ts
- Check ts files with the linternpm run lint:ts:fix
- Fix ts files with the linternpm run lint:scss
- Check scss style files with the linternpm run lint:scss:fix
- Fix scss style files with the linternpm run test:unit
- Run unit tests with jestnpm run test:ui
- Run screenshot tests with lokinpm run test:ui:ok
- Confirm new screenshotsnpm run test:ui:ci
- Run screenshot tests in CInpm run test:ui:report
- Generate a complete report for screenshot testsnpm run test:ui:json
- Generate a JSON report for screenshot testsnpm run test:ui:html
- Generate an HTML report for screenshot testsnpm run storybook
- Run Storybooknpm run storybook:build
- Build Storybooknpm run prepare
- Pre-commit hooksnpm run generate:slice
- Script for generating FSD slices
The project is developed according to the Feature Sliced Design methodology.
Documentation link - feature sliced design
Allowed to use feature flags on with helpers, helper has options:
- name: feature name
- on: function that returs after enabling feature
- off: function that returs after disabling feature
For automated delition features there is a script remove-feature that has 2 props
- Feature name
- State (on/off)
The project uses the i18next library for handling translations. Translation files are stored in public/locales.
To work comfortably, we recommend installing the plugin for WebStorm/VSCode.
i18next documentation - https://react.i18next.com/
The project uses 4 types of tests:
- Regular unit tests with jest -
npm run test:unit
- Component tests with React Testing Library -
npm run test:unit
- Screenshot testing with loki
npm run test:ui
- End-to-end testing with Cypress
npm run test:e2e
More about tests - testing documentation
The project uses eslint for checking TypeScript code and stylelint for checking style files.
Additionally, to enforce strict control over key architectural principles, a custom eslint plugin eslint-plugin-viktors-plugin is used, which includes 3 rules:
- path-checker - prohibits the use of absolute imports within the same module
- layer-imports - checks the correct usage of layers from the perspective of FSD (e.g., widgets cannot be used in features and entities)
- public-api-imports - allows imports from other modules only from the public API. It has auto fix.
npm run lint:ts
- Check ts files with the linternpm run lint:ts:fix
- Fix ts files with the linternpm run lint:scss
- Check scss style files with the linternpm run lint:scss:fix
- Fix scss style files with the linter
Git hooks are set up for the project to run linters before commit.
To add git hooks to your project, run npm run prepare
.
The project uses Storybook for component development and documentation.
npm run storybook
- Run Storybooknpm run storybook:build
- Build Storybook
More about Storybook - https://storybook.js.org/