Frontend Docker build improvements (#749)

frontend/Dockerfile

@@ -1,22 +1,19 @@
+# syntax=docker/dockerfile:1.4
 # central place to configure the production replayweb.page loading prefix
 ARG RWP_BASE_URL=https://cdn.jsdelivr.net/npm/replaywebpage/
 
-FROM docker.io/library/node:16 as build
+FROM docker.io/library/node:16 as build_deps
-
-ARG GIT_COMMIT_HASH
-ARG GIT_BRANCH_NAME
-ARG VERSION
-
-ENV GIT_COMMIT_HASH=${GIT_COMMIT_HASH} \
-    GIT_BRANCH_NAME=${GIT_BRANCH_NAME} \
-    VERSION=${VERSION}
-
 
 WORKDIR /app
 COPY yarn.lock package.json ./
-RUN yarn --frozen-lockfile --network-timeout 1000000
+# Uses `yarn cache clean` to let Docker cache layer instead
+# of including yarn cache in the build image
+RUN yarn --production --frozen-lockfile --network-timeout 1000000 && \
+    yarn cache clean
 
-COPY lit-localize.json \
+FROM build_deps as build
+
+COPY --link lit-localize.json \
     postcss.config.js \
     tailwind.config.js \
     tsconfig.json \
@@ -25,20 +22,33 @@ COPY lit-localize.json \
     index.d.ts \
     ./
 
-COPY src ./src/
+COPY --link src ./src/
 
-RUN yarn build
+# Build variables used to show current app version
+# in the UI. Note that this will invalidate all
+# subsequent RUN steps.
+ARG GIT_COMMIT_HASH
+ARG GIT_BRANCH_NAME
+ARG VERSION
+
+ENV GIT_COMMIT_HASH=${GIT_COMMIT_HASH} \
+    GIT_BRANCH_NAME=${GIT_BRANCH_NAME} \
+    VERSION=${VERSION}
+
+# Prevent Docker caching node_modules
+RUN yarn build && \
+    rm -rf ./node_modules
 
 FROM docker.io/library/nginx:1.23.2
 
 ARG RWP_BASE_URL
 ENV RWP_BASE_URL=${RWP_BASE_URL}
 
-COPY --from=build /app/dist /usr/share/nginx/html
+COPY --link --from=build /app/dist /usr/share/nginx/html
 
 #COPY ./nginx.conf /etc/nginx/nginx.conf
-COPY ./frontend.conf.template /etc/nginx/templates/
+COPY --link ./frontend.conf.template /etc/nginx/templates/
-COPY ./minio.conf /etc/nginx/includes/
+COPY --link ./minio.conf /etc/nginx/includes/
 
-ADD ./00-browsertrix-nginx-init.sh ./docker-entrypoint.d/
+ADD --link ./00-browsertrix-nginx-init.sh ./docker-entrypoint.d/
 

frontend/package.json

@@ -7,21 +7,52 @@
     "@cheap-glitch/mi-cron": "^1.0.1",
     "@lit/localize": "^0.11.4",
     "@novnc/novnc": "^1.4.0-beta",
+    "@rollup/plugin-commonjs": "^18.0.0",
     "@shoelace-style/shoelace": "2.0.0-beta.85",
+    "@types/color": "^3.0.2",
+    "@types/lodash": "^4.14.178",
+    "@types/sinon": "^10.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "@xstate/fsm": "^1.6.2",
+    "autoprefixer": "^10.4.2",
     "axios": "^0.22.0",
     "broadcastchannel-polyfill": "^1.0.1",
     "color": "^4.0.1",
+    "copy-webpack-plugin": "^9.1.0",
+    "css-loader": "^6.3.0",
+    "del-cli": "^4.0.1",
+    "dotenv": "^10.0.0",
+    "dotenv-webpack": "^7.0.3",
+    "eslint": "^8.2.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-lit": "^1.6.1",
+    "eslint-plugin-wc": "^1.3.2",
+    "eslint-webpack-plugin": "^3.1.1",
     "fuse.js": "^6.5.3",
+    "glob": "^8.1.0",
+    "html-loader": "^3.0.1",
+    "html-webpack-plugin": "^5.5.0",
     "immutable": "^4.1.0",
     "iso-639-1": "^2.1.15",
     "lit": "^2.4.1",
     "lodash": "^4.17.21",
+    "node-fetch": "^3.1.0",
+    "postcss": "^8.4.5",
+    "postcss-loader": "^6.1.1",
+    "prettier": "^2.4.1",
     "pretty-ms": "^7.0.1",
     "query-string": "^8.1.0",
     "regex-colorize": "^0.0.3",
+    "style-loader": "^3.3.0",
     "tailwindcss": "^3.2.7",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.2",
+    "update-dotenv": "^1.1.1",
     "url-pattern": "^1.0.3",
+    "webpack": "^5.56.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-merge": "^5.8.0",
     "yaml": "^2.0.0-11"
   },
   "scripts": {
@@ -43,47 +74,16 @@
     "@lit/localize-tools": "^0.6.5",
     "@open-wc/testing": "^3.1.7",
     "@playwright/test": "1.32.1",
-    "@rollup/plugin-commonjs": "^18.0.0",
-    "@types/color": "^3.0.2",
-    "@types/lodash": "^4.14.178",
-    "@types/sinon": "^10.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
     "@web/dev-server-esbuild": "^0.3.3",
     "@web/dev-server-import-maps": "^0.0.6",
     "@web/dev-server-rollup": "^0.3.21",
     "@web/test-runner": "^0.13.22",
     "@web/test-runner-playwright": "^0.8.8",
-    "autoprefixer": "^10.4.2",
     "chromium": "^3.0.3",
-    "copy-webpack-plugin": "^9.1.0",
-    "css-loader": "^6.3.0",
-    "del-cli": "^4.0.1",
-    "dotenv": "^10.0.0",
-    "dotenv-webpack": "^7.0.3",
-    "eslint": "^8.2.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-lit": "^1.6.1",
-    "eslint-plugin-wc": "^1.3.2",
-    "eslint-webpack-plugin": "^3.1.1",
-    "glob": "^8.1.0",
-    "html-loader": "^3.0.1",
-    "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
-    "node-fetch": "^3.1.0",
-    "postcss": "^8.4.5",
-    "postcss-loader": "^6.1.1",
-    "prettier": "^2.4.1",
     "sinon": "^12.0.1",
-    "style-loader": "^3.3.0",
+    "webpack-dev-server": "^4.3.0"
-    "ts-loader": "^9.2.6",
-    "typescript": "^4.5.2",
-    "update-dotenv": "^1.1.1",
-    "webpack": "^5.56.0",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.3.0",
-    "webpack-merge": "^5.8.0"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",

frontend/webpack.config.js

@@ -81,8 +81,11 @@ const main = {
       {
         test: /\.ts$/,
         include: path.resolve(__dirname, "src"),
-        use: "ts-loader",
+        loader: "ts-loader",
         exclude: /node_modules/,
+        options: {
+          onlyCompileBundledFiles: true,
+        },
       },
       {
         test: /\.css$/,
@@ -113,7 +116,7 @@ const main = {
     }),
 
     new webpack.optimize.LimitChunkCountPlugin({
-      maxChunks: 12
+      maxChunks: 12,
     }),
 
     new HtmlWebpackPlugin({

frontend/yarn.lock

@@ -89,37 +89,6 @@
   dependencies:
     "@floating-ui/core" "^1.2.3"
 
-"@formatjs/ecma402-abstract@1.11.4":
-  version "1.11.4"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz#b962dfc4ae84361f9f08fbce411b4e4340930eda"
-  integrity sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==
-  dependencies:
-    "@formatjs/intl-localematcher" "0.2.25"
-    tslib "^2.1.0"
-
-"@formatjs/intl-displaynames@^5.2.5":
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz#e468586694350c722c7efab1a31fcde68aeaed8b"
-  integrity sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.11.4"
-    "@formatjs/intl-localematcher" "0.2.25"
-    tslib "^2.1.0"
-
-"@formatjs/intl-getcanonicallocales@^1.8.0":
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-getcanonicallocales/-/intl-getcanonicallocales-1.9.2.tgz#5aab5f6ac2d923933538085eec20a19c393b6ebf"
-  integrity sha512-69WTStIJI2ikErOU1Il4NQKLVV8f2x6awr7+/dZz0uihuI7uQRcZtI6k/BBt4EtYaEl6w65YjUF93VuE015C0w==
-  dependencies:
-    tslib "^2.1.0"
-
-"@formatjs/intl-localematcher@0.2.25":
-  version "0.2.25"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz#60892fe1b271ec35ba07a2eb018a2dd7bca6ea3a"
-  integrity sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==
-  dependencies:
-    tslib "^2.1.0"
-
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
@@ -4668,22 +4637,17 @@ pkg-dir@4.2.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-playwright-core@1.31.1:
-  version "1.31.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.31.1.tgz#4deeebbb8fb73b512593fe24bea206d8fd85ff7f"
-  integrity sha512-JTyX4kV3/LXsvpHkLzL2I36aCdml4zeE35x+G5aPc4bkLsiRiQshU5lWeVpHFAuC8xAcbI6FDcw/8z3q2xtJSQ==
-
 playwright-core@1.32.1:
   version "1.32.1"
   resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.32.1.tgz#5a10c32403323b07d75ea428ebeed866a80b76a1"
   integrity sha512-KZYUQC10mXD2Am1rGlidaalNGYk3LU1vZqqNk0gT4XPty1jOqgup8KDP8l2CUlqoNKhXM5IfGjWgW37xvGllBA==
 
-playwright@1.31.1, playwright@^1.22.2:
+playwright@1.32.1, playwright@^1.22.2:
-  version "1.31.1"
+  version "1.32.1"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.31.1.tgz#66164cdc1506bc883c7a98b44714dfea50b22d50"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.32.1.tgz#c48195850740fbdbd7702f37e5a891b13259f689"
-  integrity sha512-zKJabsIA2rvOwJ12lGTqWv4HVJzlfw2JtUvO4hAr7J8UXQZ1qEPpX20E1vcz/9fotnTkwgqp3CVdIBwptBN3Fg==
+  integrity sha512-GnEizysWMvoqHC3I9l8+4/ZxeLwLNdJJG76xdKGxzOcIZDcw5RSk/FKrFb5CuA+zcLpjIM2p9eR9Z4CuUDkWXg==
   dependencies:
-    playwright-core "1.31.1"
+    playwright-core "1.32.1"
 
 portfinder@^1.0.28, portfinder@^1.0.32:
   version "1.0.32"