Merge pull request #65 from RDFLib/feature/base-url-fix

Allow for configuring a base URL
RDFLib · Feb 18, 2024 · 69a3b44 · 69a3b44
2 parents b0d59e9 + 9030727
commit 69a3b44
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 35 deletions.
diff --git a/.env b/.env
@@ -30,4 +30,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=/
diff --git a/Dockerfile b/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

diff --git a/docker_entrypoint.sh b/docker_entrypoint.sh
@@ -1,5 +1,6 @@
 #!/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
@@ -13,4 +14,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;';
diff --git a/env.d.ts b/env.d.ts
@@ -6,6 +6,7 @@ interface ImportMetaEnv {
     readonly VITE_PER_PAGE: number;
     readonly VITE_CONCEPT_PER_PAGE: number;
     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;

diff --git a/index.html b/index.html
@@ -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();

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,39 +1,43 @@
 import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 import pluginRewriteAll from "vite-plugin-rewrite-all";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [vue(), 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(), 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 || "/")),
+    };
+});