Docker building images improvement (#2767)

* Optional deps

* Move storybook as optional dep

* Set defaults

Dockerfile

@@ -2,16 +2,16 @@ FROM node:18-alpine as builder
 WORKDIR /app
 COPY package*.json ./
 COPY scripts/patchReactVirtualized.js scripts/
-RUN npm ci --legacy-peer-deps
+RUN npm ci --omit=optional --legacy-peer-deps
 
 COPY nginx/ nginx/
 COPY assets/ assets/
 COPY locale/ locale/
-COPY testUtils testUtils/
 COPY scripts/removeSourcemaps.js scripts/
 COPY codegen.yml ./
 COPY vite.config.js ./
 COPY tsconfig.json ./
+COPY sw.js ./
 COPY *.d.ts ./
 COPY schema.graphql ./
 COPY introspection.json ./
@@ -22,13 +22,14 @@ ARG APP_MOUNT_URI
 ARG MARKETPLACE_URL
 ARG SALEOR_APPS_ENDPOINT
 ARG STATIC_URL
+ARG SKIP_SOURCEMAPS
 
 ENV API_URI ${API_URI:-http://localhost:8000/graphql/}
 ENV APP_MOUNT_URI ${APP_MOUNT_URI:-/dashboard/}
 ENV MARKETPLACE_URL ${MARKETPLACE_URL}
 ENV SALEOR_APPS_ENDPOINT=${SALEOR_APPS_ENDPOINT}
 ENV STATIC_URL ${STATIC_URL:-/dashboard/}
-
+ENV SKIP_SOURCEMAPS ${SKIP_SOURCEMAPS:-true}
 RUN npm run build
 
 FROM nginx:stable-alpine as runner

package.json

@@ -42,8 +42,6 @@
     "color-convert": "^2.0.1",
     "crc-32": "^1.2.0",
     "currency-codes": "^2.1.0",
-    "cypress-mailhog": "^1.3.0",
-    "cypress-mochawesome-reporter": "^2.3.0",
     "downshift": "^6.1.7",
     "editorjs-inline-tool": "^0.4.0",
     "faker": "^5.1.0",
@@ -115,14 +113,12 @@
     "@release-it/bumper": "^2.0.0",
     "@saleor/app-sdk": "~0.23.0",
     "@sentry/webpack-plugin": "^1.14.0",
-    "@storybook/react": "^5.1.9",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/apollo-upload-client": "^17.0.0",
     "@types/color-convert": "^2.0.0",
     "@types/enzyme": "^3.10.8",
     "@types/fuzzaldrin": "^2.1.2",
-    "@types/jest": "^24.0.24",
     "@types/jscodeshift": "^0.11.3",
     "@types/lodash-es": "^4.17.3",
     "@types/pollyjs__adapter-node-http": "^2.0.1",
@@ -137,9 +133,6 @@
     "@types/react-sortable-tree": "^0.3.15",
     "@types/react-test-renderer": "^16.9.5",
     "@types/semver-compare": "^1.0.1",
-    "@types/setup-polly-jest": "^0.5.0",
-    "@types/storybook__addon-storyshots": "^3.4.9",
-    "@types/storybook__react": "^4.0.2",
     "@types/url-join": "^4.0.0",
     "@types/webappsec-credential-management": "^0.5.1",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
@@ -151,49 +144,27 @@
     "codecov": "^3.7.1",
     "core-js": "^3.7.0",
     "cross-env": "^6.0.3",
-    "cypress": "^10.0.2",
-    "cypress-file-upload": "^5.0.8",
-    "cypress-multi-reporters": "^1.5.0",
-    "cypress-timings": "^1.0.0",
     "dotenv": "^10.0.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
     "esbuild-loader": "^2.18.0",
-    "eslint": "^7.4.0",
-    "eslint-plugin-chai-friendly": "^0.6.0",
-    "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-formatjs": "^2.18.0",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-local-rules": "^0.1.1",
-    "eslint-plugin-prefer-arrow": "^1.1.6",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.1",
-    "eslint-plugin-simple-import-sort": "^5.0.3",
     "file-loader": "^5.0.2",
     "fork-ts-checker-webpack-plugin": "^3.1.1",
     "graphql-request": "^3.7.0",
-    "husky": "^4.3.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.8.0",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-file": "^1.0.0",
-    "jest-localstorage-mock": "^2.4.3",
     "jscodeshift": "^0.13.0",
     "lint-staged": "^10.5.1",
     "mocha-junit-reporter": "^2.0.2",
     "mochawesome": "^7.0.1",
     "mochawesome-merge": "^4.2.1",
     "mochawesome-report-generator": "^6.0.1",
-    "prettier": "^1.19.1",
     "react-test-renderer": "^16.12.0",
     "regenerator-runtime": "^0.11.1",
     "register-service-worker": "^1.7.2",
     "release-it": "^14.5.0",
     "require-context.macro": "^1.1.1",
     "rimraf": "^3.0.0",
-    "setup-polly-jest": "^0.9.1",
     "start-server-and-test": "^1.11.0",
-    "ts-jest": "^27.0.7",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "typescript": "^4.8.4",
     "vite": "^3.2.4",
@@ -208,7 +179,37 @@
     "workbox-strategies": "^6.1.2"
   },
   "optionalDependencies": {
-    "fsevents": "^1.2.9"
+    "@types/setup-polly-jest": "^0.5.0",
+    "setup-polly-jest": "^0.9.1",
+    "@types/jest": "^24.0.24",
+    "@storybook/addon-storyshots": "^5.2.8",
+    "@storybook/react": "^5.1.9",
+    "@types/storybook__addon-storyshots": "^3.4.9",
+    "@types/storybook__react": "^4.0.2",
+    "fsevents": "^1.2.9",
+    "cypress": "^10.0.2",
+    "cypress-file-upload": "^5.0.8",
+    "cypress-multi-reporters": "^1.5.0",
+    "cypress-timings": "^1.0.0",
+    "cypress-mailhog": "^1.3.0",
+    "cypress-mochawesome-reporter": "^2.3.0",
+    "jest": "^24.8.0",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-file": "^1.0.0",
+    "jest-localstorage-mock": "^2.4.3",
+    "husky": "^4.3.0",
+    "eslint": "^7.4.0",
+    "eslint-plugin-chai-friendly": "^0.6.0",
+    "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-formatjs": "^2.18.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-local-rules": "^0.1.1",
+    "eslint-plugin-prefer-arrow": "^1.1.6",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.1",
+    "eslint-plugin-simple-import-sort": "^5.0.3",
+    "prettier": "^1.19.1",
+    "ts-jest": "^27.0.7"
   },
   "jest": {
     "resetMocks": false,

vite.config.js

@@ -29,8 +29,11 @@ export default defineConfig(({ command, mode }) => {
     SALEOR_APPS_PAGE_PATH,
     SALEOR_APPS_JSON_PATH,
     APP_TEMPLATE_GALLERY_PATH,
+    SKIP_SOURCEMAPS,
   } = env;
 
+  const sourcemap = SKIP_SOURCEMAPS ? false : true;
+
   const enableSentry =
     SENTRY_ORG && SENTRY_PROJECT && SENTRY_DSN && SENTRY_AUTH_TOKEN;
 
@@ -118,8 +121,8 @@ export default defineConfig(({ command, mode }) => {
       },
     },
     build: {
+      sourcemap,
       minify: false,
-      sourcemap: true,
       emptyOutDir: true,
       outDir: "../build/dashboard",
       assetsDir: ".",