Allow for configuring a base URL

.env

@@ -27,4 +27,4 @@ VITE_MAP_SEARCH_PROPS_DS_LABEL=http://purl.org/dc/terms/title
 ## LOCAL DEV ENVIRONMENT
 ## ---------------------------------------
 VITE_API_BASE_URL=http://localhost:8000
-
+VITE_BASE_URL=/

Dockerfile

@@ -4,7 +4,7 @@ COPY package*.json ./
 RUN npm install
 COPY . ./
 RUN rm .env
-RUN CI=false npm run build
+RUN CI=false VITE_DYNAMIC_BASE_URL=1 npm run build
 
 FROM nginx:alpine AS prod
 RUN apk add --no-cache bash

docker_entrypoint.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
+# insert env vars in index.js
 INDEX_FILE=/app/assets/index.*.js;
-
 grep "=" .env | while read -r line; do # loop over VITE_ env vars
     left=`echo $line | awk -F "=" '{print $1}'`; # env var name
     right=`echo $line | awk -F "=" '{print $2}'`; # default value
@@ -13,4 +13,12 @@ grep "=" .env | while read -r line; do # loop over VITE_ env vars
     fi
 done
 
+# insert base url in index.html
+if (declare -p "VITE_BASE_URL" &>/dev/null)
+then
+    sed -i "s|BASE_URL = \"/\"|BASE_URL = \"$VITE_BASE_URL\"|g" /app/index.html
+    sed -i "s|/@BASE_URL@/|$VITE_BASE_URL|g" /app/index.html ${INDEX_FILE}
+    cp /app/index.html /app/404.html
+fi
+
 nginx -g 'daemon off;';

env.d.ts

@@ -3,6 +3,7 @@ interface ImportMetaEnv {
     readonly VITE_SIDENAV: string; // true | false
     readonly VITE_ENABLED_PREZS: string; // CatPrez | SpacePrez | VocPrez comma separated
     readonly VITE_API_BASE_URL: string;
+    readonly VITE_BASE_URL: string;
     readonly VITE_MAP_SETTINGS_API_KEY: string;
     readonly VITE_MAP_SETTINGS_OPTIONS_CENTER_LAT: number;
     readonly VITE_MAP_SETTINGS_OPTIONS_CENTER_LNG: number;

index.html

@@ -6,8 +6,8 @@
     <link rel="icon" href="/theme/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Prez</title>
-    <script src="https://kit.fontawesome.com/5660b8b2a9.js" crossorigin="anonymous"></script>
-    <link href="https://unpkg.com/@triply/yasgui/build/yasgui.min.css" rel="stylesheet" type="text/css" />
+    <script class="external" src="https://kit.fontawesome.com/5660b8b2a9.js" crossorigin="anonymous"></script>
+    <link class="external" href="https://unpkg.com/@triply/yasgui/build/yasgui.min.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="/theme/theme.css">
 </head>
@@ -17,7 +17,9 @@
     <div id="app"></div>
     <footer id="footer"></footer>
     <script>
-        fetch("/theme/header.html")
+        var BASE_URL = "/";
+
+        fetch(`${BASE_URL}theme/header.html`)
             .then(response => {
                 if (response.ok) {
                     return response.text();
@@ -26,8 +28,7 @@
             .then(text => {
                 document.querySelector("#header").innerHTML = text;
             });
-
-        fetch("/theme/footer.html")
+        fetch(`${BASE_URL}theme/footer.html`)
             .then(response => {
                 if (response.ok) {
                     return response.text();

vite.config.ts

@@ -1,40 +1,44 @@
 import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 import VueTypeImports from "vite-plugin-vue-type-imports";
 import pluginRewriteAll from "vite-plugin-rewrite-all";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [vue(), VueTypeImports(), pluginRewriteAll(),],
-    resolve: {
-        alias: {
-            "@": fileURLToPath(new URL("./src", import.meta.url))
-        }
-    },
-    build: {
-        target: "es2020",
-    },
-    optimizeDeps: {
-        esbuildOptions: {
+export default defineConfig(({ mode }) => {
+    process.env = {...process.env, ...loadEnv(mode, process.cwd())};
+
+    return {
+        plugins: [vue(), VueTypeImports(), pluginRewriteAll(),],
+        resolve: {
+            alias: {
+                "@": fileURLToPath(new URL("./src", import.meta.url))
+            }
+        },
+        build: {
             target: "es2020",
         },
-        include: [
-            "@fawmi/vue-google-maps",
-            "fast-deep-equal",
-        ]
-    },
-    css: {
-        preprocessorOptions: {
-            scss: {
-                additionalData: `
-                    @import "@/assets/sass/variables.scss";
-                    @import "@/assets/sass/mixins.scss";
-                    @import "@/assets/sass/transitions.scss";
-                `
+        optimizeDeps: {
+            esbuildOptions: {
+                target: "es2020",
+            },
+            include: [
+                "@fawmi/vue-google-maps",
+                "fast-deep-equal",
+            ]
+        },
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    additionalData: `
+                        @import "@/assets/sass/variables.scss";
+                        @import "@/assets/sass/mixins.scss";
+                        @import "@/assets/sass/transitions.scss";
+                    `
+                }
             }
-        }
-    },
-    base: process.env.GH_PAGES_DEMO ? "/prez-ui/" : "/",
-});
+        },
+        base: process.env.GH_PAGES_DEMO ? "/prez-ui/" : (process.env.VITE_DYNAMIC_BASE_URL ? '/@BASE_URL@/' : (process.env.VITE_BASE_URL || "/")),
+    };
+});