fix(app): support runtime base paths for subpath deployments

platform/app/.webpack/webpack.pwa.js

@@ -19,7 +19,6 @@ const PUBLIC_DIR = path.join(__dirname, '../public');
 const WATCH_IGNORED = /node_modules[\\/](?!@cornerstonejs(?:[\\/]|$))/;
 // ~~ Env Vars
 const HTML_TEMPLATE = process.env.HTML_TEMPLATE || 'index.html';
-const PUBLIC_URL = process.env.PUBLIC_URL || '/';
 const APP_CONFIG = process.env.APP_CONFIG || 'config/default.js';
 
 // proxy settings
@@ -69,7 +68,7 @@ module.exports = (env, argv) => {
     output: {
       path: DIST_DIR,
       filename: isProdBuild ? '[name].bundle.[chunkhash].js' : '[name].js',
-      publicPath: PUBLIC_URL, // Used by HtmlWebPackPlugin for asset prefix
+      publicPath: '',
       devtoolModuleFilenameTemplate: function (info) {
         if (isProdBuild) {
           return `webpack:///${info.resourcePath}`;
@@ -129,7 +128,7 @@ module.exports = (env, argv) => {
         template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
         filename: 'index.html',
         templateParameters: {
-          PUBLIC_URL: PUBLIC_URL,
+          PUBLIC_URL: '',
         },
       }),
       // Generate a service worker for fast local loads
@@ -179,7 +178,7 @@ module.exports = (env, argv) => {
       //writeToDisk: true,
       historyApiFallback: {
         disableDotRule: true,
-        index: PUBLIC_URL + 'index.html',
+        index: 'index.html',
       },
       devMiddleware: {
         writeToDisk: true,

platform/app/.webpack/writePluginImportsFile.js

@@ -2,16 +2,15 @@ const pluginConfig = require('../pluginConfig.json');
 const fs = require('fs');
 const os = require('os');
 
-const autogenerationDisclaimer = `
+const autogenerationDisclaimer = `import { getPublicSubPath } from '@ohif/core';
+
 // THIS FILE IS AUTOGENERATED AS PART OF THE EXTENSION AND MODE PLUGIN PROCESS.
 // IT SHOULD NOT BE MODIFIED MANUALLY \n`;
 
 const extractName = val => (typeof val === 'string' ? val : val.packageName);
 
-const publicURL = process.env.PUBLIC_URL || '/';
-
 function isAbsolutePath(path) {
-  return path.startsWith('http') || path.startsWith('/');
+  return path.startsWith('http');
 }
 
 function constructLines(input, categoryName) {
@@ -66,6 +65,11 @@ function getRuntimeLoadModesExtensions(modules) {
   const dynamicLoad = [];
   dynamicLoad.push(
     '\n\n// Add a dynamic runtime loader',
+    'function getRuntimeImportPath(path) {',
+    "  if (typeof path !== 'string' || path.startsWith('http')) return path;",
+    '  return getPublicSubPath(path);',
+    '}',
+    '',
     'async function loadModule(module) {',
     "  if (typeof module !== 'string') return module;"
   );
@@ -77,7 +81,7 @@ function getRuntimeLoadModesExtensions(modules) {
     if (module.importPath) {
       dynamicLoad.push(
         `  if( module==="${packageName}") {`,
-        `    const imported = await window.browserImportFunction('${isAbsolutePath(module.importPath) ? '' : publicURL}${module.importPath}');`,
+        `    const imported = await window.browserImportFunction(getRuntimeImportPath('${module.importPath}'));`,
         '    return ' +
           (module.globalName
             ? `window["${module.globalName}"];`

platform/app/public/html-templates/index.html

@@ -34,6 +34,87 @@
       name="msapplication-TileColor"
       content="#fff"
     />
+    <script type="text/javascript">
+      console.time('scriptToView');
+      (function () {
+        // Keep this inline runtime base-path bootstrap in sync with
+        // platform/core/src/utils/publicUrl.ts.
+        function normalizePublicUrl(value) {
+          var rawValue = typeof value === 'string' ? value.trim() : '';
+
+          if (!rawValue || rawValue === '.') {
+            return '/';
+          }
+
+          var normalized = rawValue.replace(/\\/g, '/');
+
+          if (!normalized.startsWith('/')) {
+            normalized = '/' + normalized;
+          }
+
+          normalized = normalized.replace(/\/{2,}/g, '/');
+
+          if (!normalized.endsWith('/')) {
+            normalized += '/';
+          }
+
+          return normalized;
+        }
+
+        function getLocationBasePathFromPathname(pathname) {
+          var locationPath = typeof pathname === 'string' && pathname.length > 0 ? pathname : '/';
+          var lowerPath = locationPath.toLowerCase();
+          var viewerIndex = lowerPath.lastIndexOf('/viewer');
+
+          if (viewerIndex >= 0) {
+            return normalizePublicUrl(locationPath.substring(0, viewerIndex));
+          }
+
+          if (lowerPath.endsWith('/index.html')) {
+            return normalizePublicUrl(
+              locationPath.substring(0, locationPath.length - '/index.html'.length)
+            );
+          }
+
+          if (locationPath === '/') {
+            return '/';
+          }
+
+          var lastSegment = locationPath.substring(locationPath.lastIndexOf('/') + 1);
+          if (lastSegment.indexOf('.') !== -1) {
+            return normalizePublicUrl(locationPath.substring(0, locationPath.lastIndexOf('/')));
+          }
+
+          return normalizePublicUrl(locationPath);
+        }
+
+        function resolveRuntimeBasePathFromWindow() {
+          var explicitBasePath =
+            window.__OHIF_BASE_PATH__ ||
+            window.PUBLIC_URL ||
+            (window.config && window.config.routerBasename);
+
+          if (typeof explicitBasePath === 'string' && explicitBasePath.trim().length > 0) {
+            return normalizePublicUrl(explicitBasePath);
+          }
+
+          return getLocationBasePathFromPathname(window.location.pathname || '/');
+        }
+
+        var basePath = resolveRuntimeBasePathFromWindow();
+
+        window.__OHIF_BASE_PATH__ = basePath;
+        window.PUBLIC_URL = basePath;
+
+        var baseElement = document.querySelector('base');
+        if (!baseElement) {
+          baseElement = document.createElement('base');
+          document.head.appendChild(baseElement);
+        }
+
+        baseElement.setAttribute('href', basePath);
+      })();
+    </script>
     <meta
       name="msapplication-TileImage"
       content="<%= PUBLIC_URL %>assets/mstile-144x144.png"
@@ -42,10 +123,6 @@
       name="msapplication-config"
       content="<%= PUBLIC_URL %>assets/browserconfig.xml"
     />
-    <script type="text/javascript">
-      console.time('scriptToView');
-      window.PUBLIC_URL = '<%= PUBLIC_URL %>';
-    </script>
     <link
       rel="manifest"
       href="<%= PUBLIC_URL %>manifest.json"
@@ -202,8 +279,6 @@
       function browserImportFunction(moduleId) {
         return import(moduleId);
       }
-
-      window.PUBLIC_URL = '<%= PUBLIC_URL %>';
     </script>
 
     <!-- EXTENSIONS -->

platform/app/public/html-templates/rollbar.html

@@ -34,6 +34,86 @@
       name="msapplication-TileColor"
       content="#fff"
     />
+    <script type="text/javascript">
+      (function () {
+        // Keep this inline runtime base-path bootstrap in sync with
+        // platform/core/src/utils/publicUrl.ts.
+        function normalizePublicUrl(value) {
+          var rawValue = typeof value === 'string' ? value.trim() : '';
+
+          if (!rawValue || rawValue === '.') {
+            return '/';
+          }
+
+          var normalized = rawValue.replace(/\\/g, '/');
+
+          if (!normalized.startsWith('/')) {
+            normalized = '/' + normalized;
+          }
+
+          normalized = normalized.replace(/\/{2,}/g, '/');
+
+          if (!normalized.endsWith('/')) {
+            normalized += '/';
+          }
+
+          return normalized;
+        }
+
+        function getLocationBasePathFromPathname(pathname) {
+          var locationPath = typeof pathname === 'string' && pathname.length > 0 ? pathname : '/';
+          var lowerPath = locationPath.toLowerCase();
+          var viewerIndex = lowerPath.lastIndexOf('/viewer');
+
+          if (viewerIndex >= 0) {
+            return normalizePublicUrl(locationPath.substring(0, viewerIndex));
+          }
+
+          if (lowerPath.endsWith('/index.html')) {
+            return normalizePublicUrl(
+              locationPath.substring(0, locationPath.length - '/index.html'.length)
+            );
+          }
+
+          if (locationPath === '/') {
+            return '/';
+          }
+
+          var lastSegment = locationPath.substring(locationPath.lastIndexOf('/') + 1);
+          if (lastSegment.indexOf('.') !== -1) {
+            return normalizePublicUrl(locationPath.substring(0, locationPath.lastIndexOf('/')));
+          }
+
+          return normalizePublicUrl(locationPath);
+        }
+
+        function resolveRuntimeBasePathFromWindow() {
+          var explicitBasePath =
+            window.__OHIF_BASE_PATH__ ||
+            window.PUBLIC_URL ||
+            (window.config && window.config.routerBasename);
+
+          if (typeof explicitBasePath === 'string' && explicitBasePath.trim().length > 0) {
+            return normalizePublicUrl(explicitBasePath);
+          }
+
+          return getLocationBasePathFromPathname(window.location.pathname || '/');
+        }
+
+        var basePath = resolveRuntimeBasePathFromWindow();
+
+        window.__OHIF_BASE_PATH__ = basePath;
+        window.PUBLIC_URL = basePath;
+
+        var baseElement = document.querySelector('base');
+        if (!baseElement) {
+          baseElement = document.createElement('base');
+          document.head.appendChild(baseElement);
+        }
+
+        baseElement.setAttribute('href', basePath);
+      })();
+    </script>
     <meta
       name="msapplication-TileImage"
       content="<%= PUBLIC_URL %>assets/mstile-144x144.png"
@@ -178,10 +258,6 @@
       rel="yandex-tableau-widget"
       href="<%= PUBLIC_URL %>assets/yandex-browser-manifest.json"
     />
-
-    <script type="text/javascript">
-      window.PUBLIC_URL = '<%= PUBLIC_URL %>';
-    </script>
     <script
       type="text/javascript"
       src="<%= PUBLIC_URL %>app-config.js"

platform/app/public/manifest.json

@@ -7,47 +7,47 @@
   "orientation": "any",
   "icons": [
     {
-      "src": "/assets/android-chrome-36x36.png",
+      "src": "assets/android-chrome-36x36.png",
       "sizes": "36x36",
       "type": "image/png"
     },
     {
-      "src": "/assets/android-chrome-48x48.png",
+      "src": "assets/android-chrome-48x48.png",
       "sizes": "48x48",
       "type": "image/png"
     },
     {
-      "src": "/assets/android-chrome-72x72.png",
+      "src": "assets/android-chrome-72x72.png",
       "sizes": "72x72",
       "type": "image/png"
     },
     {
-      "src": "/assets/android-chrome-96x96.png",
+      "src": "assets/android-chrome-96x96.png",
       "sizes": "96x96",
       "type": "image/png"
     },
     {
-      "src": "/assets/android-chrome-144x144.png",
+      "src": "assets/android-chrome-144x144.png",
       "sizes": "144x144",
       "type": "image/png"
     },
     {
-      "src": "/assets/android-chrome-192x192.png",
+      "src": "assets/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/assets/android-chrome-256x256.png",
+      "src": "assets/android-chrome-256x256.png",
       "sizes": "256x256",
       "type": "image/png"
     },
     {
-      "src": "/assets/android-chrome-384x384.png",
+      "src": "assets/android-chrome-384x384.png",
       "sizes": "384x384",
       "type": "image/png"
     },
     {
-      "src": "/assets/android-chrome-512x512.png",
+      "src": "assets/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

platform/app/src/index.js

@@ -2,6 +2,7 @@
  * Entry point for development and production PWA builds.
  */
 import 'regenerator-runtime/runtime';
+import './setRuntimePublicPath';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 import React from 'react';

platform/app/src/setRuntimePublicPath.js

@@ -0,0 +1,27 @@
+/* global __webpack_public_path__ */
+
+import {
+  normalizePublicUrl,
+  toRouterBasename,
+  resolveRuntimeBasePathFromWindow,
+} from '@ohif/core';
+
+const runtimePublicUrl = resolveRuntimeBasePathFromWindow();
+
+window.__OHIF_BASE_PATH__ = runtimePublicUrl;
+window.PUBLIC_URL = runtimePublicUrl;
+
+if (window.config && !window.config.routerBasename) {
+  window.config.routerBasename = toRouterBasename(runtimePublicUrl);
+}
+
+__webpack_public_path__ = runtimePublicUrl;
+
+export {
+  normalizePublicUrl,
+  toRouterBasename,
+  resolveRuntimeBasePathFromWindow as resolveRuntimeBasePath,
+  runtimePublicUrl,
+};
+
+export default runtimePublicUrl;

platform/app/src/utils/publicUrl.ts

@@ -1,5 +1,9 @@
-const publicUrl = (window as any).PUBLIC_URL || '/';
-const routerBasename = (window as any).config?.routerBasename || publicUrl;
+import { normalizePublicUrl, toRouterBasename } from '../../../core/src/utils/publicUrl';
+
+const publicUrl = normalizePublicUrl(
+  (window as any).__OHIF_BASE_PATH__ || (window as any).PUBLIC_URL || '/'
+);
+const routerBasename = toRouterBasename((window as any).config?.routerBasename || publicUrl);
 
 export { publicUrl, routerBasename };