Phase 4: embed UI into kamado-api binary

The production image is now a single Go binary that serves both the JSON/WebSocket API under /api and the Svelte dashboard at /. - New internal/webui package embeds a dist/ subdir via //go:embed. A placeholder index.html is committed so `go build` works on a fresh checkout; anything else in dist/ is regenerated per build and gitignored. - httpapi.Server.Handler mounts the embed.FS at / with SPA-style fallback: unknown non-/api paths serve index.html so client-side routes survive a reload. /api/* is carved out explicitly so POSTs or typos never accidentally shadow API semantics with HTML. - api/Dockerfile grows a node:22 builder stage that runs `npm ci && npm run build`, and the Go stage copies ui/dist/ into internal/webui/dist/ before `go build`. Build context moves to the repo root (docker-compose + `make api` both updated) so the Dockerfile can see both api/ and ui/. With this in place, `make up` brings the whole stack online at http://localhost:8080 — API under /api, dashboard at /. The Vite dev server on :5173 with the /api proxy is still available via `make ui-dev` for hot-reload development.
2026-04-13 03:15:36 +03:00
parent d37a23bc57
commit 82941939e5
9 changed files with 196 additions and 13 deletions
@@ -0,0 +1,7 @@
+# Build artifacts from `make ui` / the Dockerfile's node stage land
+# here during `go build`. Only the placeholder index.html (tracked)
+# and this .gitignore are kept in source control; everything else is
+# regenerated per build.
+*
+!.gitignore
+!index.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Kamado Pool — UI not built</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        background: #0b0e14;
+        color: #e6e9ef;
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+      }
+      .card {
+        background: #151a24;
+        border: 1px solid #232a3a;
+        border-radius: 10px;
+        padding: 2rem 2.5rem;
+        max-width: 32rem;
+      }
+      h1 {
+        margin: 0 0 0.5rem;
+        font-size: 1.25rem;
+      }
+      code {
+        background: #11151d;
+        padding: 0.15em 0.4em;
+        border-radius: 4px;
+        font-family: ui-monospace, Menlo, monospace;
+      }
+      a {
+        color: #ff7a3a;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <h1>🔥 Kamado Pool — UI not built</h1>
+      <p>
+        This is the placeholder shipped inside <code>kamado-api</code> when
+        the Svelte dashboard hasn't been built yet. Run
+        <code>make ui &amp;&amp; make api</code> (or build the Docker image,
+        which does it automatically) to embed the real dashboard.
+      </p>
+      <p>
+        The JSON API is still fully available at
+        <a href="/api/snapshot">/api/snapshot</a>,
+        <a href="/api/health">/api/health</a>, etc.
+      </p>
+    </div>
+  </body>
+</html>