Erstes lauffähiges Grundgerüst: Monorepo, Fastify-API, React-Startseite, Docker

apps/backend/Dockerfile

@@ -0,0 +1,43 @@
+# syntax=docker/dockerfile:1
+
+FROM node:20-alpine AS base
+RUN corepack enable
+WORKDIR /app
+
+# ---- deps: gesamten Workspace-Kontext installieren -------------------------
+FROM base AS deps
+COPY pnpm-workspace.yaml package.json pnpm-lock.yaml* ./
+COPY packages/shared/package.json packages/shared/package.json
+COPY packages/ui/package.json packages/ui/package.json
+COPY apps/backend/package.json apps/backend/package.json
+COPY apps/frontend/package.json apps/frontend/package.json
+# better-sqlite3 braucht Build-Tools für den nativen Modulbau
+RUN apk add --no-cache python3 make g++
+RUN pnpm install --frozen-lockfile || pnpm install
+
+# ---- build: Backend + Shared bauen ------------------------------------------
+FROM deps AS build
+COPY packages/shared packages/shared
+COPY apps/backend apps/backend
+RUN pnpm --filter @launchpad/shared build
+RUN pnpm --filter @launchpad/backend build
+# nur Production-Dependencies fürs Runtime-Image behalten
+RUN pnpm deploy --filter @launchpad/backend --prod /app/deploy
+
+# ---- runtime: schlankes Laufzeit-Image --------------------------------------
+FROM node:20-alpine AS runtime
+WORKDIR /app
+ENV NODE_ENV=production
+ENV DATABASE_PATH=/data/launchpad.db
+ENV PORT=3001
+ENV HOST=0.0.0.0
+
+COPY --from=build /app/deploy/ ./
+COPY --from=build /app/apps/backend/dist ./dist
+COPY --from=build /app/packages/shared/dist ./node_modules/@launchpad/shared/dist
+
+RUN mkdir -p /data
+VOLUME ["/data"]
+EXPOSE 3001
+
+CMD ["node", "dist/index.js"]

apps/backend/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  schema: "./src/db/schema.ts",
+  out: "./drizzle",
+  dialect: "sqlite",
+  dbCredentials: {
+    url: process.env.DATABASE_PATH ?? "./data/launchpad.db",
+  },
+});

apps/backend/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@launchpad/backend",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "tsc -p tsconfig.json",
+    "start": "node dist/index.js",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "db:generate": "drizzle-kit generate",
+    "db:push": "drizzle-kit push"
+  },
+  "dependencies": {
+    "@launchpad/shared": "workspace:*",
+    "@fastify/cors": "^9.0.1",
+    "better-sqlite3": "^11.3.0",
+    "drizzle-orm": "^0.33.0",
+    "fastify": "^4.28.1"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.11",
+    "@types/node": "^20.14.15",
+    "drizzle-kit": "^0.24.2",
+    "pino-pretty": "^11.2.2",
+    "tsx": "^4.19.1",
+    "typescript": "^5.5.4"
+  }
+}

apps/backend/src/db/client.ts

@@ -0,0 +1,70 @@
+import { existsSync, mkdirSync } from "node:fs";
+import { dirname } from "node:path";
+import Database from "better-sqlite3";
+import { drizzle } from "drizzle-orm/better-sqlite3";
+import * as schema from "./schema.js";
+
+const databasePath = process.env.DATABASE_PATH ?? "./data/launchpad.db";
+
+// Stellt sicher, dass das Verzeichnis für die SQLite-Datei existiert
+// (relevant im Docker-Volume /data).
+const dir = dirname(databasePath);
+if (dir !== "." && !existsSync(dir)) {
+  mkdirSync(dir, { recursive: true });
+}
+
+const sqlite = new Database(databasePath);
+sqlite.pragma("journal_mode = WAL");
+sqlite.pragma("foreign_keys = ON");
+
+export const db = drizzle(sqlite, { schema });
+
+/**
+ * Legt die Tabellen an, falls sie noch nicht existieren.
+ * Für den ersten Commit reicht ein einfaches "CREATE TABLE IF NOT EXISTS",
+ * spätere Commits ersetzen dies durch echte Drizzle-Migrationen (drizzle-kit).
+ */
+export function ensureSchema(): void {
+  sqlite.exec(`
+    CREATE TABLE IF NOT EXISTS devices (
+      id TEXT PRIMARY KEY,
+      hostname TEXT NOT NULL,
+      ip TEXT NOT NULL,
+      mac TEXT,
+      manufacturer TEXT,
+      model TEXT,
+      online INTEGER NOT NULL DEFAULT 0,
+      source TEXT NOT NULL,
+      last_scan TEXT,
+      created_at TEXT NOT NULL,
+      updated_at TEXT NOT NULL
+    );
+
+    CREATE TABLE IF NOT EXISTS services (
+      id TEXT PRIMARY KEY,
+      device_id TEXT NOT NULL REFERENCES devices(id) ON DELETE CASCADE,
+      display_name TEXT NOT NULL,
+      category TEXT,
+      favorite INTEGER NOT NULL DEFAULT 0,
+      "order" REAL NOT NULL DEFAULT 0,
+      alias TEXT NOT NULL DEFAULT '[]',
+      icon TEXT,
+      hostname TEXT NOT NULL,
+      url TEXT NOT NULL,
+      https INTEGER NOT NULL DEFAULT 0,
+      port INTEGER NOT NULL,
+      favicon TEXT,
+      description TEXT,
+      created_at TEXT NOT NULL,
+      updated_at TEXT NOT NULL
+    );
+
+    CREATE TABLE IF NOT EXISTS categories (
+      id TEXT PRIMARY KEY,
+      name TEXT NOT NULL,
+      "order" REAL NOT NULL DEFAULT 0,
+      created_at TEXT NOT NULL,
+      updated_at TEXT NOT NULL
+    );
+  `);
+}

apps/backend/src/db/schema.ts

@@ -0,0 +1,60 @@
+import { sqliteTable, text, integer, real } from "drizzle-orm/sqlite-core";
+
+/**
+ * Ein physisches/logisches Gerät im Netzwerk (z. B. per FritzBox-Scan gefunden).
+ */
+export const devices = sqliteTable("devices", {
+  id: text("id").primaryKey(),
+  hostname: text("hostname").notNull(),
+  ip: text("ip").notNull(),
+  mac: text("mac"),
+  manufacturer: text("manufacturer"),
+  model: text("model"),
+  online: integer("online", { mode: "boolean" }).notNull().default(false),
+  source: text("source").notNull(), // fritzbox | dns | http | https | portscan | manual
+  lastScan: text("last_scan"), // ISO-8601
+  createdAt: text("created_at").notNull(),
+  updatedAt: text("updated_at").notNull(),
+});
+
+/**
+ * Ein Dienst, der auf einem Gerät läuft (z. B. Frigate, Portainer, Gitea ...).
+ * Benutzeränderungen (displayName, category, favorite, order, alias, icon)
+ * dürfen von Scans NIEMALS überschrieben werden – siehe README/Spezifikation.
+ */
+export const services = sqliteTable("services", {
+  id: text("id").primaryKey(),
+  deviceId: text("device_id")
+    .notNull()
+    .references(() => devices.id, { onDelete: "cascade" }),
+
+  // vom Benutzer gepflegt, wird von Scans nicht überschrieben
+  displayName: text("display_name").notNull(),
+  category: text("category"),
+  favorite: integer("favorite", { mode: "boolean" }).notNull().default(false),
+  order: real("order").notNull().default(0),
+  alias: text("alias").notNull().default("[]"), // JSON-Array als String
+  icon: text("icon"),
+
+  // von Scans aktualisierbar
+  hostname: text("hostname").notNull(),
+  url: text("url").notNull(),
+  https: integer("https", { mode: "boolean" }).notNull().default(false),
+  port: integer("port").notNull(),
+  favicon: text("favicon"),
+  description: text("description"),
+
+  createdAt: text("created_at").notNull(),
+  updatedAt: text("updated_at").notNull(),
+});
+
+/**
+ * Frei definierbare Kategorien (Erstellen/Löschen/Umbenennen/Sortieren per Drag & Drop).
+ */
+export const categories = sqliteTable("categories", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  order: real("order").notNull().default(0),
+  createdAt: text("created_at").notNull(),
+  updatedAt: text("updated_at").notNull(),
+});

apps/backend/src/index.ts

@@ -0,0 +1,41 @@
+import Fastify from "fastify";
+import cors from "@fastify/cors";
+import { ensureSchema } from "./db/client.js";
+import { healthRoutes } from "./routes/health.js";
+
+const PORT = Number(process.env.PORT ?? 3001);
+const HOST = process.env.HOST ?? "0.0.0.0";
+
+async function main() {
+  const app = Fastify({
+    logger: {
+      level: process.env.LOG_LEVEL ?? "info",
+      transport:
+        process.env.NODE_ENV !== "production"
+          ? { target: "pino-pretty", options: { colorize: true } }
+          : undefined,
+    },
+  });
+
+  await app.register(cors, {
+    origin: process.env.CORS_ORIGIN ?? true,
+  });
+
+  ensureSchema();
+
+  await app.register(healthRoutes);
+
+  app.get("/", async () => {
+    return { name: "LaunchPad API", status: "running" };
+  });
+
+  try {
+    await app.listen({ port: PORT, host: HOST });
+    app.log.info(`LaunchPad backend läuft auf http://${HOST}:${PORT}`);
+  } catch (err) {
+    app.log.error(err);
+    process.exit(1);
+  }
+}
+
+main();

apps/backend/src/routes/health.ts

@@ -0,0 +1,15 @@
+import type { FastifyInstance } from "fastify";
+import type { HealthStatus } from "@launchpad/shared";
+
+const startedAt = Date.now();
+
+export async function healthRoutes(app: FastifyInstance): Promise<void> {
+  app.get("/api/health", async (): Promise<HealthStatus> => {
+    return {
+      status: "ok",
+      timestamp: new Date().toISOString(),
+      uptimeSeconds: Math.round((Date.now() - startedAt) / 1000),
+      version: "0.1.0",
+    };
+  });
+}

apps/backend/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "types": ["node"]
+  },
+  "include": ["src"]
+}

apps/frontend/Dockerfile

@@ -0,0 +1,30 @@
+# syntax=docker/dockerfile:1
+
+FROM node:20-alpine AS base
+RUN corepack enable
+WORKDIR /app
+
+# ---- deps --------------------------------------------------------------
+FROM base AS deps
+COPY pnpm-workspace.yaml package.json pnpm-lock.yaml* ./
+COPY packages/shared/package.json packages/shared/package.json
+COPY packages/ui/package.json packages/ui/package.json
+COPY apps/backend/package.json apps/backend/package.json
+COPY apps/frontend/package.json apps/frontend/package.json
+RUN pnpm install --frozen-lockfile || pnpm install
+
+# ---- build ---------------------------------------------------------------
+FROM deps AS build
+COPY packages/shared packages/shared
+COPY packages/ui packages/ui
+COPY apps/frontend apps/frontend
+RUN pnpm --filter @launchpad/shared build
+RUN pnpm --filter @launchpad/ui build
+RUN pnpm --filter @launchpad/frontend build
+
+# ---- runtime: nginx --------------------------------------------------------
+FROM nginx:1.27-alpine AS runtime
+COPY apps/frontend/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/apps/frontend/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

apps/frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0a0a0a" />
+    <title>LaunchPad</title>
+  </head>
+  <body class="bg-white dark:bg-black">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/frontend/nginx.conf

@@ -0,0 +1,26 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # PWA / SPA: alle unbekannten Routen auf index.html zurückführen
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # API-Anfragen an den Backend-Container weiterleiten
+    location /api/ {
+        proxy_pass http://backend:3001/api/;
+        proxy_http_version 1.1;
+        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;
+    }
+
+    location ~* \.(?:css|js|svg|png|jpg|jpeg|gif|ico|woff2?)$ {
+        expires 7d;
+        add_header Cache-Control "public, max-age=604800, immutable";
+    }
+}

apps/frontend/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@launchpad/frontend",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.json --noEmit && vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 5173",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@launchpad/shared": "workspace:*",
+    "@launchpad/ui": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.1"
+  }
+}

apps/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/frontend/src/App.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from "react";
+import { SearchInput, StatusBadge } from "@launchpad/ui";
+import type { HealthStatus } from "@launchpad/shared";
+
+type Theme = "light" | "dark";
+
+function useTheme(): [Theme, () => void] {
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (typeof window === "undefined") return "dark";
+    const stored = window.localStorage.getItem("launchpad-theme");
+    if (stored === "light" || stored === "dark") return stored;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    window.localStorage.setItem("launchpad-theme", theme);
+  }, [theme]);
+
+  const toggle = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
+  return [theme, toggle];
+}
+
+function useBackendHealth() {
+  const [health, setHealth] = useState<HealthStatus | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function check() {
+      try {
+        const res = await fetch("/api/health");
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const data: HealthStatus = await res.json();
+        if (!cancelled) {
+          setHealth(data);
+          setError(false);
+        }
+      } catch {
+        if (!cancelled) setError(true);
+      }
+    }
+
+    check();
+    const interval = setInterval(check, 10_000);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, []);
+
+  return { health, error };
+}
+
+export default function App() {
+  const [theme, toggleTheme] = useTheme();
+  const [query, setQuery] = useState("");
+  const { health, error } = useBackendHealth();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      const isSlash = e.key === "/" && document.activeElement !== inputRef.current;
+      const isCmdK = (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k";
+      if (isSlash || isCmdK) {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+      if (e.key === "Escape") {
+        inputRef.current?.blur();
+        setQuery("");
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  const isOnline = !error && health?.status === "ok";
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-8 bg-gradient-to-b from-white to-neutral-100 px-6 dark:from-black dark:to-neutral-950">
+      <button
+        onClick={toggleTheme}
+        aria-label="Theme wechseln"
+        className="fixed right-6 top-6 rounded-full border border-black/10 p-2 text-black/60
+          transition-colors hover:bg-black/5 dark:border-white/10 dark:text-white/60 dark:hover:bg-white/5"
+      >
+        {theme === "dark" ? "☀️" : "🌙"}
+      </button>
+
+      <div className="flex flex-col items-center gap-2 text-center">
+        <h1 className="text-4xl font-semibold tracking-tight text-black dark:text-white">
+          LaunchPad
+        </h1>
+        <p className="text-black/50 dark:text-white/50">
+          Tippe, um deine Homelab-Dienste sofort zu öffnen.
+        </p>
+      </div>
+
+      <div className="w-full max-w-xl">
+        <SearchInput
+          ref={inputRef}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Dienst suchen … z. B. „frigate“"
+          hint="⌘K"
+          autoFocus
+        />
+      </div>
+
+      <div className="flex flex-col items-center gap-1">
+        <StatusBadge online={isOnline} label={isOnline ? "Backend verbunden" : "Backend nicht erreichbar"} />
+        {health ? (
+          <span className="text-xs text-black/30 dark:text-white/30">
+            v{health.version} · läuft seit {health.uptimeSeconds}s
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}

apps/frontend/src/index.css

@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}

apps/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.js";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

apps/frontend/tailwind.config.ts

@@ -0,0 +1,24 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: "class",
+  content: [
+    "./index.html",
+    "./src/**/*.{ts,tsx}",
+    "../../packages/ui/src/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          "Inter",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "sans-serif",
+        ],
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

apps/frontend/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "noEmit": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

apps/frontend/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: true,
+    port: 5173,
+    proxy: {
+      "/api": {
+        target: process.env.BACKEND_URL ?? "http://localhost:3001",
+        changeOrigin: true,
+      },
+    },
+  },
+});