Merge pull request #2408 from overleaf/as-dynamic-public-path

Fetch dynamically fetched scripts from CDN

GitOrigin-RevId: b480f261a6b4ba2d6a8819fd0e7a354605ed9a82

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

@@ -78,6 +78,12 @@ module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
       staticFilesBase = ''
     }
 
+    res.locals.buildBaseAssetPath = function() {
+      // Return the base asset path (including the CDN url) so that webpack can
+      // use this to dynamically fetch scripts (e.g. PDFjs worker)
+      return Url.resolve(staticFilesBase, '/')
+    }
+
     res.locals.buildJsPath = function(jsFile) {
       let path
       if (IS_DEV_ENV) {
@@ -89,7 +95,7 @@ module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
         // In production: resolve path from webpack manifest file
         // We are guaranteed to have a manifest file since webpack compiles in
         // the build
-        path = webpackManifest[jsFile]
+        path = `/${webpackManifest[jsFile]}`
       }
 
       return Url.resolve(staticFilesBase, path)
@@ -97,7 +103,7 @@ module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
 
     // Temporary hack while jQuery/Angular dependencies are *not* bundled,
     // instead copied into output directory
-    res.locals.buildCopiedJsAssetPath = function(jsFile, opts = {}) {
+    res.locals.buildCopiedJsAssetPath = function(jsFile) {
       let path
       if (IS_DEV_ENV) {
         // In dev: resolve path to root directory
@@ -108,27 +114,17 @@ module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
         // In production: resolve path from webpack manifest file
         // We are guaranteed to have a manifest file since webpack compiles in
         // the build
-        path = webpackManifest[jsFile]
-      }
-
-      if (opts.cdn !== false) {
-        path = Url.resolve(staticFilesBase, path)
+        path = `/${webpackManifest[jsFile]}`
       }
 
-      if (opts.qs) {
-        path = path + '?' + querystring.stringify(opts.qs)
-      }
-
-      return path
+      return Url.resolve(staticFilesBase, path)
     }
 
-    res.locals.mathJaxPath = res.locals.buildCopiedJsAssetPath(
-      'js/libs/mathjax/MathJax.js',
+    res.locals.mathJaxPath = `/js/libs/mathjax/MathJax.js?${querystring.stringify(
       {
-        cdn: false,
-        qs: { config: 'TeX-AMS_HTML,Safe' }
+        config: 'TeX-AMS_HTML,Safe'
       }
-    )
+    )}`
 
     res.locals.lib = PackageVersions.lib
 
@@ -169,7 +165,7 @@ module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
         // In production: resolve path from webpack manifest file
         // We are guaranteed to have a manifest file since webpack compiles in
         // the build
-        path = webpackManifest[cssFileName]
+        path = `/${webpackManifest[cssFileName]}`
       }
 
       return Url.resolve(staticFilesBase, path)

services/web/app/views/layout.pug

@@ -47,6 +47,9 @@ html(
 
 		script(type="text/javascript").
 			window.csrfToken = "#{csrfToken}";
+			//- Configure dynamically loaded assets (via webpack) to be downloaded from CDN
+			//- See: https://webpack.js.org/guides/public-path/#on-the-fly
+			window.baseAssetPath = "#{buildBaseAssetPath()}"
 
 		script(src=buildCopiedJsAssetPath('js/libs/jquery-1.11.1.min.js'))
 		script(type="text/javascript").

services/web/frontend/js/base.js

@@ -14,6 +14,11 @@
  * DS207: Consider shorter variations of null checks
  * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
  */
+
+// Configure dynamically loaded assets (via webpack) to be downloaded from CDN
+// See: https://webpack.js.org/guides/public-path/#on-the-fly
+__webpack_public_path__ = window.baseAssetPath
+
 define([
   'libraries',
   'libs/polyfills/symbol',

services/web/webpack.config.js

@@ -41,9 +41,6 @@ module.exports = {
   output: {
     path: path.join(__dirname, '/public'),
 
-    // Serve from the root of public directory
-    publicPath: '/',
-
     // By default write into js directory
     filename: 'js/[name].js',