feat(base-path): subpath mounting via BASE_PATH env

Dockerfile

@@ -7,6 +7,10 @@ RUN npm ci
 
 COPY . .
 
+# Optional subpath mounting (e.g. /indexerui). Pass via
+# `docker build --build-arg BASE_PATH=/indexerui` or in docker-compose.yaml.
+ARG BASE_PATH=""
+ENV BASE_PATH=${BASE_PATH}
 RUN npm run build
 
 FROM node:23-alpine AS production

src/lib/api/index.ts

@@ -1,3 +1,5 @@
+import { base } from "$app/paths";
+
 // Removes the trailing slash from the base URL if it exists
 const normalizeUrl = (url: string): string => {
     return url.endsWith("/") ? url.slice(0, -1) : url;
@@ -25,7 +27,10 @@ export function isOidcMode() {
 }
 
 export async function loadConfig() {
-    const res = await fetch("/api/config");
+    // Prefix with SvelteKit's `base` (set via kit.paths.base / BASE_PATH env
+    // at build) so the call resolves correctly when indexer-ui is mounted
+    // under a subpath like /indexerui/.
+    const res = await fetch(`${base}/api/config`);
     if (!res.ok) throw new Error("Failed to load config");
     const config = await res.json();
     API_BASE_URL = normalizeUrl(config.API_BASE_URL);

src/lib/components/dashboard/Header.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from "$app/paths";
     /**
      * This file corresponds to the header component of the application.
      * It displays the current partition and file, provides a button to upload files,
@@ -42,7 +43,7 @@
 <header class="flex items-center justify-between p-4 pb-0">
     <!-- Navigation between files and partitions -->
     <div class="flex items-center space-x-2 text-xl font-bold">
-        <a href="/dashboard" class="flex items-center gap-3 rounded-xl px-2 py-1 hover:bg-slate-100">
+        <a href="{base}/dashboard" class="flex items-center gap-3 rounded-xl px-2 py-1 hover:bg-slate-100">
             <Dashboard className="size-6 fill-linagora-500" /> Dashboard
         </a>
     </div>

src/lib/components/indexer/Header.svelte

@@ -6,6 +6,8 @@
      * @author Ulysse Bouchet for LINAGORA
      */
 
+    import { base } from "$app/paths";
+
     // States, persisted states, and cookies
     import { indexerData, ui } from "$lib/states.svelte";
 
@@ -52,13 +54,13 @@
 <header class="flex items-center justify-between p-4 pb-0">
     <!-- Navigation between files and partitions -->
     <div class="flex items-center space-x-2 text-xl font-bold">
-        <a href="/indexer" class="flex items-center gap-3 rounded-xl px-2 py-1 hover:bg-slate-100">
+        <a href="{base}/indexer" class="flex items-center gap-3 rounded-xl px-2 py-1 hover:bg-slate-100">
             <FileStorage className="size-6 fill-linagora-500" /> Indexer
         </a>
         {#if indexerData.currentPartition.partition}
             <ChevronDown className="size-4 -rotate-90 stroke-3 stroke-linagora-500" />
             <a
-                href="/indexer/partition/{indexerData.currentPartition.partition.partition}"
+                href="{base}/indexer/partition/{indexerData.currentPartition.partition.partition}"
                 class="flex items-center gap-2 rounded-xl px-2 py-1 hover:bg-slate-100"
             >
                 {indexerData.currentPartition.partition.partition}

src/lib/components/layout/NavBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from "$app/paths";
     // Utilities
     import { page } from "$app/state";
     import * as api from "$lib/api";
@@ -56,7 +57,7 @@
     <div
         class="relative min-w-16 h-full bg-linagora-500 rounded-r-2xl flex flex-col items-center pt-4 pb-6"
     >
-        <a href="/">
+        <a href="{base}/">
             <OpenRAG
                 className="group size-12 rounded-2xl cursor-pointer hover:bg-linagora-600"
                 circleClassName="group-hover:fill-linagora-600"
@@ -70,7 +71,7 @@
         >
             <!-- Home -->
             <a
-                href="/"
+                href="{base}/"
                 title="Home"
                 class="p-2 rounded-2xl
                 {currentRoute === 'home'
@@ -81,7 +82,7 @@
             </a>
             <!-- Indexer -->
             <a
-                href="/indexer/"
+                href="{base}/indexer/"
                 title="Indexer"
                 class="p-2 rounded-2xl
                 {currentRoute === 'indexer'
@@ -92,7 +93,7 @@
             </a>
             <!-- Dashboard -->
             <a
-                href="/dashboard/"
+                href="{base}/dashboard/"
                 title="Dashboard"
                 class="p-2 rounded-2xl
                 {currentRoute === 'dashboard'
@@ -139,7 +140,7 @@
     <div
         class="relative min-w-64 h-full bg-linagora-500 rounded-r-2xl flex flex-col p-6"
     >
-        <a href="/">
+        <a href="{base}/">
             <div
                 class="group w-full pr-4 py-1 text-2xl text-white font-bold self-center mb-2 flex items-center space-x-1.5 rounded-3xl cursor-pointer
             hover:bg-linagora-600"
@@ -157,7 +158,7 @@
         <div class="flex flex-col space-y-1 text-white font-medium">
             <!-- Home -->
             <a
-                href="/"
+                href="{base}/"
                 class="relative p-2 flex items-center space-x-2 rounded-2xl
                 {currentRoute === 'home'
                     ? 'bg-linagora-700'
@@ -173,7 +174,7 @@
             </a>
             <!-- Indexer -->
             <a
-                href="/indexer"
+                href="{base}/indexer"
                 class="relative p-2 flex items-center space-x-2 rounded-2xl
                 {currentRoute === 'indexer'
                     ? 'bg-linagora-700'
@@ -189,7 +190,7 @@
             </a>
             <!-- Dashboard -->
             <a
-                href="/dashboard"
+                href="{base}/dashboard"
                 class="relative p-2 flex items-center space-x-2 rounded-2xl
                 {currentRoute === 'dashboard'
                     ? 'bg-linagora-700'

src/routes/(home)/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from "$app/paths";
     // Icons
     import OpenRAG from "$lib/icons/OpenRAG.svelte";
     import FileStorage from "$lib/icons/FileStorage.svelte";
@@ -30,7 +31,7 @@
     <div class="flex space-x-6">
         <!-- Indexer -->
         <a
-            href="/indexer"
+            href="{base}/indexer"
             aria-label="Link to indexer"
             class="h-72 w-60 p-6 flex flex-col items-center
             rounded-3xl border border-slate-200 shadow-lg cursor-pointer
@@ -45,7 +46,7 @@
         </a>
         <!-- Dashboard -->
         <a
-            href="/dashboard"
+            href="{base}/dashboard"
             aria-label="Link to dashboard"
             class="h-72 w-60 p-6 flex flex-col items-center
             rounded-3xl border border-slate-200 shadow-lg cursor-pointer

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from "$app/paths";
     /**
      * This file serves as the main layout for the application.
      * It handles authentication, UI state, data loading, and rendering of child components.
@@ -80,7 +81,7 @@
             page.route.id !== "/indexer" &&
             page.route.id !== "/dashboard"
         ) {
-            goto("/"); // Redirect to home page to hide ids from URL
+            goto(`${base}/`); // Redirect to home page to hide ids from URL
         }
 
         loading = false;

src/routes/dashboard/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from "$app/paths";
     // Utilities
     import { page } from "$app/state";
     import { goto } from "$app/navigation";
@@ -65,7 +66,7 @@
 
         //     if (!data.currentPartition?.partition) {
         //         console.log("No partition found, redirecting to partition list.");
-        //         goto("/");
+        //         goto(`${base}/`);
         //         return;
         //     }
 
@@ -77,7 +78,7 @@
 
         //     if (!data.currentPartition?.partition) {
         //         console.log("No partition found, redirecting to partition list.");
-        //         goto("/");
+        //         goto(`${base}/`);
         //         return;
         //     }
 

src/routes/indexer/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from "$app/paths";
     // Utilities
     import { page } from "$app/state";
     import { goto } from "$app/navigation";
@@ -90,7 +91,7 @@
 
             if (!indexerData.currentPartition?.partition) {
                 console.log("No partition found, redirecting to partition list.");
-                goto("/");
+                goto(`${base}/`);
                 return;
             }
 
@@ -102,7 +103,7 @@
 
             if (!indexerData.currentPartition?.partition) {
                 console.log("No partition found, redirecting to partition list.");
-                goto("/");
+                goto(`${base}/`);
                 return;
             }
 

src/routes/indexer/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from "$app/paths";
     /**
      * This file serves as the main page for the application.
      * It displays a list of partitions, allows users to select and delete them,
@@ -218,7 +219,7 @@
                             checked={selectedPartitions.has(partition)}
                             onChange={() => toggleSelect(partition)}
                         />
-                        <a href="/indexer/partition/{partition.partition}" class="flex w-full items-center space-x-3 py-4">
+                        <a href="{base}/indexer/partition/{partition.partition}" class="flex w-full items-center space-x-3 py-4">
                             <Folder className="size-6 fill-linagora-500 stroke-3" />
                             <div class="grow flex items-center space-x-2">
                                 <span>{partition.partition}</span>
@@ -265,7 +266,7 @@
                             />
                         </button>
                         <a
-                            href="/indexer/partition/{partition.partition}"
+                            href="{base}/indexer/partition/{partition.partition}"
                             class="absolute w-full h-full top-0 left-0 flex flex-col items-center rounded-2xl border border-slate-200 bg-white shadow-md
                             hover:shadow-lg hover:bg-slate-50 p-2 text-center"
                         >

src/routes/indexer/partition/[partition]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from "$app/paths";
     /**
      * This file represents the "partition" view.
      * It displays the files present in a partition, with options to sort or delete them.
@@ -135,7 +136,7 @@
     async function refreshFileList() {
         if (!indexerData.currentPartition?.partition) {
             console.log("No partition found, redirecting to partition list.");
-            goto("/");
+            goto(`${base}/`);
             return;
         }
 
@@ -145,7 +146,7 @@
             if (error.message.includes("404")) {
                 // A 404 error indicates that the partition has been deleted since no files are left
                 console.log("Partition is now empty and has been deleted, redirecting to partition list.");
-                goto("/");
+                goto(`${base}/`);
             } else console.error("Error refreshing files:", error);
         }
     }
@@ -235,7 +236,7 @@
                     <div class="group flex items-center space-x-4 border-b border-slate-200 px-4 hover:bg-slate-50">
                         <Checkbox checked={selectedFiles.has(file)} onChange={() => toggleSelect(file)} />
                         <a
-                            href="/indexer/partition/{indexerData.currentPartition?.partition?.partition}/file/{file.file_id}"
+                            href="{base}/indexer/partition/{indexerData.currentPartition?.partition?.partition}/file/{file.file_id}"
                             class="flex w-full items-center space-x-3 py-4"
                             title="id: {file.file_id}"
                         >
@@ -282,7 +283,7 @@
                             />
                         </button>
                         <a
-                            href="/indexer/partition/{indexerData.currentPartition?.partition?.partition}/file/{file.file_id}"
+                            href="{base}/indexer/partition/{indexerData.currentPartition?.partition?.partition}/file/{file.file_id}"
                             class="absolute w-full h-full top-0 left-0 flex flex-col items-center rounded-2xl border border-slate-200 bg-white shadow-md
                             hover:shadow-lg hover:bg-slate-50 p-2 text-center"
                             title="id: {file.file_id}"

svelte.config.js

@@ -11,7 +11,14 @@ const config = {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter(),
+		// Mount the app at a subpath when deployed behind a single vhost that
+		// also serves the OpenRag backend. Set BASE_PATH at build time (e.g.
+		// `BASE_PATH=/indexerui npm run build`). Must start with `/` and have
+		// no trailing slash. Leave empty (default) for root-level deployment.
+		paths: {
+			base: process.env.BASE_PATH ?? ''
+		}
 	}
 };