(feat) allow deployment under relative base path

Dockerfile

@@ -11,6 +11,8 @@ ARG USE_CUDA_VER=cu121
 # IMPORTANT: If you change the default model (all-MiniLM-L6-v2) and vice versa, you aren't able to use RAG Chat with your previous documents loaded in the WebUI! You need to re-embed them.
 ARG USE_EMBEDDING_MODEL=all-MiniLM-L6-v2
 
+ARG WEBUI_BASE_PATH=""
+
 ######## WebUI frontend ########
 FROM --platform=$BUILDPLATFORM node:21-alpine3.19 as build
 
@@ -38,7 +40,8 @@ ENV ENV=prod \
     USE_OLLAMA_DOCKER=${USE_OLLAMA} \
     USE_CUDA_DOCKER=${USE_CUDA} \
     USE_CUDA_DOCKER_VER=${USE_CUDA_VER} \
-    USE_EMBEDDING_MODEL_DOCKER=${USE_EMBEDDING_MODEL}
+    USE_EMBEDDING_MODEL_DOCKER=${USE_EMBEDDING_MODEL} \
+    WEBUI_BASE_PATH=${WEBUI_BASE_PATH} 
 
 ## Basis URL Config ##
 ENV OLLAMA_BASE_URL="/ollama" \

backend/config.py

@@ -71,6 +71,7 @@
     log.warning("dotenv not installed, skipping...")
 
 WEBUI_NAME = os.environ.get("WEBUI_NAME", "Open WebUI")
+WEBUI_BASE_PATH = os.environ.get("WEBUI_BASE_PATH", "")
 WEBUI_FAVICON_URL = "https://openwebui.com/favicon.png"
 
 ####################################

backend/main.py

@@ -35,6 +35,7 @@
 
 from config import (
     CONFIG_DATA,
+    WEBUI_BASE_PATH,
     WEBUI_NAME,
     ENV,
     VERSION,
@@ -298,12 +299,12 @@ async def get_manifest_json():
     return {
         "name": WEBUI_NAME,
         "short_name": WEBUI_NAME,
-        "start_url": "/",
+        "start_url": f"{WEBUI_BASE_PATH}/",
         "display": "standalone",
         "background_color": "#343541",
         "theme_color": "#343541",
         "orientation": "portrait-primary",
-        "icons": [{"src": "/favicon.png", "type": "image/png", "sizes": "844x884"}],
+        "icons": [{"src": f"{WEBUI_BASE_PATH}/favicon.png", "type": "image/png", "sizes": "844x884"}],
     }
 
 

src/lib/components/chat/Settings/Chats.svelte

@@ -15,6 +15,7 @@
 	import { onMount, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
+	import { base } from '$app/paths';
 
 	const i18n = getContext('i18n');
 
@@ -76,7 +77,7 @@
 	};
 
 	const deleteChats = async () => {
-		await goto('/');
+		await goto(`${base}/`);
 		await deleteAllChats(localStorage.token).catch((error) => {
 			toast.error(error);
 		});
@@ -88,7 +89,7 @@
 		console.log(saveChatHistory);
 
 		if (saveChatHistory === false) {
-			await goto('/');
+			await goto(`${base}/`);
 		}
 		saveSettings({ saveChatHistory: saveChatHistory });
 	};

src/lib/components/chat/ShareChatModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte';
 
+	import { base } from '$app/paths';
 	import { toast } from 'svelte-sonner';
 	import { deleteSharedChatById, getChatById, shareChatById } from '$lib/apis/chats';
 	import { modelfiles } from '$lib/stores';
@@ -19,7 +20,7 @@
 		const _chat = chat;
 
 		const sharedChat = await shareChatById(localStorage.token, chatId);
-		shareUrl = `${window.location.origin}/s/${sharedChat.id}`;
+		shareUrl = `${window.location.origin}${base}/s/${sharedChat.id}`;
 		console.log(shareUrl);
 		chat = await getChatById(localStorage.token, chatId);
 
@@ -97,7 +98,7 @@
 			<div class="px-4 pt-4 pb-5 w-full flex flex-col justify-center">
 				<div class=" text-sm dark:text-gray-300 mb-1">
 					{#if chat.share_id}
-						<a href="/s/{chat.share_id}" target="_blank"
+						<a href="{base}/s/{chat.share_id}" target="_blank"
 							>You have shared this chat <span class=" underline">before</span>.</a
 						>
 						Click here to

src/lib/components/layout/Sidebar.svelte

@@ -5,6 +5,7 @@
 	const { saveAs } = fileSaver;
 
 	import { goto, invalidateAll } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { user, chats, settings, showSettings, chatId, tags } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
@@ -130,7 +131,7 @@
 
 		if (res) {
 			if ($chatId === id) {
-				goto('/');
+				goto(`${base}/`);
 			}
 
 			await chats.set(await getChatList(localStorage.token));
@@ -140,7 +141,7 @@
 	const saveSettings = async (updated) => {
 		await settings.set({ ...$settings, ...updated });
 		localStorage.setItem('settings', JSON.stringify($settings));
-		location.href = '/';
+		location.href = `${base}/`;
 	};
 
 	const archiveChatHandler = async (id) => {
@@ -173,11 +174,11 @@
 			<a
 				id="sidebar-new-chat-button"
 				class="flex-grow flex justify-between rounded-xl px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
-				href="/"
+				href="{base}/"
 				on:click={async () => {
 					selectedChatId = null;
 
-					await goto('/');
+					await goto(`${base}/`);
 					const newChatButton = document.getElementById('new-chat-button');
 					setTimeout(() => {
 						newChatButton?.click();
@@ -218,7 +219,7 @@
 			<div class="px-2 flex justify-center mt-0.5">
 				<a
 					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
-					href="/modelfiles"
+					href="{base}/modelfiles"
 					on:click={() => {
 						selectedChatId = null;
 						chatId.set('');
@@ -250,7 +251,7 @@
 			<div class="px-2 flex justify-center">
 				<a
 					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
-					href="/prompts"
+					href="{base}/prompts"
 					on:click={() => {
 						selectedChatId = null;
 						chatId.set('');
@@ -282,7 +283,7 @@
 			<div class="px-2 flex justify-center mb-1">
 				<a
 					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
-					href="/documents"
+					href="{base}/documents"
 					on:click={() => {
 						selectedChatId = null;
 						chatId.set('');
@@ -454,7 +455,7 @@
 									: chat.id === selectedChatId
 									? 'bg-gray-100 dark:bg-gray-950'
 									: ' group-hover:bg-gray-100 dark:group-hover:bg-gray-950'}  whitespace-nowrap text-ellipsis"
-								href="/c/{chat.id}"
+								href="{base}/c/{chat.id}"
 								on:click={() => {
 									selectedChatId = chat.id;
 									if (window.innerWidth < 1024) {
@@ -654,7 +655,7 @@
 									<button
 										class="flex rounded-md py-2.5 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-800 transition"
 										on:click={() => {
-											goto('/admin');
+											goto(`${base}/admin`);
 											showDropdown = false;
 										}}
 									>
@@ -680,7 +681,7 @@
 									<button
 										class="flex rounded-md py-2.5 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-800 transition"
 										on:click={() => {
-											goto('/playground');
+											goto(`${base}/playground`);
 											showDropdown = false;
 										}}
 									>
@@ -756,7 +757,7 @@
 									class="flex rounded-md py-2.5 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-800 transition"
 									on:click={() => {
 										localStorage.removeItem('token');
-										location.href = '/auth';
+										location.href = `${base}/auth`;
 										showDropdown = false;
 									}}
 								>

src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte

@@ -5,6 +5,7 @@
 
 	const dispatch = createEventDispatcher();
 
+	import { base } from '$app/paths';
 	import Modal from '$lib/components/common/Modal.svelte';
 	import { archiveChatById, deleteChatById, getArchivedChatList } from '$lib/apis/chats';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -86,7 +87,7 @@
 												'border-b'} dark:bg-gray-900 dark:border-gray-850 text-xs"
 										>
 											<td class="px-3 py-1 w-2/3">
-												<a href="/c/{chat.id}" target="_blank">
+												<a href="{base}/c/{chat.id}" target="_blank">
 													<div class=" underline line-clamp-1">
 														{chat.title}
 													</div>

src/lib/constants.ts

@@ -1,8 +1,9 @@
 import { dev } from '$app/environment';
+import { base } from '$app/paths';
 // import { version } from '../../package.json';
 
 export const APP_NAME = 'Open WebUI';
-export const WEBUI_BASE_URL = dev ? `http://${location.hostname}:8080` : ``;
+export const WEBUI_BASE_URL = dev ? `http://${location.hostname}:8080` : `${base}`;
 
 export const WEBUI_API_BASE_URL = `${WEBUI_BASE_URL}/api/v1`;
 

src/routes/(app)/+layout.svelte

@@ -6,6 +6,7 @@
 	const { saveAs } = fileSaver;
 
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 
 	import { getOllamaModels, getOllamaVersion } from '$lib/apis/ollama';
 	import { getModelfiles } from '$lib/apis/modelfiles';
@@ -86,7 +87,7 @@
 
 	onMount(async () => {
 		if ($user === undefined) {
-			await goto('/auth');
+			await goto(`${base}/auth`);
 		} else if (['user', 'admin'].includes($user.role)) {
 			try {
 				// Check if IndexedDB exists
@@ -235,7 +236,7 @@
 								<button
 									class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
 									on:click={async () => {
-										location.href = '/';
+										location.href = `${base}/`;
 									}}
 								>
 									{$i18n.t('Check Again')}
@@ -245,7 +246,7 @@
 									class="text-xs text-center w-full mt-2 text-gray-400 underline"
 									on:click={async () => {
 										localStorage.removeItem('token');
-										location.href = '/auth';
+										location.href = `${base}/auth`;
 									}}>{$i18n.t('Sign Out')}</button
 								>
 							</div>

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

@@ -4,6 +4,7 @@
 
 	import { onMount, tick, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 
 	import {
@@ -108,7 +109,7 @@
 			await cancelOllamaRequest(localStorage.token, currentRequestId);
 			currentRequestId = null;
 		}
-		window.history.replaceState(history.state, '', `/`);
+		window.history.replaceState(history.state, '', `${base}/`);
 		await chatId.set('');
 
 		autoScroll = true;
@@ -511,7 +512,7 @@
 		}
 
 		if (messages.length == 2 && messages.at(1).content !== '') {
-			window.history.replaceState(history.state, '', `/c/${_chatId}`);
+			window.history.replaceState(history.state, '', `${base}/c/${_chatId}`);
 			const _title = await generateChatTitle(userPrompt);
 			await setChatTitle(_chatId, _title);
 		}
@@ -706,7 +707,7 @@
 		}
 
 		if (messages.length == 2) {
-			window.history.replaceState(history.state, '', `/c/${_chatId}`);
+			window.history.replaceState(history.state, '', `${base}/c/${_chatId}`);
 
 			const _title = await generateChatTitle(userPrompt);
 			await setChatTitle(_chatId, _title);

src/routes/(app)/admin/+page.svelte

@@ -2,6 +2,7 @@
 	import { WEBUI_API_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user } from '$lib/stores';
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { onMount, getContext } from 'svelte';
 
 	import dayjs from 'dayjs';
@@ -61,7 +62,7 @@
 
 	onMount(async () => {
 		if ($user?.role !== 'admin') {
-			await goto('/');
+			await goto(`${base}/`);
 		} else {
 			users = await getUsers(localStorage.token);
 		}

src/routes/(app)/c/[id]/+page.svelte

@@ -4,6 +4,7 @@
 
 	import { onMount, tick, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 
 	import {
@@ -112,7 +113,7 @@
 				const chatInput = document.getElementById('chat-textarea');
 				chatInput?.focus();
 			} else {
-				await goto('/');
+				await goto(`${base}/`);
 			}
 		})();
 	}
@@ -124,7 +125,7 @@
 	const loadChat = async () => {
 		await chatId.set($page.params.id);
 		chat = await getChatById(localStorage.token, $chatId).catch(async (error) => {
-			await goto('/');
+			await goto(`${base}/`);
 			return null;
 		});
 
@@ -525,7 +526,7 @@
 		}
 
 		if (messages.length == 2 && messages.at(1).content !== '') {
-			window.history.replaceState(history.state, '', `/c/${_chatId}`);
+			window.history.replaceState(history.state, '', `${base}/c/${_chatId}`);
 			const _title = await generateChatTitle(userPrompt);
 			await setChatTitle(_chatId, _title);
 		}
@@ -718,7 +719,7 @@
 		}
 
 		if (messages.length == 2) {
-			window.history.replaceState(history.state, '', `/c/${_chatId}`);
+			window.history.replaceState(history.state, '', `${base}/c/${_chatId}`);
 
 			const _title = await generateChatTitle(userPrompt);
 			await setChatTitle(_chatId, _title);
@@ -848,7 +849,7 @@
 
 	onMount(async () => {
 		if (!($settings.saveChatHistory ?? true)) {
-			await goto('/');
+			await goto(`${base}/`);
 		}
 	});
 </script>
@@ -875,7 +876,7 @@
 					currentRequestId = null;
 				}
 
-				goto('/');
+				goto(`${base}/`);
 			}}
 		/>
 		<div class="flex flex-col flex-auto">