From 1bc158607a000033d8054d16733eb4138b6f4896 Mon Sep 17 00:00:00 2001
From: t1 <i@sunisle.org>
Date: Wed, 29 Oct 2025 11:57:15 +0800
Subject: [PATCH 1/3] Support configurable base path deployment

---
 README.md      | 10 ++++++++++
 src/App.jsx    |  4 +++-
 vite.config.js | 18 ++++++++++++------
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 2b6976c15..be8e3ea64 100644
--- a/README.md
+++ b/README.md
@@ -57,6 +57,16 @@ npm install
 npm run build
 ```
 
+#### Serving from a sub-path
+
+If you need the app to live under a path prefix (for example `/drawdb`), set `VITE_BASE_PATH` before building or previewing:
+
+```bash
+VITE_BASE_PATH=/drawdb npm run build
+```
+
+All generated asset links and client-side routes will then resolve relative to `/drawdb`. Make sure your web server rewrites unknown paths back to the built `index.html` so the SPA router can handle them.
+
 ### Docker Build
 
 ```bash
diff --git a/src/App.jsx b/src/App.jsx
index fcb09811b..df1782eca 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -8,9 +8,11 @@ import SettingsContextProvider from "./context/SettingsContext";
 import NotFound from "./pages/NotFound";
 
 export default function App() {
+  const basename = import.meta.env.BASE_URL.replace(/\/$/, "");
+
   return (
     <SettingsContextProvider>
-      <BrowserRouter>
+      <BrowserRouter basename={basename || undefined}>
         <RestoreScroll />
         <Routes>
           <Route path="/" element={<LandingPage />} />
diff --git a/vite.config.js b/vite.config.js
index 5a33944a9..cea2b99ee 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,13 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  const rawBase = env.VITE_BASE_PATH || "/";
+  const base = rawBase.endsWith("/") ? rawBase : `${rawBase}/`;
+
+  return {
+    base,
+    plugins: [react()],
+  };
+});

From b397f7cb836f6a6fc6b9277af5278507a8544fbe Mon Sep 17 00:00:00 2001
From: t1 <i@sunisle.org>
Date: Wed, 29 Oct 2025 12:04:16 +0800
Subject: [PATCH 2/3] Fix lint for Vite config

---
 vite.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vite.config.js b/vite.config.js
index cea2b99ee..e3a10ac20 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,3 +1,4 @@
+/* eslint-env node */
 import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 

From c6ff50872f05b8470609e0ad4360ed015d927f2b Mon Sep 17 00:00:00 2001
From: t1 <i@sunisle.org>
Date: Wed, 29 Oct 2025 12:16:04 +0800
Subject: [PATCH 3/3] Allow Docker builds with custom base path

---
 Dockerfile | 2 ++
 README.md  | 7 +++++++
 2 files changed, 9 insertions(+)

diff --git a/Dockerfile b/Dockerfile
index ed35b52f4..a4f570619 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -5,6 +5,8 @@ COPY package*.json ./
 RUN npm ci
 COPY . .
 ENV NODE_OPTIONS="--max-old-space-size=4096"
+ARG VITE_BASE_PATH=/
+ENV VITE_BASE_PATH=${VITE_BASE_PATH}
 RUN npm run build
 
 # Stage 2: Setup the Nginx Server to serve the app
diff --git a/README.md b/README.md
index be8e3ea64..f776347b7 100644
--- a/README.md
+++ b/README.md
@@ -74,4 +74,11 @@ docker build -t drawdb .
 docker run -p 3000:80 drawdb
 ```
 
+To serve the app from a sub-path in Docker, pass the base path during build:
+
+```bash
+docker build --build-arg VITE_BASE_PATH=/drawdb -t drawdb .
+docker run -p 3000:80 drawdb
+```
+
 If you want to enable sharing, set up the [server](https://github.com/drawdb-io/drawdb-server) and environment variables according to `.env.sample`. This is optional unless you need to share files..