Merge pull request #14091 from overleaf/jpa-split-web-dependencies

[web] only include production dependencies in the production image

GitOrigin-RevId: edb33543145903de55f263de7385f6a779830b54

services/web/Dockerfile

@@ -12,16 +12,20 @@ WORKDIR /overleaf/services/web
 RUN mkdir /home/node/.config && chown node:node /home/node/.config
 
 # the deps image is used for caching npm ci
-FROM base as deps
+FROM base as deps-prod
 
 COPY package.json package-lock.json /overleaf/
 COPY services/web/package.json /overleaf/services/web/
 COPY libraries/ /overleaf/libraries/
 COPY patches/ /overleaf/patches/
 
+RUN cd /overleaf && NODE_ENV=production npm ci --quiet
+
+FROM deps-prod as deps
+
 ENV CYPRESS_INSTALL_BINARY=0
 
-RUN cd /overleaf && npm ci --quiet
+RUN cd /overleaf && npm install
 
 
 # the dev is suitable for running tests
@@ -55,9 +59,12 @@ RUN chmod 0755 ./install_deps.sh && ./install_deps.sh
 
 
 # the final production image without webpack source maps
-FROM webpack as app
-
+FROM webpack as webpack-no-sourcemaps
 RUN find /overleaf/services/web/public -name '*.js.map' -delete
+
+FROM deps-prod as app
+
+COPY --from=webpack-no-sourcemaps /overleaf/services/web/public /overleaf/services/web/public
 RUN rm /overleaf/services/web/modules/server-ce-scripts -rf
 USER node
 

services/web/app/src/infrastructure/ExpressLocals.js

@@ -184,13 +184,13 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
     res.locals.mathJaxPath = `/js/libs/mathjax/MathJax.js?${querystring.stringify(
       {
         config: 'TeX-AMS_HTML,Safe',
-        v: require('mathjax/package.json').version,
+        v: PackageVersions.version.mathjax,
       }
     )}`
 
     res.locals.mathJax3Path = `/js/libs/mathjax3/es5/tex-svg-full.js?${querystring.stringify(
       {
-        v: require('mathjax-3/package.json').version,
+        v: PackageVersions.version['mathjax-3'],
       }
     )}`
 

services/web/app/src/infrastructure/PackageVersions.js

@@ -1,14 +1,8 @@
-// TODO: This file was created by bulk-decaffeinate.
-// Sanity-check the conversion and remove this comment.
-/*
- * decaffeinate suggestions:
- * DS207: Consider shorter variations of null checks
- * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
- */
-const ACE_VERSION = require('ace-builds/version')
 const version = {
   // Upgrade instructions: https://github.com/overleaf/write_latex/wiki/Upgrading-Ace
-  ace: ACE_VERSION,
+  ace: '1.4.12',
+  mathjax: '2.7.9',
+  'mathjax-3': '3.2.2',
 }
 
 module.exports = {

services/web/package.json

@@ -66,86 +66,31 @@
     "firefox esr"
   ],
   "dependencies": {
-    "@babel/cli": "^7.21.5",
-    "@babel/core": "^7.21.8",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.5",
-    "@codemirror/autocomplete": "github:overleaf/codemirror-autocomplete#b795675768e25c442916c7190da75716c0a5ac80",
-    "@codemirror/commands": "^6.2.3",
-    "@codemirror/lang-markdown": "^6.1.1",
-    "@codemirror/language": "^6.6.0",
-    "@codemirror/lint": "^6.2.1",
-    "@codemirror/search": "github:overleaf/codemirror-search#6a09ea7eaad138d810f989753036eabce23cc969",
-    "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.14.0",
     "@contentful/rich-text-html-renderer": "^16.0.2",
     "@contentful/rich-text-types": "^16.0.2",
     "@google-cloud/bigquery": "^6.0.1",
-    "@lezer/common": "^1.0.3",
-    "@lezer/highlight": "^1.1.6",
-    "@lezer/lr": "^1.3.7",
-    "@lezer/markdown": "^1.0.3",
     "@node-oauth/oauth2-server": "^4.3.0",
-    "@opentelemetry/api": "^1.0.4",
-    "@opentelemetry/auto-instrumentations-web": "^0.27.2",
-    "@opentelemetry/context-zone": "^1.2.0",
-    "@opentelemetry/exporter-jaeger": "^1.2.0",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.28.0",
-    "@opentelemetry/instrumentation": "^0.27.0",
-    "@opentelemetry/instrumentation-document-load": "^0.27.1",
-    "@opentelemetry/instrumentation-xml-http-request": "^0.28.0",
-    "@opentelemetry/resources": "^1.2.0",
-    "@opentelemetry/sdk-trace-base": "^1.2.0",
-    "@opentelemetry/sdk-trace-web": "^1.2.0",
-    "@opentelemetry/semantic-conventions": "^1.2.0",
     "@overleaf/access-token-encryptor": "*",
     "@overleaf/fetch-utils": "*",
     "@overleaf/logger": "*",
     "@overleaf/metrics": "*",
     "@overleaf/o-error": "*",
     "@overleaf/object-persistor": "*",
-    "@overleaf/ranges-tracker": "*",
     "@overleaf/redis-wrapper": "*",
     "@overleaf/settings": "*",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@pollyjs/adapter-node-http": "^4.2.1",
-    "@pollyjs/core": "^4.2.1",
-    "@pollyjs/persister-fs": "^4.2.1",
-    "@reach/tabs": "^0.15.0",
-    "@replit/codemirror-emacs": "overleaf/codemirror-emacs#cea6eaefe2301bf07e7dec54f028537c3fdc4982",
-    "@replit/codemirror-indentation-markers": "overleaf/codemirror-indentation-markers#1b1f93c0bcd04293aea6986aa2275185b2c56803",
-    "@replit/codemirror-vim": "overleaf/codemirror-vim#07f1b50f4b2e703792da75a29e9e1e479b6b7067",
-    "@sentry/browser": "^7.8.1",
     "@slack/webhook": "^6.1.0",
-    "@uppy/core": "^1.15.0",
-    "@uppy/dashboard": "^1.11.0",
-    "@uppy/react": "^1.11.0",
-    "@uppy/utils": "^4.0.7",
-    "@uppy/xhr-upload": "^1.6.8",
-    "abort-controller": "^3.0.0",
     "accepts": "^1.3.7",
-    "ace-builds": "overleaf/ace-builds#v1.4.12-69aace50e6796d42116f8f96e19d2468d8a88af9",
-    "algoliasearch": "^3.35.1",
-    "angular": "~1.8.0",
-    "angular-sanitize": "~1.8.0",
     "archiver": "^5.3.0",
     "async": "3.2.2",
-    "backbone": "^1.3.3",
     "base-x": "^4.0.0",
     "basic-auth": "^2.0.1",
     "bcrypt": "^5.0.0",
     "body-parser": "^1.19.0",
-    "bootstrap": "^3.4.1",
     "bowser": "^2.11.0",
     "bull": "^3.18.0",
     "bunyan": "^1.8.15",
     "cache-flow": "^1.9.0",
     "celebrate": "^10.0.1",
-    "chart.js": "^4.0.1",
-    "chartjs-adapter-moment": "^1.0.1",
-    "chartjs-plugin-datalabels": "^2.2.0",
-    "classnames": "^2.2.6",
     "connect-redis": "^6.1.3",
     "content-disposition": "^0.5.0",
     "contentful": "^6.1.1",
@@ -153,41 +98,29 @@
     "cookie-parser": "1.3.5",
     "core-js": "^3.30.2",
     "crc-32": "^1.2.2",
-    "crypto-js": "^3.1.9-1",
     "csurf": "^1.11.0",
     "csv": "^6.2.5",
-    "d3": "^3.5.16",
     "dateformat": "1.0.4-1.2.3",
-    "daterangepicker": "overleaf/daterangepicker#e496d2d44ca53e208c930e4cb4bcf29bcefa4550",
-    "downshift": "^6.1.0",
     "east": "^2.0.2",
     "email-addresses": "^5.0.0",
-    "events": "^3.3.0",
     "express": "^4.18.2",
     "express-bearer-token": "^2.4.0",
     "express-http-proxy": "^1.6.0",
     "express-session": "^1.17.1",
-    "formik": "^2.2.9",
     "fs-extra": "^4.0.2",
     "fuse.js": "^3.0.0",
     "globby": "^5.0.0",
-    "handlebars": "^4.7.7",
     "helmet": "^6.0.1",
     "i18next": "^19.6.3",
     "i18next-fs-backend": "^1.0.7",
     "i18next-http-middleware": "^3.0.2",
-    "isomorphic-unfetch": "^3.0.0",
     "jose": "^4.3.8",
-    "jquery": "^2.2.4",
     "json2csv": "^4.3.3",
     "jsonwebtoken": "^9.0.0",
     "lodash": "^4.17.19",
     "lru-cache": "^7.10.1",
     "mailchimp-api-v3": "^1.12.0",
     "marked": "^4.1.0",
-    "match-sorter": "^6.2.0",
-    "mathjax": "^2.7.9",
-    "mathjax-3": "npm:mathjax@^3.2.2",
     "method-override": "^2.3.3",
     "minimatch": "^7.4.2",
     "minimist": "^1.2.7",
@@ -202,7 +135,6 @@
     "nodemailer": "^6.7.0",
     "nodemailer-mandrill-transport": "^1.2.0",
     "nodemailer-ses-transport": "^1.5.1",
-    "nvd3": "^1.8.6",
     "otplib": "^12.0.1",
     "p-limit": "^2.3.0",
     "parse-data-url": "^2.0.0",
@@ -214,34 +146,15 @@
     "passport-orcid": "0.0.4",
     "passport-saml": "^3.2.4",
     "passport-twitter": "^1.0.4",
-    "pdfjs-dist213": "npm:pdfjs-dist@2.13.216",
-    "pdfjs-dist36": "npm:pdfjs-dist@3.6.172",
-    "prop-types": "^15.7.2",
     "pug": "^3.0.1",
     "pug-runtime": "^3.0.1",
-    "qrcode": "^1.4.4",
     "rate-limiter-flexible": "^2.4.1",
-    "react": "^17.0.2",
-    "react-bootstrap": "^0.33.1",
-    "react-chartjs-2": "^5.0.1",
-    "react-color": "^2.19.3",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
-    "react-dom": "^17.0.2",
-    "react-error-boundary": "^2.3.1",
-    "react-google-recaptcha": "^3.1.0",
-    "react-i18next": "^11.18.6",
-    "react-linkify": "^1.0.0-alpha",
-    "react-refresh": "^0.14.0",
-    "react2angular": "^4.0.6",
-    "react2angular-shared-context": "^1.1.0",
     "recurly": "^4.0.0",
     "referer-parser": "github:overleaf/nodejs-referer-parser#8b8b103762d05b7be4cfa2f810e1d408be67d7bb",
     "request": "^2.88.2",
     "requestretry": "^7.1.0",
     "rimraf": "2.2.6",
     "sanitize-html": "^2.8.1",
-    "scroll-into-view-if-needed": "^2.2.25",
     "tough-cookie": "^4.0.0",
     "tsscmp": "^1.0.6",
     "underscore": "^1.13.1",
@@ -252,14 +165,52 @@
     "xml-crypto": "^2.1.2",
     "xml2js": "^0.4.22",
     "xregexp": "^4.3.0",
-    "yauzl": "^2.10.0",
-    "yup": "^0.32.11"
+    "yauzl": "^2.10.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
     "@babel/register": "^7.21.0",
+    "@codemirror/autocomplete": "github:overleaf/codemirror-autocomplete#b795675768e25c442916c7190da75716c0a5ac80",
+    "@codemirror/commands": "^6.2.3",
+    "@codemirror/lang-markdown": "^6.1.1",
+    "@codemirror/language": "^6.6.0",
+    "@codemirror/lint": "^6.2.1",
+    "@codemirror/search": "github:overleaf/codemirror-search#6a09ea7eaad138d810f989753036eabce23cc969",
+    "@codemirror/state": "^6.2.0",
+    "@codemirror/view": "^6.14.0",
     "@juggle/resize-observer": "^3.3.1",
+    "@lezer/common": "^1.0.3",
     "@lezer/generator": "^1.3.0",
+    "@lezer/highlight": "^1.1.6",
+    "@lezer/lr": "^1.3.7",
+    "@lezer/markdown": "^1.0.3",
+    "@opentelemetry/api": "^1.0.4",
+    "@opentelemetry/auto-instrumentations-web": "^0.27.2",
+    "@opentelemetry/context-zone": "^1.2.0",
+    "@opentelemetry/exporter-jaeger": "^1.2.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.28.0",
+    "@opentelemetry/instrumentation": "^0.27.0",
+    "@opentelemetry/instrumentation-document-load": "^0.27.1",
+    "@opentelemetry/instrumentation-xml-http-request": "^0.28.0",
+    "@opentelemetry/resources": "^1.2.0",
+    "@opentelemetry/sdk-trace-base": "^1.2.0",
+    "@opentelemetry/sdk-trace-web": "^1.2.0",
+    "@opentelemetry/semantic-conventions": "^1.2.0",
+    "@overleaf/ranges-tracker": "*",
     "@overleaf/stream-utils": "*",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@pollyjs/adapter-node-http": "^4.2.1",
+    "@pollyjs/core": "^4.2.1",
+    "@pollyjs/persister-fs": "^4.2.1",
+    "@reach/tabs": "^0.15.0",
+    "@replit/codemirror-emacs": "overleaf/codemirror-emacs#cea6eaefe2301bf07e7dec54f028537c3fdc4982",
+    "@replit/codemirror-indentation-markers": "overleaf/codemirror-indentation-markers#1b1f93c0bcd04293aea6986aa2275185b2c56803",
+    "@replit/codemirror-vim": "overleaf/codemirror-vim#07f1b50f4b2e703792da75a29e9e1e479b6b7067",
+    "@sentry/browser": "^7.8.1",
     "@testing-library/cypress": "^9.0.0",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/react": "^12.1.5",
@@ -282,23 +233,43 @@
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
+    "@uppy/core": "^1.15.0",
+    "@uppy/dashboard": "^1.11.0",
+    "@uppy/react": "^1.11.0",
+    "@uppy/utils": "^4.0.7",
+    "@uppy/xhr-upload": "^1.6.8",
+    "abort-controller": "^3.0.0",
+    "ace-builds": "overleaf/ace-builds#v1.4.12-69aace50e6796d42116f8f96e19d2468d8a88af9",
     "acorn": "^7.1.1",
     "acorn-walk": "^7.1.1",
+    "algoliasearch": "^3.35.1",
+    "angular": "~1.8.0",
     "angular-mocks": "~1.8.0",
+    "angular-sanitize": "~1.8.0",
     "autoprefixer": "^9.7.6",
     "babel-loader": "^9.1.2",
     "babel-plugin-angularjs-annotate": "^0.10.0",
     "babel-plugin-macros": "^3.1.0",
+    "backbone": "^1.3.3",
+    "bootstrap": "^3.4.1",
     "c8": "^7.2.0",
     "chai": "^4.3.6",
     "chai-as-promised": "^7.1.1",
     "chai-exclude": "^2.0.3",
+    "chart.js": "^4.0.1",
+    "chartjs-adapter-moment": "^1.0.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "cheerio": "^1.0.0-rc.3",
+    "classnames": "^2.2.6",
     "copy-webpack-plugin": "^11.0.0",
+    "crypto-js": "^3.1.9-1",
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^5.0.0",
     "cypress": "12.17.1",
     "cypress-plugin-tab": "^1.0.5",
+    "d3": "^3.5.16",
+    "daterangepicker": "overleaf/daterangepicker#e496d2d44ca53e208c930e4cb4bcf29bcefa4550",
+    "downshift": "^6.1.0",
     "es6-promise": "^4.2.8",
     "escodegen": "^2.0.0",
     "eslint-config-standard-jsx": "^11.0.0",
@@ -306,12 +277,17 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "events": "^3.3.0",
     "expose-loader": "^4.1.0",
     "fetch-mock": "^9.10.2",
+    "formik": "^2.2.9",
     "glob": "^7.1.6",
+    "handlebars": "^4.7.7",
     "handlebars-loader": "^1.7.3",
     "html-webpack-plugin": "^5.5.1",
     "i18next-scanner": "^4.3.0",
+    "isomorphic-unfetch": "^3.0.0",
+    "jquery": "^2.2.4",
     "jsdom": "^19.0.0",
     "jsdom-global": "^3.0.2",
     "karma": "^6.3.17",
@@ -323,6 +299,9 @@
     "karma-webpack": "^5.0.0",
     "less": "^3.11.1",
     "less-loader": "^11.1.3",
+    "match-sorter": "^6.2.0",
+    "mathjax": "^2.7.9",
+    "mathjax-3": "npm:mathjax@^3.2.2",
     "mensch": "^0.3.4",
     "mini-css-extract-plugin": "^2.7.5",
     "mocha": "^10.2.0",
@@ -330,11 +309,31 @@
     "mock-fs": "^5.1.2",
     "nock": "^13.1.1",
     "node-fetch": "^2.6.7",
+    "nvd3": "^1.8.6",
+    "pdfjs-dist213": "npm:pdfjs-dist@2.13.216",
+    "pdfjs-dist36": "npm:pdfjs-dist@3.6.172",
     "pirates": "^4.0.1",
     "postcss-loader": "^7.3.0",
+    "prop-types": "^15.7.2",
+    "qrcode": "^1.4.4",
+    "react": "^17.0.2",
+    "react-bootstrap": "^0.33.1",
+    "react-chartjs-2": "^5.0.1",
+    "react-color": "^2.19.3",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
+    "react-dom": "^17.0.2",
+    "react-error-boundary": "^2.3.1",
+    "react-google-recaptcha": "^3.1.0",
+    "react-i18next": "^11.18.6",
+    "react-linkify": "^1.0.0-alpha",
+    "react-refresh": "^0.14.0",
+    "react2angular": "^4.0.6",
+    "react2angular-shared-context": "^1.1.0",
     "requirejs": "^2.3.6",
     "samlp": "^7.0.2",
     "sandboxed-module": "overleaf/node-sandboxed-module#cafa2d60f17ce75cc023e6f296eb8de79d92d35d",
+    "scroll-into-view-if-needed": "^2.2.25",
     "sinon": "^7.5.0",
     "sinon-chai": "^3.7.0",
     "sinon-mongoose": "^2.3.0",
@@ -349,6 +348,7 @@
     "webpack-cli": "^5.1.1",
     "webpack-dev-server": "^4.15.0",
     "webpack-merge": "^5.8.0",
-    "worker-loader": "^3.0.8"
+    "worker-loader": "^3.0.8",
+    "yup": "^0.32.11"
   }
 }

services/web/webpack.config.js

@@ -65,6 +65,26 @@ const pdfjsVersions = ['pdfjs-dist213', 'pdfjs-dist36']
 
 const vendorDir = path.join(__dirname, 'frontend/js/vendor')
 
+const ACE_VERSION = require('ace-builds/version')
+if (ACE_VERSION !== PackageVersions.version.ace) {
+  throw new Error(
+    '"ace-builds" version de-synced, update services/web/app/src/infrastructure/PackageVersions.js'
+  )
+}
+const MATHJAX_VERSION = require('mathjax/package.json').version
+if (MATHJAX_VERSION !== PackageVersions.version.mathjax) {
+  throw new Error(
+    '"mathjax" version de-synced, update services/web/app/src/infrastructure/PackageVersions.js'
+  )
+}
+
+const MATHJAX_3_VERSION = require('mathjax-3/package.json').version
+if (MATHJAX_3_VERSION !== PackageVersions.version['mathjax-3']) {
+  throw new Error(
+    '"mathjax-3" version de-synced, update services/web/app/src/infrastructure/PackageVersions.js'
+  )
+}
+
 module.exports = {
   // Defines the "entry point(s)" for the application - i.e. the file which
   // bootstraps the application