Migrate to node 16, npm 7. (#3773)

* Migrate to node 16 and nmp 7.

* Step 2

* Moving eslint to one package.json

* Fix package for 3D

* Update package files

* Fix package.json. Update package-lock.json. Update DockeFile.ui

* Change "node-sass" to "sass" due to snyk issues

* Automatically update your stylesheets due to DEPRECATION WARNING from sass

* Moving all dev dependencies to root package.json

* Remove unnecessary dependence from cvat-core-package.json

* Update of the year in copyrights

* Update CHANGELOG.md

* Define workspaces

* Update npm command to root package.json

* Update npm commands and corresponding files

* Update npm command.

* Fix Dockerfile.ui

* Fix error loading rule '@typescript-eslint/dot-notation'

* Fix eslint check issue

Co-authored-by: Boris Sekachev <boris.sekachev@intel.com>

.github/workflows/eslint.yml

@@ -7,7 +7,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-            node-version: 12
+            node-version: '16.x'
 
       - name: Run checks
         run: |
@@ -21,10 +21,8 @@ jobs:
           done
 
           if [[ ! -z ${changed_files_eslint} ]]; then
-            for package_files in `find -maxdepth 2 -name "package.json" -type f`; do
+            npm ci
-              cd $(dirname $package_files) && npm ci && cd ${{ github.workspace }}
+            npm install eslint-detailed-reporter --save-dev --legacy-peer-deps
-            done
-            npm install eslint-detailed-reporter --save-dev
             mkdir -p eslint_report
 
             echo "ESLint version: "`npx eslint --version`

.github/workflows/github_pages.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: '14.x'
+          node-version: '16.x'
 
       - name: Install npm packages
         working-directory: ./site

.github/workflows/main.yml

@@ -126,7 +126,7 @@ jobs:
           key: ${{ runner.os }}-build-ui-${{ steps.get-sha.outputs.sha }}
       - uses: actions/setup-node@v2
         with:
-            node-version: 12
+            node-version: '16.x'
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v1.1.2
       - name: Building CVAT server image

.github/workflows/publish_docker_images.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-            node-version: 12
+            node-version: '16.x'
       - name: Run end-to-end tests
         env:
           DJANGO_SU_NAME: 'admin'

.github/workflows/remark.yml

@@ -7,7 +7,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-            node-version: 12
+            node-version: '16.x'
 
       - name: Run checks
         run: |

.github/workflows/schedule.yml

@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-            node-version: 12
+            node-version: '16.x'
       - name: Build CVAT
         env:
           DJANGO_SU_NAME: "admin"

.github/workflows/stylelint.yml

@@ -7,7 +7,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-            node-version: 12
+            node-version: '16.x'
 
       - name: Run checks
         run: |

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - UI tracking has been reworked (<https://github.com/openvinotoolkit/cvat/pull/3571>)
 - Manifest generation: Reduce creating time (<https://github.com/openvinotoolkit/cvat/pull/3712>)
+- Migration from NPM 6 to NPM 7 (<https://github.com/openvinotoolkit/cvat/pull/3773>)
 
 ### Deprecated
 

Dockerfile.ci

@@ -14,7 +14,7 @@ RUN apt-get update && \
         && \
     curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
     echo 'deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main' | tee /etc/apt/sources.list.d/google-chrome.list && \
-    curl https://deb.nodesource.com/setup_12.x | bash - && \
+    curl https://deb.nodesource.com/setup_16.x | bash - && \
     DEBIAN_FRONTEND=noninteractive apt-get --no-install-recommends install -yq \
         google-chrome-stable \
         nodejs \

Dockerfile.ui

@@ -1,4 +1,4 @@
-FROM node:lts-buster AS cvat-ui
+FROM node:stretch AS cvat-ui
 
 ARG http_proxy
 ARG https_proxy
@@ -16,31 +16,16 @@ ENV TERM=xterm \
     LC_ALL='C.UTF-8'
 
 # Install dependencies
+COPY package*.json /tmp/
 COPY cvat-core/package*.json /tmp/cvat-core/
 COPY cvat-canvas/package*.json /tmp/cvat-canvas/
 COPY cvat-canvas3d/package*.json /tmp/cvat-canvas3d/
 COPY cvat-ui/package*.json /tmp/cvat-ui/
 COPY cvat-data/package*.json /tmp/cvat-data/
 
-# Install cvat-data dependencies
+# Install common dependencies
-WORKDIR /tmp/cvat-data/
+WORKDIR /tmp/
-RUN npm ci
+RUN npm ci --ignore-scripts
-
-# Install cvat-core dependencies
-WORKDIR /tmp/cvat-core/
-RUN npm ci
-
-# Install cvat-canvas dependencies
-WORKDIR /tmp/cvat-canvas/
-RUN npm ci
-
-# Install cvat-canvas dependencies
-WORKDIR /tmp/cvat-canvas3d/
-RUN npm ci
-
-# Install cvat-ui dependencies
-WORKDIR /tmp/cvat-ui/
-RUN npm ci
 
 # Build source code
 COPY cvat-data/ /tmp/cvat-data/
@@ -48,7 +33,7 @@ COPY cvat-core/ /tmp/cvat-core/
 COPY cvat-canvas3d/ /tmp/cvat-canvas3d/
 COPY cvat-canvas/ /tmp/cvat-canvas/
 COPY cvat-ui/ /tmp/cvat-ui/
-RUN npm run build
+RUN npm run build:cvat-ui
 
 FROM nginx:mainline-alpine
 # Replace default.conf configuration to remove unnecessary rules

cvat-canvas/.eslintrc.js

@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2020 Intel Corporation
+// Copyright (C) 2019-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -9,6 +9,8 @@ module.exports = {
     parserOptions: {
         parser: '@typescript-eslint/parser',
         ecmaVersion: 6,
+        project: './tsconfig.json',
+        tsconfigRootDir: __dirname,
     },
     plugins: ['@typescript-eslint', 'import'],
     extends: [
@@ -18,6 +20,7 @@ module.exports = {
         'plugin:import/warnings',
         'plugin:import/typescript',
     ],
+    ignorePatterns: ['.eslintrc.js'],
     rules: {
         '@typescript-eslint/no-explicit-any': 0,
         '@typescript-eslint/indent': ['warn', 4],

cvat-canvas/package.json

@@ -15,39 +15,12 @@
     "not IE 11",
     "> 2%"
   ],
+  "devDependencies": {},
   "dependencies": {
     "svg.draggable.js": "2.2.2",
     "svg.draw.js": "^2.0.4",
     "svg.js": "2.7.1",
     "svg.resize.js": "1.4.3",
     "svg.select.js": "3.0.1"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.12.13",
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-typescript": "^7.3.3",
-    "@types/node": "^12.6.8",
-    "@typescript-eslint/eslint-plugin": "^1.13.0",
-    "@typescript-eslint/parser": "^1.13.0",
-    "babel-loader": "^8.0.6",
-    "css-loader": "^3.4.2",
-    "dts-bundle-webpack": "^1.0.2",
-    "eslint": "^6.1.0",
-    "eslint-config-airbnb-typescript": "^4.0.1",
-    "eslint-config-typescript-recommended": "^1.4.17",
-    "eslint-plugin-import": "^2.22.1",
-    "node-sass": "^4.14.1",
-    "nodemon": "^2.0.7",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.0.0",
-    "typescript": "^3.5.3",
-    "webpack": "^5.20.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
   }
 }

cvat-canvas3d/.eslintrc.js

@@ -9,6 +9,8 @@ module.exports = {
     parserOptions: {
         parser: '@typescript-eslint/parser',
         ecmaVersion: 6,
+        project: './tsconfig.json',
+        tsconfigRootDir: __dirname,
     },
     plugins: ['@typescript-eslint', 'import'],
     extends: [
@@ -18,6 +20,7 @@ module.exports = {
         'plugin:import/warnings',
         'plugin:import/typescript',
     ],
+    ignorePatterns: ['.eslintrc.js'],
     rules: {
         '@typescript-eslint/no-explicit-any': 0,
         '@typescript-eslint/indent': ['warn', 4],

cvat-canvas3d/package.json

@@ -15,37 +15,10 @@
     "not IE 11",
     "> 2%"
   ],
-  "devDependencies": {
+  "devDependencies": {},
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-typescript": "^7.3.3",
-    "@types/node": "^12.6.8",
-    "@typescript-eslint/eslint-plugin": "^1.13.0",
-    "@typescript-eslint/parser": "^1.13.0",
-    "babel-loader": "^8.0.6",
-    "css-loader": "^3.4.2",
-    "dts-bundle-webpack": "^1.0.2",
-    "eslint": "^6.1.0",
-    "eslint-config-airbnb-typescript": "^4.0.1",
-    "eslint-config-typescript-recommended": "^1.4.17",
-    "eslint-plugin-import": "^2.18.2",
-    "node-sass": "^4.14.1",
-    "nodemon": "^1.19.4",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.0.0",
-    "typescript": "^3.5.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
-  },
   "dependencies": {
     "@types/three": "^0.125.3",
     "camera-controls": "^1.25.3",
-    "three": "^0.125.0"
+    "three": "^0.126.1"
   }
 }

cvat-core/package.json

@@ -18,25 +18,10 @@
     "> 2%"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.4",
-    "@babel/preset-env": "^7.4.4",
-    "airbnb": "0.0.2",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.6",
     "coveralls": "^3.0.5",
-    "eslint": "6.1.0",
-    "eslint-config-airbnb-base": "14.0.0",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-jest": "^24.1.0",
-    "eslint-plugin-no-unsafe-innerhtml": "^1.0.16",
-    "eslint-plugin-no-unsanitized": "^3.0.2",
-    "eslint-plugin-security": "^1.4.0",
     "jest": "^26.6.3",
     "jest-junit": "^6.4.0",
-    "jsdoc": "^3.6.6",
+    "jsdoc": "^3.6.6"
-    "webpack": "^4.31.0",
-    "webpack-cli": "^3.3.2"
   },
   "dependencies": {
     "axios": "^0.21.4",
@@ -50,7 +35,6 @@
     "js-cookie": "^2.2.0",
     "platform": "^1.3.5",
     "quickhull": "^1.0.3",
-    "store": "^2.0.12",
+    "store": "^2.0.12"
-    "worker-loader": "^2.0.0"
   }
 }

cvat-data/package.json

@@ -16,23 +16,7 @@
     "not IE 11",
     "> 2%"
   ],
-  "devDependencies": {
+  "devDependencies": {},
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.4.4",
-    "@babel/preset-env": "^7.4.4",
-    "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^7.0.0",
-    "eslint": "^6.4.0",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-no-unsafe-innerhtml": "^1.0.16",
-    "eslint-plugin-no-unsanitized": "^3.0.2",
-    "eslint-plugin-security": "^1.4.0",
-    "nodemon": "^1.19.2",
-    "webpack": "^5.20.2",
-    "webpack-cli": "^3.3.7",
-    "worker-loader": "^2.0.0"
-  },
   "dependencies": {
     "async-mutex": "^0.3.2",
     "jszip": "3.7.1"

cvat-ui/package.json

@@ -19,40 +19,7 @@
   ],
   "author": "Intel",
   "license": "MIT",
-  "devDependencies": {
+  "devDependencies": {},
-    "@babel/core": "^7.6.0",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@babel/preset-env": "^7.6.0",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.6.0",
-    "@types/mousetrap": "^1.6.5",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-import": "^1.12.2",
-    "copy-webpack-plugin": "^5.1.2",
-    "css-loader": "^3.2.0",
-    "eslint": "^7.11.0",
-    "eslint-config-airbnb-typescript": "^12.0.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "html-webpack-plugin": "^3.2.0",
-    "node-sass": "^4.14.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
-    "react-svg-loader": "^3.0.3",
-    "sass-loader": "^8.0.0",
-    "style-loader": "^1.0.0",
-    "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "typescript": "^3.7.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "worker-loader": "^2.0.0"
-  },
   "dependencies": {
     "@ant-design/icons": "^4.6.3",
     "@types/lodash": "^4.14.172",

cvat-ui/src/base.scss

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -6,7 +6,7 @@ $grid-unit-size: 8px;
 
 $header-height: $grid-unit-size * 7;
 
-$layout-sm-grid-size: $grid-unit-size / 2;
+$layout-sm-grid-size: $grid-unit-size * 0.5;
 $layout-lg-grid-size: $grid-unit-size * 2;
 $layout-sm-grid-color: rgba(0, 0, 0, 0.15);
 $layout-lg-grid-color: rgba(0, 0, 0, 0.15);

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -318,7 +318,7 @@
     background: rgb(25, 184, 14);
     height: 80%;
     width: 90%;
-    border-radius: $grid-unit-size / 2;
+    border-radius: $grid-unit-size * 0.5;
 }
 
 .cvat-label-item-setup-shortcut-button {
@@ -415,7 +415,7 @@
     border-radius: 6px;
     border: 1px solid $border-color-3;
     z-index: 100;
-    padding: $grid-unit-size / 2 $grid-unit-size * 2 $grid-unit-size / 2 $grid-unit-size / 2;
+    padding: $grid-unit-size * 0.5 $grid-unit-size * 2 $grid-unit-size * 0.5 $grid-unit-size * 0.5;
 
     .ant-slider-mark {
         position: static;

cvat-ui/src/components/annotation-page/standard-workspace/styles.scss

@@ -32,7 +32,7 @@
     }
 
     > .ant-image {
-        margin: $grid-unit-size / 2;
+        margin: $grid-unit-size * 0.5;
     }
 
     > span {

cvat-ui/src/components/annotation-page/standard3D-workspace/styles.scss

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -14,7 +14,7 @@
     height: 100%;
     width: 100%;
     position: relative;
-    padding: $grid-unit-size/2;
+    padding: $grid-unit-size * 0.5;
 }
 
 .cvat-canvas3d-orthographic-views {
@@ -37,7 +37,7 @@
 }
 
 .cvat-canvas3d-perspective-arrow-directions-icons-bottom {
-    margin: $grid-unit-size/2;
+    margin: $grid-unit-size * 0.5;
 }
 
 .cvat-canvas3d-perspective-arrow-directions-icons-color {
@@ -52,28 +52,28 @@
 }
 
 .cvat-canvas3d-perspective-directions-icon {
-    margin: $grid-unit-size/2 $grid-unit-size/4;
+    margin: $grid-unit-size * 0.5 $grid-unit-size * 0.25;
     width: $grid-unit-size * 4;
 }
 
 .cvat-canvas3d-orthographic-view {
     width: 100%;
     height: 100%;
-    padding-top: $grid-unit-size/2;
+    padding-top: $grid-unit-size * 0.5;
-    padding-bottom: $grid-unit-size/2;
+    padding-bottom: $grid-unit-size * 0.5;
 }
 
 .cvat-canvas3d-topview {
-    padding-left: $grid-unit-size/2;
+    padding-left: $grid-unit-size * 0.5;
-    padding-right: $grid-unit-size/2;
+    padding-right: $grid-unit-size * 0.5;
 }
 
 .cvat-canvas3d-sideview {
-    padding-right: $grid-unit-size/2;
+    padding-right: $grid-unit-size * 0.5;
 }
 
 .cvat-canvas3d-frontview {
-    padding-right: $grid-unit-size/2;
+    padding-right: $grid-unit-size * 0.5;
 }
 
 .cvat-canvas3d-fullsize {
@@ -91,7 +91,7 @@
     top: 0;
     left: 0;
     background-color: grey;
-    height: $grid-unit-size/2;
+    height: $grid-unit-size * 0.5;
 }
 
 .cvat-canvas3d-header {
@@ -115,13 +115,13 @@
     bottom: 0;
     left: 0;
     background-color: grey;
-    height: $grid-unit-size/2;
+    height: $grid-unit-size * 0.5;
     cursor: ns-resize;
 }
 
 .cvat-resizable-handle-vertical-side {
     position: absolute;
-    width: $grid-unit-size/2;
+    width: $grid-unit-size * 0.5;
     margin-right: auto;
     top: $grid-unit-size * 4.5;
     right: 0;
@@ -133,7 +133,7 @@
 
 .cvat-resizable-handle-vertical-top {
     position: absolute;
-    width: $grid-unit-size/2;
+    width: $grid-unit-size * 0.5;
     margin-right: auto;
     top: $grid-unit-size * 4.5;
     right: 0;

cvat-ui/src/components/annotation-page/styles.scss

@@ -486,7 +486,7 @@ button.cvat-predictor-button {
             }
 
             .group-or-rule {
-                border-radius: $grid-unit-size / 4;
+                border-radius: $grid-unit-size * 0.25;
             }
 
             .group {

cvat-ui/src/components/create-cloud-storage-page/styles.scss

@@ -22,7 +22,7 @@
         width: 100%;
         height: auto;
         border: 1px solid $border-color-1;
-        border-radius: $grid-unit-size / 2;
+        border-radius: $grid-unit-size * 0.5;
         padding: $grid-unit-size * 2;
         background: $background-color-1;
         text-align: initial;

package.json

@@ -6,24 +6,63 @@
   "directories": {
     "test": "tests"
   },
+  "workspaces": [
+    "cvat-data",
+    "cvat-core",
+    "cvat-canvas",
+    "cvat-canvas3d",
+    "cvat-ui"
+  ],
   "dependencies": {},
   "devDependencies": {
+    "@babel/cli": "^7.13.16",
+    "@babel/core": "^7.6.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.6.0",
     "@istanbuljs/nyc-config-babel": "^1.0.1",
+    "@types/mousetrap": "^1.6.5",
+    "@types/node": "^12.6.8",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "airbnb": "0.0.2",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-import": "^1.12.2",
     "babel-plugin-istanbul": "^6.0.0",
     "babel-register": "^6.26.0",
+    "copy-webpack-plugin": "^5.1.2",
     "coveralls": "^3.1.0",
+    "css-loader": "^3.4.2",
+    "dts-bundle-webpack": "^1.0.2",
     "eslint": "^7.11.0",
     "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb-base": "14.2.1",
+    "eslint-config-airbnb-typescript": "^12.0.0",
     "eslint-config-prettier": "^6.14.0",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-header": "^3.1.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-no-unsafe-innerhtml": "^1.0.16",
+    "eslint-plugin-no-unsanitized": "^3.0.2",
     "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-security": "^1.4.0",
+    "html-webpack-plugin": "^3.2.0",
     "husky": "^6.0.0",
     "lint-staged": "^10.4.2",
     "micromatch": "^4.0.2",
+    "nodemon": "^2.0.7",
     "nyc": "^15.1.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.7.0",
     "prettier": "2.1.2",
+    "react-svg-loader": "^3.0.3",
     "remark-cli": "^9.0.0",
     "remark-frontmatter": "^3.0.0",
     "remark-gfm": "^1.0.0",
@@ -39,10 +78,19 @@
     "remark-preset-lint-consistent": "^4.0.0",
     "remark-preset-lint-markdown-style-guide": "^4.0.0",
     "remark-preset-lint-recommended": "^5.0.0",
+    "sass": "^1.42.1",
+    "sass-loader": "^10.0.0",
     "source-map-support": "^0.5.19",
+    "style-loader": "^1.0.0",
     "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
-    "vfile-reporter-json": "^2.0.2"
+    "tsconfig-paths-webpack-plugin": "^3.2.0",
+    "typescript": "^3.7.3",
+    "vfile-reporter-json": "^2.0.2",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
+    "worker-loader": "^2.0.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -55,7 +103,16 @@
     "precommit:cvat-core": "cd cvat-ui && eslint --fix",
     "precommit:cvat-canvas": "cd cvat-ui && eslint --fix",
     "precommit:cvat-canvas3d": "cd cvat-ui && eslint --fix",
-    "precommit:cvat-ui": "cd cvat-ui && eslint --fix"
+    "precommit:cvat-ui": "cd cvat-ui && eslint --fix",
+    "build:cvat-ui": "npm run build --workspace=cvat-ui",
+    "build:cvat-canvas": "npm run build --workspace=cvat-canvas",
+    "build:cvat-canvas3d": "npm run build --workspace=cvat-canvas3d",
+    "build:cvat-core": "npm run build --workspace=cvat-core",
+    "build:cvat-data": "npm run build --workspace=cvat-data",
+    "server:cvat-canvas": "npm run server --workspace=cvat-canvas",
+    "server:cvat-canvas3d": "npm run server --workspace=cvat-canvas3d",
+    "server:cvat-data": "npm run server --workspace=cvat-data",
+    "start:cvat-ui": "npm run start --workspace=cvat-ui"
   },
   "repository": {
     "type": "git",

site/content/en/docs/contributing/development-environment.md

@@ -14,8 +14,8 @@ description: 'Installing a development environment for different operating syste
   ```
 
   ```sh
-  # Install Node.js 12
+  # Install Node.js 16
-  curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
+  curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
   sudo apt-get install -y nodejs
   ```
 
@@ -62,9 +62,7 @@ description: 'Installing a development environment for different operating syste
 - Install npm packages for UI and start UI debug server (run the following command from CVAT root directory):
 
   ```sh
-  npm ci && \
+  npm ci && npm run start:cvat-ui
-  cd cvat-core && npm ci && \
-  cd ../cvat-ui && npm ci && npm start
   ```
 
   > Note for Mac users
@@ -78,7 +76,7 @@ description: 'Installing a development environment for different operating syste
 - Open new terminal (Ctrl + Shift + T), run Visual Studio Code from the virtual environment
 
   ```sh
-  cd .. && source .env/bin/activate && code
+  source .env/bin/activate && code
   ```
 
 - Install following VS Code extensions:

site/content/en/docs/manual/basics/objects-sidebar.md

@@ -4,6 +4,7 @@ linkTitle: 'Objects sidebar'
 weight: 9
 description: 'Overview of available functions on the objects sidebar of the annotation tool.'
 ---
+
 ## Hide objects sidebar
 
 `Hide` - the button hides the object's sidebar.
@@ -115,10 +116,10 @@ To assign a number, click on the button placed at the right of a label name on t
 ![](/images/image210.jpg)
 
 After that you will be able to assign a corresponding label to an object
- by hovering your mouse cursor over it and pressing `Ctrl + Num(0..9)`.
+by hovering your mouse cursor over it and pressing `Ctrl + Num(0..9)`.
 
 In case you do not point the cursor to the object, pressing `Ctrl + Num(0..9)` will set a chosen label as default,
- so that the next object you create (use `N` key) will automatically have this label assigned.
+so that the next object you create (use `N` key) will automatically have this label assigned.
 
 ![](/images/image211.jpg)