feat: configurable UI base path via BASE_PATH build arg (#58)

Serves the UI under /ui instead of /. This pairs with the argocd route simplification (argocd-apps#201) where /ui → UI service and everything else → API.

- Vite: `base` set from `BASE_PATH` env var at build time
- React Router: `basename` set from injected `__BASE_PATH__`
- Nginx: location block uses `${BASE_PATH}`, substituted by sed at build
- Dockerfile: `ARG BASE_PATH=/` (default preserves existing behavior)
- Woodpecker: passes `BASE_PATH=/ui` to docker-web build

Tested: assets serve at `/ui/assets/...`, SPA routing works at `/ui/remotes`, etc.
Reviewed-on: #58
Co-authored-by: Ben Vincent <ben@unkin.net>
Co-committed-by: Ben Vincent <ben@unkin.net>

.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/ {
+    location ${BASE_PATH} {
-        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 / {
         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),
+  },
 })