feat: configurable UI base path via BASE_PATH build arg

Allows serving the UI under a subpath (e.g. /ui) instead of root.

- Vite config reads BASE_PATH env var, sets it as the asset base
  and injects __BASE_PATH__ for runtime use
- React Router uses basename from __BASE_PATH__ for client-side routing
- Nginx config uses ${BASE_PATH} placeholder, replaced at build time
- Dockerfile accepts BASE_PATH build arg (default: /)
- Woodpecker docker pipeline passes BASE_PATH=/ui

.woodpecker/docker.yaml

@@ -22,6 +22,8 @@ steps:
       repo: git.unkin.net/unkin/artifactapi-ui
       dockerfile: ui/Dockerfile.ui
       context: ui
+      build_args:
+        - BASE_PATH=/ui
       username: droneci
       password:
         from_secret: DRONECI_PASSWORD

ui/Dockerfile.ui

@@ -6,13 +6,20 @@ COPY package.json package-lock.json* ./
 RUN npm ci
 
 COPY . .
+
+ARG BASE_PATH=/
+ENV BASE_PATH=${BASE_PATH}
 RUN npm run build
 
 FROM nginx:alpine
 
+ARG BASE_PATH=/
+
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 
+RUN sed -i "s|\${BASE_PATH}|${BASE_PATH}|g" /etc/nginx/conf.d/default.conf
+
 EXPOSE 80
 
 CMD ["nginx", "-g", "daemon off;"]

ui/nginx.conf

@@ -5,33 +5,7 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
-    location /api/ {
-        proxy_pass http://artifactapi:8000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_buffering off;
-    }
-
-    location /v2/ {
-        proxy_pass http://artifactapi:8000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_buffering off;
-    }
-
-    location /health {
-        proxy_pass http://artifactapi:8000;
-    }
-
-    location /metrics {
-        proxy_pass http://artifactapi:8000;
-    }
-
-    location / {
+    location ${BASE_PATH} {
         try_files $uri $uri/ /index.html;
     }
 }

ui/src/main.tsx

@@ -4,9 +4,13 @@ import { BrowserRouter } from 'react-router-dom';
 import { App } from './App';
 import './index.css';
 
+declare const __BASE_PATH__: string;
+
+const basename = __BASE_PATH__.replace(/\/+$/, '') || '/';
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename={basename}>
       <App />
     </BrowserRouter>
   </StrictMode>,

ui/vite.config.ts

@@ -1,7 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
+const basePath = process.env.BASE_PATH || '/'
+
 export default defineConfig({
+  base: basePath,
   plugins: [react()],
   server: {
     proxy: {
@@ -11,4 +14,7 @@ export default defineConfig({
       '/metrics': 'http://localhost:8000',
     },
   },
+  define: {
+    '__BASE_PATH__': JSON.stringify(basePath),
+  },
 })