npm install - install dependencies
npm run start or npm run start:webpack - start server + frontend project in dev mode
npm run start:dev:webpack- Start frontend project on webpack dev servernpm run start:dev- Start frontend project on vitenpm run build:prod- Build in prod modenpm run build:dev- Build in dev mode (not minimized)npm run lint:ts- Check ts files with linternpm run lint:ts:fix- Fix ts files with linternpm run lint:scss- Check scss files style by linternpm run lint:scss:fix- Corrects scss 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 full report for screenshot testsnpm run test:ui:json- Generate json report for screenshot testsnpm run test:ui:html- Generate HTML report for screenshot testsnpm run sb- Run Storybooknpm run sb:build- Build a storybook buildnpm run prepare- precommit hooks
The project is written according to the Feature sliced design methodology Documentation link - feature sliced design
The project uses i18next library to work with translations. Files with translations are stored in public/locales. For comfortable work we recommend to install plugin for webstorm/vscode Documentation i18next - https://react.i18next.com/
There are 4 types of tests used in the project:
- normal unit tests on jest -
npm run test:unit. - tests on components with React testing library -
npm run test:unit. - Screenshot testing with loki
npm run test:ui - e2e testing with Cypress
npm run test:e2e. More information about tests - documentation testing
The project uses eslint to check typescript code and stylelint to check style files. Also for strict control of the main architectural principles our own eslint plugin eslint-plugin-ulbi-tv-plugin is used, which contains 3 rules
- path-checker - forbids to use absolute imports within one module
- layer-imports - checks if layers are used correctly from FSD point of view. (e.g. widgets cannot be used in features and entitites)
- public-api-imports - allows import from other modules only from public api. Has auto fix
npm run lint:ts- Check ts files by linternpm run lint:ts:fix- Fix ts files with linternpm run lint:scss- Check scss files with linternpm run lint:scss:fix- Fix scss style files with linter
In the project, storybooks are described for each component. Requests to the server are mocked using storybook-addon-mock. A file with storybooks creates next to the component with the extension .stories.tsx You can run the storybook with the command:
npm run sb. Read more about Storybook
For development, the project contains 2 configs:
- webpack - ./config/build
- vite - vite.config.ts Both builds are customized for the main features of the application. All configuration is stored in /config
- /config/babel - babel
- /config/build - webpack configuration
- /config/jest - test environment configuration
- /config/storybook - storybook configuration
The github actions configuration is in /.github/workflows. In ci we run all kinds of tests, build project and storybook, linting. In pre commit hooks we check the project with linters, config is in /.husky
Interacting with data is done with redux toolkit. If possible, overused entities should be normalized with EntityAdapter Requests to the server are sent using RTK query For asynchronous connection of redusers (to avoid pulling them into a common bundle) we use DynamicModuleLoader
Feature flags can only be used with the toggleFeatures helper. an object with options is passed to it { name: the name of the feature-flag, on: the function that will be triggered when the feature is enabled of: the function that will work after the feature is turned OFF } To automatically remove a fiche, use the remove-feature.ts script, which takes 2 arguments
- The name of the fiche-feature to be removed
- State (on/off)