Adjust base path handling

README.md

@@ -36,6 +36,8 @@ Instances of jskos-proxy are configured with environment variables, in local fil
 
 - `PORT` - which port to run the service on (default: `3555`)
 - `NAMESPACE` - URI namespace of all objects served via this proxy. Must end with a slash (default: `http://example.org/`)
+- `BASE` - Path under which the application will be hosted on. Must end with a slash. (Default: `/`)
+  - If `NAMESPACE` is `http://example.org/some-path/`, but `http://example.org/` itself is not served by jskos-proxy, you need to set `BASE` to `/some-path/`.
 - `BACKEND` - JSKOS API base URL
 - `TITLE` - Title of the service (default `JSKOS Proxy`)
 <!-- - `LOGO` - optional logo image file, must be placed in `public` directory -->

config/config.js

@@ -45,6 +45,7 @@ const config = {
   env: NODE_ENV,
   configDir,
   isProduction: NODE_ENV === "production",
+  base: env.BASE || "/",
   namespace: new URL(env.NAMESPACE || "http://example.org/"),
   port: env.PORT || 3555,
   backend: env.BACKEND || "test/items.ndjson",

src/client/components/TheHeader.vue

@@ -1,18 +1,18 @@
 <script setup>
-import { inject, ref, watch } from "vue"
+import { ref, watch } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { utils } from "jskos-vue"
 import { locale } from "@/store.js"
 
-const config = inject("config")
+import { routerBasePath } from "@/utils.js"
 const router = useRouter()
 const route = useRoute()
 
 // TODO: Improve search (probably use API instead)
 const search = ref(null)
 watch(search, utils.debounce((value) => {
   if (value != null) {
-    router.push(`${config.namespace.pathname}${value === "" ? "" : "?search="}${encodeURIComponent(value)}`)
+    router.push(`${routerBasePath}${value === "" ? "" : "?search="}${encodeURIComponent(value)}`)
   }
 }, 150))
 
@@ -29,7 +29,7 @@ import CustomHeader from "#/config/_current/Header.vue"
   <nav>
     <RouterLink 
       style="flex: 1;"
-      :to="`${config.namespace.pathname}`">
+      :to="routerBasePath">
       <img
         alt="Logo"
         class="logo"
@@ -51,7 +51,7 @@ import CustomHeader from "#/config/_current/Header.vue"
           @click.stop.prevent="locale = locale_">{{ locale_.toUpperCase() }}</a>
       </template>
       <br><br>
-      <RouterLink :to="`${config.namespace.pathname}about`">
+      <RouterLink :to="`${routerBasePath}about`">
         {{ $t("about") }}
       </RouterLink>
       <br>

src/client/router/index.js

@@ -2,21 +2,22 @@ import { createRouter, createWebHistory } from "vue-router"
 import HomeView from "../views/HomeView.vue"
 
 import config from "@/config.js"
+import { routerBasePath } from "@/utils.js"
 
 const routes = [
   {
-    path: config.namespace.pathname,
+    path: routerBasePath,
     name: "home",
     component: HomeView,
   },
   {
-    path: `${config.namespace.pathname}about`,
+    path: `${routerBasePath}about`,
     name: "about",
     component: () => import("../views/AboutView.vue"),
   },
 ]
 
-if (config.namespace.pathname !== "/") {
+if (routerBasePath !== "/") {
   routes.push({
     path: "/",
     name: "root",
@@ -26,7 +27,7 @@ if (config.namespace.pathname !== "/") {
 
 if (config.listing) {
   routes.push({
-    path: `${config.namespace.pathname}:voc/:id?`,
+    path: `${routerBasePath}:voc/:id?`,
     name: "item",
     component: () => import("../views/ItemView.vue"),
   })

src/client/utils.js

@@ -1,17 +1,19 @@
 import config from "@/config.js"
 
+export const routerBasePath = "/" + config.namespace.pathname.replace(import.meta.env.BASE_URL, "")
+
 export function getRouterUrl({ scheme, concept }) {
   if (concept?.uri.startsWith(config.namespace)) {
-    return `${config.namespace.pathname}${concept.uri.replace(config.namespace, "")}`
+    return `${routerBasePath}${concept.uri.replace(config.namespace, "")}`
   }
   if (!scheme?.uri) {
-    return config.namespace.pathname
+    return routerBasePath
   }
   let url
   if (scheme.uri.startsWith(config.namespace)) {
-    url = `${config.namespace.pathname}${scheme.uri.replace(config.namespace, "")}`
+    url = `${routerBasePath}${scheme.uri.replace(config.namespace, "")}`
   } else {
-    url = `${config.namespace.pathname}${encodeURIComponent(scheme.uri)}/`
+    url = `${routerBasePath}${encodeURIComponent(scheme.uri)}/`
   }
 
   if (!concept?.uri) {

src/client/views/AboutView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import config from "@/config.js"
 import { locale } from "@/store.js"
+import { routerBasePath } from "@/utils.js"
 </script>
 
 <template>
@@ -11,7 +12,7 @@ import { locale } from "@/store.js"
     <h1>{{ $t("aboutTitle") }}</h1>
     <template v-if="locale === 'de'">
       <p>
-        Unter <a :href="config.namespace.pathname">{{ config.namespace }}</a>
+        Unter <a :href="routerBasePath">{{ config.namespace }}</a>
         können <b>kontrollierte Vokabulare</b> (Normdateien, Klassifikationen, Thesauri...)
         in einer Webansicht und als Linked Open Data abgerufen werden.
       </p>
@@ -23,7 +24,7 @@ import { locale } from "@/store.js"
     <template v-else>
       <!-- TODO -->
       <p>
-        <a :href="config.namespace.pathname">{{ config.namespace }}</a>
+        <a :href="routerBasePath">{{ config.namespace }}</a>
         allows <b>controlled vocabularies</b> (norm data, classifications, thesauri...)
         to be browsed in a web view and accessed as Linked Open Data.
       </p>

vite.config.js

@@ -25,4 +25,5 @@ export default defineConfig({
   define: {
     __CONFIG__: config,
   },
+  base: config.base,
 })