separation of ui and static

.woodpecker/build.yml

@@ -7,6 +7,7 @@ matrix:
     - api
     - abstraction
     - rules
+    - static
 
 steps:
   build-${APP}:

.woodpecker/deploy.yml

@@ -11,6 +11,7 @@ matrix:
     - api
     - abstraction
     - rules
+    - static
 
 steps:
   deploy-${APP}:

apps/static/Dockerfile

@@ -0,0 +1,15 @@
+# Static assets Dockerfile (minimal webserver for /static only)
+
+FROM nginx:1.27-alpine
+
+WORKDIR /usr/share/nginx/html
+
+# Remove default nginx content
+RUN rm -rf ./*
+
+# Copy only static assets from the UI project
+COPY apps/ui/static/ ./
+
+EXPOSE 80
+
+# Use default nginx config; caller can mount custom config if needed

apps/ui/Dockerfile

@@ -1,49 +1,41 @@
-# UI Service Dockerfile
+# UI Service Dockerfile (Application only, without static files)
-# FastAPI + Jinja2 + HTMX Dashboard
 
 FROM python:3.14-alpine
 
-# Prevent Python from writing .pyc files and enable unbuffered output
 ENV PYTHONDONTWRITEBYTECODE=1 \
     PYTHONUNBUFFERED=1 \
     UI_PORT=8002 \
     API_BASE=http://api:8001 \
-    BASE_PATH=""
+    BASE_PATH="" \
+    STATIC_BASE=http://static:8080
 
-# Create non-root user
 RUN addgroup -g 10001 -S app && \
     adduser -u 10001 -S app -G app
 
-# Set working directory
 WORKDIR /app
 
-# Install system dependencies
 RUN apk add --no-cache \
     curl \
     gcc \
     musl-dev \
     linux-headers
 
-# Install Python dependencies
 COPY apps/ui/requirements.txt /app/requirements.txt
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Copy application code
+# Copy only Python code and templates, but exclude static assets
 COPY apps/__init__.py /app/apps/__init__.py
-COPY apps/ui/ /app/apps/ui/
+COPY apps/ui/__init__.py /app/apps/ui/__init__.py
+COPY apps/ui/main.py /app/apps/ui/main.py
+COPY apps/ui/api_client.py /app/apps/ui/api_client.py
+COPY apps/ui/templates/ /app/apps/ui/templates/
 
-# Change ownership to app user
 RUN chown -R app:app /app
-
-# Switch to non-root user
 USER app
 
-# Health check
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
     CMD curl -f http://localhost:${UI_PORT}/health || exit 1
 
-# Expose port
 EXPOSE 8002
 
-# Run application
 CMD ["python", "-m", "uvicorn", "apps.ui.main:app", "--host", "0.0.0.0", "--port", "8002"]

apps/ui/main.py

@@ -16,9 +16,11 @@ logger = logging.getLogger(__name__)
 # Read configuration from environment variables
 API_BASE = os.getenv("API_BASE", "http://localhost:8001")
 BASE_PATH = os.getenv("BASE_PATH", "")  # e.g., "/ui" for reverse proxy
+STATIC_BASE = os.getenv("STATIC_BASE", "/static")
 
 print(f"UI using API_BASE: {API_BASE}")
 print(f"UI using BASE_PATH: {BASE_PATH}")
+print(f"UI using STATIC_BASE: {STATIC_BASE}")
 
 def api_url(path: str) -> str:
     """Helper function to construct API URLs.
@@ -43,6 +45,9 @@ app = FastAPI(
 templates_dir = Path(__file__).parent / "templates"
 templates = Jinja2Templates(directory=str(templates_dir))
 
+# Make STATIC_BASE available in all templates
+templates.env.globals["STATIC_BASE"] = STATIC_BASE
+
 # Setup static files
 static_dir = Path(__file__).parent / "static"
 static_dir.mkdir(exist_ok=True)
@@ -98,7 +103,8 @@ async def health() -> JSONResponse:
         "status": "ok",
         "service": "ui",
         "api_base": API_BASE,
-        "base_path": BASE_PATH
+        "base_path": BASE_PATH,
+        "static_base": STATIC_BASE,
     })
 
 
@@ -127,7 +133,7 @@ async def rooms(request: Request) -> HTMLResponse:
     """
     return templates.TemplateResponse("rooms.html", {
         "request": request,
-        "api_base": API_BASE
+        "api_base": API_BASE,
     })
 
 
@@ -145,7 +151,7 @@ async def room_detail(request: Request, room_name: str) -> HTMLResponse:
     return templates.TemplateResponse("room.html", {
         "request": request,
         "api_base": API_BASE,
-        "room_name": room_name
+        "room_name": room_name,
     })
 
 

apps/ui/templates/dashboard.html

@@ -6,17 +6,17 @@
     <title>Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+    <link rel="icon" type="image/svg+xml" href="{{ STATIC_BASE }}/favicon.svg">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Dashboard">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;

apps/ui/templates/device.html

@@ -6,16 +6,16 @@
     <title>Gerät - Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/apple-touch-icon.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Gerät">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;
@@ -346,8 +346,8 @@
     </script>
     
     <!-- Load API client AFTER API_BASE is set -->
-    <script src="/static/types.js"></script>
+    <script src="{{ STATIC_BASE }}/types.js"></script>
-    <script src="/static/api-client.js"></script>
+    <script src="{{ STATIC_BASE }}/api-client.js"></script>
     
     <script>
         // Get device ID from URL

apps/ui/templates/garage.html

@@ -6,17 +6,17 @@
     <title>Garage - Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/garage-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/garage-icon-180x180.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/garage-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/garage-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/garage-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/garage-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/static/garage-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ STATIC_BASE }}/garage-icon-76x76.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/garage-icon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/garage-icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/garage-icon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/garage-icon-16x16.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Garage">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;
@@ -306,8 +306,8 @@
     </script>
     
     <!-- Load API client AFTER API_BASE is set -->
-    <script src="/static/types.js"></script>
+    <script src="{{ STATIC_BASE }}/types.js"></script>
-    <script src="/static/api-client.js"></script>
+    <script src="{{ STATIC_BASE }}/api-client.js"></script>
     
     <script>
         // Device IDs for garage devices

apps/ui/templates/index.html

@@ -6,17 +6,17 @@
     <title>Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/apple-touch-icon-180x180.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/apple-touch-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/apple-touch-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/static/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ STATIC_BASE }}/apple-touch-icon-76x76.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/apple-touch-icon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/apple-touch-icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/apple-touch-icon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/apple-touch-icon-16x16.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Home Automation">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;

apps/ui/templates/room.html

@@ -6,16 +6,16 @@
     <title>{{ room_name }} - Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/apple-touch-icon.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="{{ room_name }}">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;
@@ -229,8 +229,8 @@
     </script>
     
     <!-- Load API client AFTER API_BASE is set -->
-    <script src="/static/types.js"></script>
+    <script src="{{ STATIC_BASE }}/types.js"></script>
-    <script src="/static/api-client.js"></script>
+    <script src="{{ STATIC_BASE }}/api-client.js"></script>
     
     <script>
         // Get room name from URL

apps/ui/templates/rooms.html

@@ -6,17 +6,17 @@
     <title>Räume - Home Automation</title>
     
     <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_BASE }}/apple-touch-icon-180x180.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_BASE }}/apple-touch-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_BASE }}/apple-touch-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/static/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ STATIC_BASE }}/apple-touch-icon-76x76.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/apple-touch-icon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_BASE }}/apple-touch-icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/apple-touch-icon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_BASE }}/apple-touch-icon-16x16.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Räume">
     <meta name="theme-color" content="#667eea">
-    <link rel="manifest" href="/manifest.json">
+    <link rel="manifest" href="{{ STATIC_BASE }}/manifest.json">
     <style>
         * {
             margin: 0;
@@ -163,8 +163,8 @@
     </script>
     
     <!-- Load API client AFTER API_BASE is set -->
-    <script src="/static/types.js"></script>
+    <script src="{{ STATIC_BASE }}/types.js"></script>
-    <script src="/static/api-client.js"></script>
+    <script src="{{ STATIC_BASE }}/api-client.js"></script>
     
     <script>
         // Room icon mapping

deployment/configmap.yaml

@@ -14,6 +14,7 @@ data:
   # UI specific environment variables
   UI_UI_PORT: "8002"
   UI_API_BASE: "https://homea2-api.hottis.de"
+  UI_STATIC_BASE: "http://homea2-static.hottis.de"
   UI_BASE_PATH: "/"
   
 

deployment/ingress.yaml

@@ -11,6 +11,7 @@ spec:
   dnsNames:
     - homea2.hottis.de
     - homea2-api.hottis.de
+    - homea2-static.hottis.de
 ---
 apiVersion: traefik.containo.us/v1alpha1
 kind: TLSOption
@@ -60,6 +61,22 @@ spec:
         - name: api
           port: 80
 ---
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: static
+spec:
+  entryPoints:
+    - websecure
+  tls:
+    secretName: homea2-cert
+  routes:
+    - match: Host(`homea2-static.hottis.de`)
+      kind: Rule
+      services:
+        - name: static
+          port: 80
+---
 apiVersion: networking.k8s.io/v1
 kind: Ingress
 metadata:

deployment/static-deployment.yaml

@@ -0,0 +1,61 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: static
+  namespace: homea2
+  labels:
+    app: static
+    component: home-automation
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: static
+  template:
+    metadata:
+      labels:
+        app: static
+        component: home-automation
+    spec:
+      containers:
+      - name: static
+        image: %IMAGE%
+        ports:
+        - containerPort: 80
+          name: http
+        livenessProbe:
+          httpGet:
+            path: /
+            port: 80
+          initialDelaySeconds: 10
+          periodSeconds: 30
+        readinessProbe:
+          httpGet:
+            path: /
+            port: 80
+          initialDelaySeconds: 5
+          periodSeconds: 10
+        resources:
+          limits:
+            cpu: 200m
+            memory: 128Mi
+          requests:
+            cpu: 50m
+            memory: 64Mi
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: static
+  namespace: homea2
+  labels:
+    app: static
+    component: home-automation
+spec:
+  selector:
+    app: static
+  ports:
+  - port: 80
+    targetPort: 80
+    name: http
+  type: ClusterIP