dynamic base url based on environment

add base url at runtime
BlueBrain · Oct 24, 2023 · 85bdf9d · 85bdf9d
2 parents 144164a + 96ea7f8
commit 85bdf9d
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 98 deletions.
diff --git a/index.html b/index.html
@@ -1,16 +1,18 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Nexus Fusion</title>
-    <!--app-head-->
-  </head>
 
-  <body>
-    <div id="root"><!--app-html--></div>
-    <!--app-state-->
-    <script type="module" src="/src/index.tsx"></script>
-    <!--scripts-->
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Nexus Fusion</title>
+  <!--app-head-->
+</head>
+
+<body>
+  <div id="root"><!--app-html--></div>
+  <!--app-state-->
+  <script type="module" src="/src/index.tsx"></script>
+  <!--scripts-->
+</body>
+
 </html>
diff --git a/package.json b/package.json
@@ -210,6 +210,7 @@
     "util": "^0.12.5",
     "vite": "^4.4.9",
     "vite-compatible-readable-stream": "^3.6.1",
+    "vite-plugin-dynamic-base": "^1.0.0",
     "vite-plugin-dynamic-import": "^1.5.0",
     "vitest": "^0.34.5"
   },

diff --git a/server/constants.ts b/server/constants.ts
@@ -122,8 +122,7 @@ LIMIT 1000`;
 const DEFAULT_SEARCH_CONFIG_PROJECT = 'webapps/nexus-web';
 const DEFAULT_SERVICE_ACCOUNTS_REALM = 'serviceaccounts';
 const rawBase = process.env.BASE_PATH || '';
-// to develop plugins locally, change PLUGINS_PATH to '/public/plugins'
-const pluginsManifestPath = process.env.PLUGINS_MANIFEST_PATH || '/plugins';
+const pluginsManifestPath = process.env.PLUGINS_MANIFEST_PATH || `dist/plugins`;
 
 // configure instance logo
 const layoutSettings = {
@@ -149,7 +148,7 @@ const searchSettings = {
 const dataModelsLocation = process.env.DATA_MODELS || '';
 
 const subAppsManifestPath =
-  process.env.SUB_APPS_MANIFEST_PATH || '/public/sub-apps';
+  process.env.SUB_APPS_MANIFEST_PATH || '/dist/sub-apps';
 
 const base = rawBase.replace(/\/$/, '');
 

diff --git a/server/index.ts b/server/index.ts
@@ -91,6 +91,9 @@ async function transformer(html: string, req: Request) {
     .replace(
       '<!--app-head-->',
       `
+        <script>
+          window.__BASE__ = '${base}'
+        </script>
         <base href="${base}" />
         ${helmet.title.toString()}
         ${helmet.meta.toString()}
@@ -100,7 +103,6 @@ async function transformer(html: string, req: Request) {
     .replace(
       '<!--app-state-->',
       `<script>
-        window.__BASE__ = '${base}';
         // WARNING: See the following for security issues around embedding JSON in HTML:
         // http://redux.js.org/recipes/ServerRendering.html#security-considerations
         window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(

diff --git a/src/shared/hooks/usePlugins.ts b/src/shared/hooks/usePlugins.ts
@@ -60,7 +60,6 @@ export default function usePlugins() {
           })
         )
         .catch(error => {
-          console.log('@@error', error);
           setManifest({
             error,
             loading: false,

diff --git a/src/shared/lib.scss b/src/shared/lib.scss
@@ -52,67 +52,6 @@ $fusion-heading-4-size: 16px;
 $fusion-heading-5-size: 14px;
 $fusion-body-small: 10px;
 
-@font-face {
-  font-family: 'Titillium Web';
-  src: url('./fonts/TitilliumWeb-Regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Titillium Web';
-  src: url('./fonts/TitilliumWeb-Italic.ttf') format('truetype');
-  font-weight: normal;
-  font-style: italic;
-}
-@font-face {
-  font-family: 'Titillium Web';
-  src: url('./fonts/TitilliumWeb-Bold.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Titillium Web';
-  src: url('./fonts/TitilliumWeb-BoldItalic.ttf') format('truetype');
-  font-weight: bold;
-  font-style: italic;
-}
-@font-face {
-  font-family: 'Titillium Web';
-  src: url('./fonts/TitilliumWeb-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Titillium Web';
-  src: url('./fonts/TitilliumWeb-SemiBoldItalic.ttf') format('truetype');
-  font-weight: 600;
-  font-style: italic;
-}
-@font-face {
-  font-family: 'Titillium Web';
-  src: url('./fonts/TitilliumWeb-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Titillium Web';
-  src: url('./fonts/TitilliumWeb-LightItalic.ttf') format('truetype');
-  font-weight: 300;
-  font-style: italic;
-}
-@font-face {
-  font-family: 'Titillium Web';
-  src: url('./fonts/TitilliumWeb-ExtraLight.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Titillium Web';
-  src: url('./fonts/TitilliumWeb-ExtraLightItalic.ttf') format('truetype');
-  font-weight: 100;
-  font-style: italic;
-}
-
 // Fusion Variables
 $header-background-color: fade($fusion-component-background-color, 50%);
 $box-shadow-color: #abbac9;

diff --git a/src/shared/organisms/DataPanel/DataPanel.spec.ts b/src/shared/organisms/DataPanel/DataPanel.spec.ts
@@ -8,6 +8,7 @@ import {
   resourceWithDistributionArray,
   resourceWithoutDistrition,
 } from '../../../shared/utils/__mocks__/data_panel_download_resource';
+
 const mockNexus = createNexusClient({
   uri: 'https://localhost',
   fetch: {},
@@ -25,7 +26,7 @@ const mockParsedDataFromUrl: ParsedNexusUrl = {
 
 describe('DataPanel', () => {
   it('throws errors when create archive endpoint throws', async () => {
-    mockNexus.Resource.get = jest
+    mockNexus.Resource.get = vi
       .fn()
       .mockResolvedValue(resourceWithoutDistrition);
     const mockEndpointError = new Error('Test Mock Error');
@@ -48,7 +49,7 @@ describe('DataPanel', () => {
   });
 
   it('does not contain warnings if all resources were found but archive create failed', async () => {
-    mockNexus.Resource.get = jest
+    mockNexus.Resource.get = vi
       .fn()
       .mockResolvedValue(resourceWithoutDistrition);
     const mockEndpointError = new Error('Test Mock Error');
@@ -69,7 +70,7 @@ describe('DataPanel', () => {
   });
 
   it('contains warnings for each resource not found when archive creation failed', async () => {
-    mockNexus.Resource.get = jest
+    mockNexus.Resource.get = vi
       .fn()
       .mockResolvedValueOnce(resourceWithoutDistrition)
       .mockRejectedValueOnce(new Error('Mock resource 2 not found'))
@@ -97,11 +98,11 @@ describe('DataPanel', () => {
   });
 
   it('throws errors when archive get endpoint failed', async () => {
-    mockNexus.Resource.get = jest
+    mockNexus.Resource.get = vi
       .fn()
       .mockResolvedValue(resourceWithoutDistrition);
 
-    mockNexus.Archive.create = jest
+    mockNexus.Archive.create = vi
       .fn()
       .mockResolvedValue('Archive create passed');
     const mockEndpointError = new Error('However, Archive get failed');
@@ -129,13 +130,13 @@ describe('DataPanel', () => {
   });
 
   it('contains warnings for each resource not found when archive fetching failed', async () => {
-    mockNexus.Resource.get = jest
+    mockNexus.Resource.get = vi
       .fn()
       .mockResolvedValueOnce(resourceWithoutDistrition)
       .mockRejectedValueOnce(new Error('Mock resource 2 not found'))
       .mockRejectedValueOnce(new Error('Mock resource 3 not found'));
 
-    mockNexus.Archive.create = jest
+    mockNexus.Archive.create = vi
       .fn()
       .mockResolvedValue('Archive create passed');
     const mockEndpointError = new Error('However, Archive get failed');
@@ -163,11 +164,11 @@ describe('DataPanel', () => {
   });
 
   it('does not throw if neither archive create nor archive fetch failed', async () => {
-    mockNexus.Resource.get = jest
+    mockNexus.Resource.get = vi
       .fn()
       .mockResolvedValue(resourceWithoutDistrition);
 
-    mockNexus.Archive.create = jest
+    mockNexus.Archive.create = vi
       .fn()
       .mockResolvedValue('Archive create passed');
     mockNexus.httpGet = vi.fn().mockResolvedValue(new Blob());
@@ -190,13 +191,13 @@ describe('DataPanel', () => {
   });
 
   it('does not throw but contains warnings if some resources were not found but archive creation passed', async () => {
-    mockNexus.Resource.get = jest
+    mockNexus.Resource.get = vi
       .fn()
       .mockResolvedValue(resourceWithoutDistrition)
       .mockRejectedValueOnce(new Error('Mock resource 2 not found'))
       .mockRejectedValueOnce(new Error('Mock resource 3 not found'));
 
-    mockNexus.Archive.create = jest
+    mockNexus.Archive.create = vi
       .fn()
       .mockResolvedValue('Archive create passed');
     mockNexus.httpGet = vi.fn().mockResolvedValue(new Blob());
@@ -219,10 +220,10 @@ describe('DataPanel', () => {
   });
 
   it('contains warnings for every distributions within resources that could not be fetched', async () => {
-    mockNexus.Resource.get = jest
+    mockNexus.Resource.get = vi
       .fn()
       .mockResolvedValue(resourceWithDistributionArray); // resource with 4 distributions
-    mockNexus.httpGet = jest
+    mockNexus.httpGet = vi
       .fn()
       // Out of 4 distributions, 2 were not fetched
       .mockRejectedValueOnce(new Error('Distribution 1 could not be found')) // Error for 1st distribution
@@ -231,7 +232,7 @@ describe('DataPanel', () => {
       .mockReturnValueOnce(getMockDistribution('mockfilename')) // Successful response for 4th distribution
       .mockResolvedValueOnce(new Blob()); // Successful response for get archive
 
-    mockNexus.Archive.create = jest
+    mockNexus.Archive.create = vi
       .fn()
       .mockResolvedValue('Archive create passed');
 

diff --git a/vite.config.js b/vite.config.js
@@ -2,26 +2,31 @@
 import { defineConfig } from 'vite';
 import { fileURLToPath } from 'url';
 
+import { dynamicBase } from 'vite-plugin-dynamic-base';
+import { execSync } from "child_process";
 import react from '@vitejs/plugin-react';
 import svgrPlugin from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import commonjs from 'vite-plugin-commonjs';
 import viteCompression from 'vite-plugin-compression';
-
 import 'vite-compatible-readable-stream';
-import { execSync } from "child_process"
 
 export default defineConfig(() => {
     const commitHash = execSync('git rev-parse HEAD').toString().trimEnd();
     const version = execSync('git describe --tags').toString().trimEnd();
 
     return ({
+        base: "/__BASE__/",
         plugins: [
             react(),
             tsconfigPaths(),
             svgrPlugin(),
             commonjs(),
             viteCompression(),
+            dynamicBase({
+                publicPath: 'window.__BASE__',
+                transformIndexHtml: true,
+            })
         ],
         resolve: {
             alias: {
@@ -66,9 +71,10 @@ export default defineConfig(() => {
         build: {
             minify: true,
             cssMinify: true,
-            manifest: false,
+            manifest: true,
             emptyOutDir: false,
             outDir: 'dist',
+            assetsDir: 'public',
             commonjsOptions: {
                 transformMixedEsModules: true
             },
@@ -81,7 +87,7 @@ export default defineConfig(() => {
                         codemirror: ["codemirror", "react-codemirror2"]
                     }
                 }
-            }
+            },
         },
         assetsInclude: ['**/*.jpg', '**/*.jpeg', '**/*.mp4', '**/*.png', '**/*.svg']
     })