@tdk-landscape/tdk-cli-core 1.3.75 → 1.3.77

package/examples/tdk-example/services/shop/orders-app/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "orders-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite --host 0.0.0.0"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^5.0.4",
+    "vite": "^7.1.7",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "typescript": "^5.9.2"
+  }
+}

package/examples/tdk-example/services/shop/orders-app/service.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://tdk-landscape.github.io/schema.service.json",
+  "schemaVersion": 1,
+  "appName": "orders-app",
+  "appType": "frontend",
+  "stack": "shop",
+  "port": 3000,
+  "dependsOn": ["orders-api"]
+}

package/examples/tdk-example/services/shop/orders-app/src/main.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./orders.js";
+
+createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/examples/tdk-example/services/shop/orders-app/src/orders.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+import "./style.css";
+
+type Order = { id: number; item: string; workerSeenAt: string | null };
+const api = `${window.location.protocol}//api.${window.location.hostname.replace(/^app\./, "")}/api/orders`;
+
+export function App() {
+  const [item, setItem] = useState("coffee");
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [message, setMessage] = useState("Loading orders…");
+
+  async function refresh() {
+    try {
+      const response = await fetch(api);
+      const data = (await response.json()) as { orders: Order[] };
+      setOrders(data.orders);
+      setMessage("API and database are connected");
+    } catch {
+      setMessage("Waiting for the orders API");
+    }
+  }
+
+  useEffect(() => {
+    void refresh();
+    const timer = window.setInterval(() => void refresh(), 1500);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  async function createOrder(event: React.FormEvent) {
+    event.preventDefault();
+    const response = await fetch(api, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ item }),
+    });
+    if (!response.ok) {
+      setMessage(`Could not create order (${response.status})`);
+      return;
+    }
+    setMessage("Order saved; waiting for NATS worker observation…");
+    await refresh();
+  }
+
+  return (
+    <main>
+      <p className="eyebrow">TDK · Hono · PostgreSQL · NATS · Vite · Traefik</p>
+      <h1>Order desk</h1>
+      <p className="status">{message}</p>
+      <form onSubmit={createOrder}>
+        <label htmlFor="item">What should the worker process?</label>
+        <div className="row">
+          <input id="item" value={item} onChange={(event) => setItem(event.target.value)} />
+          <button type="submit">Create order</button>
+        </div>
+      </form>
+      <h2>Persisted orders</h2>
+      <ul>
+        {orders.map((order) => (
+          <li key={order.id}>
+            <span>#{order.id} · {order.item}</span>
+            <strong>{order.workerSeenAt ? "Worker observed" : "Queued"}</strong>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}

package/examples/tdk-example/services/shop/orders-app/src/style.css

@@ -0,0 +1,15 @@
+:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #13231e; background: #edf2ee; }
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; }
+main { width: min(720px, calc(100% - 32px)); margin: 12vh auto; padding: 40px; background: white; border: 1px solid #d8e1dc; border-radius: 18px; box-shadow: 0 20px 60px #163c2512; }
+.eyebrow { color: #537363; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
+h1 { margin: 12px 0; font-size: clamp(38px, 8vw, 64px); letter-spacing: -.06em; }
+.status { color: #587064; }
+label { display: block; margin: 28px 0 8px; font-weight: 650; }
+.row { display: flex; gap: 10px; }
+input { min-width: 0; flex: 1; padding: 12px 14px; border: 1px solid #cad7cf; border-radius: 8px; font: inherit; }
+button { padding: 12px 18px; border: 0; border-radius: 8px; color: white; background: #176447; font: inherit; font-weight: 700; cursor: pointer; }
+h2 { margin-top: 34px; font-size: 18px; }
+ul { display: grid; gap: 8px; padding: 0; list-style: none; }
+li { display: flex; justify-content: space-between; gap: 12px; padding: 12px; background: #f4f7f4; border-radius: 8px; }
+li strong { color: #176447; }

package/examples/tdk-example/services/shop/orders-worker/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "orders-worker",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "bun build src/index.ts --outdir dist --target bun --packages external",
+    "start": "bun run dist/index.js",
+    "dev": "bun --watch src/index.ts"
+  },
+  "dependencies": {
+    "nats": "^2.29.3",
+    "pg": "^8.16.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/pg": "^8.15.5"
+  }
+}

package/examples/tdk-example/services/shop/orders-worker/service.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://tdk-landscape.github.io/schema.service.json",
+  "schemaVersion": 1,
+  "appName": "orders-worker",
+  "appType": "worker",
+  "stack": "shop",
+  "port": 4001,
+  "featuresEnabled": ["nats"],
+  "params": {
+    "NATS_URL": "nats://tdk_example_nats:4222"
+  },
+  "dependsOn": ["orders-api"]
+}

package/examples/tdk-example/services/shop/orders-worker/src/index.ts

@@ -0,0 +1,33 @@
+import { connect, type NatsConnection } from "nats";
+import { Pool } from "pg";
+
+const databaseUrl = process.env.DATABASE_URL;
+const natsUrl = process.env.NATS_URL ?? "nats://tdk_example_nats:4222";
+if (!databaseUrl) throw new Error("DATABASE_URL is required");
+
+const pgUrl = new URL(databaseUrl);
+pgUrl.searchParams.delete("schema");
+const db = new Pool({ connectionString: pgUrl.toString() });
+let nc: NatsConnection | undefined;
+while (!nc) {
+  try {
+    nc = await connect({ servers: natsUrl });
+  } catch (error) {
+    console.error("waiting for NATS", error);
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+  }
+}
+const subscription = nc.subscribe("demo.orders.created", { queue: "orders-workers" });
+await nc.flush();
+nc.publish("demo.orders.worker-ready", new Uint8Array());
+console.log("orders-worker subscribed to demo.orders.created");
+
+for await (const message of subscription) {
+  const id = new TextDecoder().decode(message.data);
+  const result = await db.query(
+    "UPDATE demo_orders SET worker_seen_at = now() WHERE id = $1 RETURNING id, item",
+    [id],
+  );
+  if (result.rows[0]) console.log(`worker observed order ${id}: ${result.rows[0].item}`);
+  else console.error(`worker received unknown order ${id}`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tdk-landscape/tdk-cli-core",
-  "version": "1.3.75",
+  "version": "1.3.77",
   "description": "Run your whole microservice landscape locally without Kubernetes. Scaffold services and run them with hot reload, built on Tilt.",
   "homepage": "https://tdk-landscape.github.io/tdk-website",
   "repository": {
@@ -26,6 +26,7 @@
     "specs",
     "ext",
     "shared-platform-engineering/docker-templates",
+    "examples/tdk-example",
     "cli/bin",
     "cli/dist/**/*.js",
     "cli/templates",