create-lacspace-app 2.11.0 → 2.13.0

package/README.md

@@ -20,6 +20,10 @@ npx create-lacspace-app my-app --template saas --fullstack
 
 You choose the *kind* of site you're building. It writes a **real Next.js 15 + React 19 + Tailwind v4 app** — not a hello-world, but a genuinely **polished, modern site**: a fluid `clamp()` type scale, tight display headings, a refined light **and** dark palette, glass chrome, soft layered shadows, a smooth logo marquee, animated counters, scroll reveals and a shimmering primary CTA — every page filled in, an SEO stack wired end-to-end, and a **26-component UI kit** you can drop in anywhere.
 
+> **New in v2.12 — real-time & privacy (16 add-ons).** Two more keyless, no-vendor add-ons:
+> - **`realtime`** — live server→browser updates over **Server-Sent Events** (`@lacspace/sse`): a channel hub + a `/live` stream + a React `useSSE` feed. No WebSocket server. Full-stack.
+> - **`consent`** — **GDPR-friendly cookie consent** (`@lacspace/consent`): a drop-in `<ConsentBanner/>`, per-category choices, cookie persistence and `whenConsent()` script-gating. Frontend.
+>
 > **New in v2.11 — the Web Engagement Kit (14 add-ons).** Three keyless, no-vendor add-ons on brand-new `@lacspace` packages:
 > - **`push`** — real **browser push notifications** (`@lacspace/web-push`): keyless VAPID, no Firebase/FCM. Generates a service worker, a subscribe button, and a backend that stores subscriptions and sends. Full-stack.
 > - **`captcha`** — a **privacy-friendly proof-of-work CAPTCHA** (`@lacspace/captcha`): no Google/Cloudflare, no keys, no tracking. A drop-in widget + a backend verify route. Full-stack.

package/dist/index.js

@@ -2402,6 +2402,38 @@ var FEATURES = [
       "Push works on https (or localhost); the generated public/sw.js receives the notifications."
     ],
     learn: "https://developer.lacspace.com/packages/web-push"
+  },
+  {
+    key: "consent",
+    label: "Cookie consent",
+    description: "GDPR-friendly cookie consent (@lacspace/consent) \u2014 a drop-in <ConsentBanner/>, per-category choices, cookie persistence and whenConsent() script-gating. Frontend, any template.",
+    deps: { "@lacspace/consent": "^1.0.0" },
+    files: () => ({ "components/consent.tsx": consentComponent() }),
+    nextSteps: [
+      "Render <ConsentBanner/> once in app/layout.tsx: import { ConsentBanner } from '@/components/consent'.",
+      "Gate analytics/marketing scripts: whenConsent(consent, 'analytics', () => { /* load tag */ }).",
+      "The choice is stored in a cookie \u2014 gate server-side too with parseConsentCookie()."
+    ],
+    learn: "https://developer.lacspace.com/packages/consent"
+  },
+  {
+    key: "realtime",
+    label: "Real-time (SSE)",
+    description: "Live server-to-browser updates over Server-Sent Events (@lacspace/sse) \u2014 a channel hub + a /live stream + a React useSSE feed. No WebSocket server. Full-stack.",
+    requiresBackend: true,
+    deps: { "@lacspace/sse": "^1.0.0" },
+    files: () => ({ "app/live/page.tsx": realtimeLivePage() }),
+    backend: () => ({
+      deps: { "@lacspace/sse": "^1.0.0" },
+      files: { "src/routes/live.ts": realtimeRoutesBackend() },
+      routes: [{ path: "/live", handler: "liveRoutes", auth: false, importLine: 'import liveRoutes from "./live.js";' }]
+    }),
+    nextSteps: [
+      "Open http://localhost:3000/live in two tabs; click 'Broadcast' in one \u2014 the other updates instantly.",
+      "Push from anywhere on the server: hub.broadcast({ event: 'message', data }) in src/routes/live.ts.",
+      "SSE auto-reconnects and needs no WebSocket server \u2014 great for notifications and live feeds."
+    ],
+    learn: "https://developer.lacspace.com/packages/sse"
   }
 ];
 var aiChatRoute = (_ctx) => `import { resolveConfig } from "@lacspace/providers";
@@ -6920,6 +6952,69 @@ router.post("/send", asyncHandler(async (req, res) => {
   res.json({ sent: results.filter((r) => r.result && !r.result.expired).length, removed: expired.length });
 }));
 
+export default router;
+`;
+var consentComponent = () => `"use client";
+// how this works: re-export the consent UI + API from one component. Render
+// <ConsentBanner/> once in app/layout.tsx; gate scripts with whenConsent().
+export { ConsentBanner, useConsent } from "@lacspace/consent/react";
+export { consent, whenConsent } from "@lacspace/consent";
+`;
+var realtimeLivePage = () => `"use client";
+import { useState } from "react";
+import { useSSE } from "@lacspace/sse/react";
+
+const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+export default function LivePage() {
+  const [log, setLog] = useState<string[]>([]);
+  const { status } = useSSE(API + "/live", {
+    onEvent: { message: (m) => setLog((prev) => [String((m as { text?: string }).text ?? ""), ...prev].slice(0, 50)) },
+  });
+
+  async function broadcast() {
+    await fetch(API + "/live/broadcast", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text: "Hello at " + new Date().toLocaleTimeString() }),
+    });
+  }
+
+  return (
+    <main className="mx-auto max-w-lg px-6 py-16">
+      <h1 className="text-2xl font-bold">Live feed</h1>
+      <p className="mt-1 text-muted">Server-Sent Events \u2014 status: {status}.</p>
+      <button className="mt-4 rounded-xl border border-hairline px-4 py-2" onClick={broadcast}>Broadcast a message</button>
+      <ul className="mt-6 space-y-2">
+        {log.map((line, i) => (<li key={i} className="rounded-xl border border-hairline p-3">{line}</li>))}
+      </ul>
+    </main>
+  );
+}
+`;
+var realtimeRoutesBackend = () => `import express from "express";
+import { SSEHub, sseHandler } from "@lacspace/sse";
+import { asyncHandler } from "../http.js";
+
+// how this works: one shared hub holds every open SSE connection. GET /live opens
+// a stream; POST /live/broadcast pushes a "message" event to everyone connected.
+// Push from anywhere in your app by importing this hub and calling hub.broadcast().
+const router = express.Router();
+const hub = new SSEHub();
+hub.startHeartbeat();
+
+router.get("/", (_req, res) => {
+  const client = sseHandler(res, { onClose: () => hub.remove(client) });
+  hub.add(client);
+  client.send({ event: "message", data: { text: "Connected to the live feed." } });
+});
+
+router.post("/broadcast", asyncHandler(async (req, res) => {
+  const text = typeof req.body?.text === "string" ? req.body.text : "ping";
+  const sent = hub.broadcast({ event: "message", data: { text } });
+  res.json({ sent });
+}));
+
 export default router;
 `;
 var scope = (ctx) => `@${ctx.name}`;
@@ -7373,6 +7468,7 @@ var backendPkgJson = (ctx) => {
       "@lacspace/id": "^1.1.0",
       "@lacspace/rate-limit": "^1.2.0",
       "@lacspace/cache": "^1.1.0",
+      "@lacspace/logger": "^1.0.0",
       ...featureDeps,
       [`${scope(ctx)}/types`]: "*"
     },
@@ -7482,21 +7578,54 @@ var backendIndex = (ctx) => `import "./load-env.js"; // MUST be first: fills pro
 import { env } from "./env.js";
 import { connectDb } from "./db.js";
 import { createApp } from "./app.js";
+import { log } from "./logger.js";
 
 // how this works: connect to MongoDB, build the Express app, then listen.
 async function main(): Promise<void> {
   await connectDb(env.MONGODB_URI);
   const app = createApp();
   app.listen(env.PORT, () => {
-    console.log(\`\u{1F680} ${ctx.name} API ready on http://localhost:\${env.PORT}\`);
+    log.info("${ctx.name} API ready", { url: \`http://localhost:\${env.PORT}\` });
   });
 }
 
 main().catch((err) => {
-  console.error("Failed to start the API:", err);
+  log.fatal("Failed to start the API", { err });
   process.exit(1);
 });
 `;
+var backendLogger = () => `import { createLogger, jsonConsole, prettyConsole } from "@lacspace/logger";
+import type { Request, Response, NextFunction } from "express";
+import { env } from "./env.js";
+
+// how this works: one structured logger for the whole API (@lacspace/logger, zero-dep).
+// In production we emit JSON-per-line (clean for log aggregators); in dev we print a
+// readable, coloured line. Common secret fields are redacted before anything is logged.
+const isProd = env.NODE_ENV === "production";
+export const log = createLogger({
+  level: isProd ? "info" : "debug",
+  transports: [isProd ? jsonConsole() : prettyConsole({ colors: true })],
+  redact: ["password", "token", "authorization", "*.password", "*.token"],
+});
+
+// Request logger \u2014 one line per request with method, path, status and duration.
+// Each request gets a child logger with a short request id you can thread through.
+export function requestLogger(req: Request, res: Response, next: NextFunction): void {
+  const start = Date.now();
+  const reqId = Math.random().toString(36).slice(2, 10);
+  (req as Request & { log: typeof log }).log = log.child({ reqId });
+  res.on("finish", () => {
+    log.info("request", {
+      reqId,
+      method: req.method,
+      path: req.originalUrl,
+      status: res.statusCode,
+      ms: Date.now() - start,
+    });
+  });
+  next();
+}
+`;
 var backendDb = () => `import mongoose from "mongoose";
 
 // how this works: opens the Mongoose connection. Call once at boot.
@@ -7812,16 +7941,19 @@ export default router;
 var backendApp = (ctx) => `import express from "express";
 import cors from "cors";
 import { env } from "./env.js";
+import { requestLogger } from "./logger.js";
 import { errorHandler } from "./middleware/error.js";
 import { registerRoutes } from "./routes/index.js";
 
 // how this works: assembles the Express app \u2014 CORS for the frontend, JSON parsing,
-// a health check, all route groups (see routes/index.ts), then the error handler LAST.
+// structured request logging (@lacspace/logger), a health check, all route groups
+// (see routes/index.ts), then the error handler LAST.
 export function createApp(): express.Express {
   const app = express();
 
   app.use(cors({ origin: env.CORS_ORIGIN.split(",").map((o) => o.trim()), credentials: true }));
   app.use(express.json());
+  app.use(requestLogger); // one structured log line per request
 
   app.get("/health", (_req, res) => { res.json({ ok: true, service: "${ctx.name}-api" }); });
   registerRoutes(app);
@@ -7862,6 +7994,7 @@ function backendFiles(ctx) {
     "backend/src/env.ts": backendEnv(ctx),
     "backend/src/db.ts": backendDb(),
     "backend/src/cache.ts": backendCache(),
+    "backend/src/logger.ts": backendLogger(),
     "backend/src/app.ts": backendApp(ctx),
     "backend/src/http.ts": backendHttp(),
     "backend/src/express.d.ts": backendExpressTypes(),

package/dist/lib.cjs

@@ -2406,6 +2406,38 @@ var FEATURES = [
       "Push works on https (or localhost); the generated public/sw.js receives the notifications."
     ],
     learn: "https://developer.lacspace.com/packages/web-push"
+  },
+  {
+    key: "consent",
+    label: "Cookie consent",
+    description: "GDPR-friendly cookie consent (@lacspace/consent) \u2014 a drop-in <ConsentBanner/>, per-category choices, cookie persistence and whenConsent() script-gating. Frontend, any template.",
+    deps: { "@lacspace/consent": "^1.0.0" },
+    files: () => ({ "components/consent.tsx": consentComponent() }),
+    nextSteps: [
+      "Render <ConsentBanner/> once in app/layout.tsx: import { ConsentBanner } from '@/components/consent'.",
+      "Gate analytics/marketing scripts: whenConsent(consent, 'analytics', () => { /* load tag */ }).",
+      "The choice is stored in a cookie \u2014 gate server-side too with parseConsentCookie()."
+    ],
+    learn: "https://developer.lacspace.com/packages/consent"
+  },
+  {
+    key: "realtime",
+    label: "Real-time (SSE)",
+    description: "Live server-to-browser updates over Server-Sent Events (@lacspace/sse) \u2014 a channel hub + a /live stream + a React useSSE feed. No WebSocket server. Full-stack.",
+    requiresBackend: true,
+    deps: { "@lacspace/sse": "^1.0.0" },
+    files: () => ({ "app/live/page.tsx": realtimeLivePage() }),
+    backend: () => ({
+      deps: { "@lacspace/sse": "^1.0.0" },
+      files: { "src/routes/live.ts": realtimeRoutesBackend() },
+      routes: [{ path: "/live", handler: "liveRoutes", auth: false, importLine: 'import liveRoutes from "./live.js";' }]
+    }),
+    nextSteps: [
+      "Open http://localhost:3000/live in two tabs; click 'Broadcast' in one \u2014 the other updates instantly.",
+      "Push from anywhere on the server: hub.broadcast({ event: 'message', data }) in src/routes/live.ts.",
+      "SSE auto-reconnects and needs no WebSocket server \u2014 great for notifications and live feeds."
+    ],
+    learn: "https://developer.lacspace.com/packages/sse"
   }
 ];
 var aiChatRoute = (_ctx) => `import { resolveConfig } from "@lacspace/providers";
@@ -6924,6 +6956,69 @@ router.post("/send", asyncHandler(async (req, res) => {
   res.json({ sent: results.filter((r) => r.result && !r.result.expired).length, removed: expired.length });
 }));
 
+export default router;
+`;
+var consentComponent = () => `"use client";
+// how this works: re-export the consent UI + API from one component. Render
+// <ConsentBanner/> once in app/layout.tsx; gate scripts with whenConsent().
+export { ConsentBanner, useConsent } from "@lacspace/consent/react";
+export { consent, whenConsent } from "@lacspace/consent";
+`;
+var realtimeLivePage = () => `"use client";
+import { useState } from "react";
+import { useSSE } from "@lacspace/sse/react";
+
+const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+export default function LivePage() {
+  const [log, setLog] = useState<string[]>([]);
+  const { status } = useSSE(API + "/live", {
+    onEvent: { message: (m) => setLog((prev) => [String((m as { text?: string }).text ?? ""), ...prev].slice(0, 50)) },
+  });
+
+  async function broadcast() {
+    await fetch(API + "/live/broadcast", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text: "Hello at " + new Date().toLocaleTimeString() }),
+    });
+  }
+
+  return (
+    <main className="mx-auto max-w-lg px-6 py-16">
+      <h1 className="text-2xl font-bold">Live feed</h1>
+      <p className="mt-1 text-muted">Server-Sent Events \u2014 status: {status}.</p>
+      <button className="mt-4 rounded-xl border border-hairline px-4 py-2" onClick={broadcast}>Broadcast a message</button>
+      <ul className="mt-6 space-y-2">
+        {log.map((line, i) => (<li key={i} className="rounded-xl border border-hairline p-3">{line}</li>))}
+      </ul>
+    </main>
+  );
+}
+`;
+var realtimeRoutesBackend = () => `import express from "express";
+import { SSEHub, sseHandler } from "@lacspace/sse";
+import { asyncHandler } from "../http.js";
+
+// how this works: one shared hub holds every open SSE connection. GET /live opens
+// a stream; POST /live/broadcast pushes a "message" event to everyone connected.
+// Push from anywhere in your app by importing this hub and calling hub.broadcast().
+const router = express.Router();
+const hub = new SSEHub();
+hub.startHeartbeat();
+
+router.get("/", (_req, res) => {
+  const client = sseHandler(res, { onClose: () => hub.remove(client) });
+  hub.add(client);
+  client.send({ event: "message", data: { text: "Connected to the live feed." } });
+});
+
+router.post("/broadcast", asyncHandler(async (req, res) => {
+  const text = typeof req.body?.text === "string" ? req.body.text : "ping";
+  const sent = hub.broadcast({ event: "message", data: { text } });
+  res.json({ sent });
+}));
+
 export default router;
 `;
 var scope = (ctx) => `@${ctx.name}`;
@@ -7377,6 +7472,7 @@ var backendPkgJson = (ctx) => {
       "@lacspace/id": "^1.1.0",
       "@lacspace/rate-limit": "^1.2.0",
       "@lacspace/cache": "^1.1.0",
+      "@lacspace/logger": "^1.0.0",
       ...featureDeps,
       [`${scope(ctx)}/types`]: "*"
     },
@@ -7486,21 +7582,54 @@ var backendIndex = (ctx) => `import "./load-env.js"; // MUST be first: fills pro
 import { env } from "./env.js";
 import { connectDb } from "./db.js";
 import { createApp } from "./app.js";
+import { log } from "./logger.js";
 
 // how this works: connect to MongoDB, build the Express app, then listen.
 async function main(): Promise<void> {
   await connectDb(env.MONGODB_URI);
   const app = createApp();
   app.listen(env.PORT, () => {
-    console.log(\`\u{1F680} ${ctx.name} API ready on http://localhost:\${env.PORT}\`);
+    log.info("${ctx.name} API ready", { url: \`http://localhost:\${env.PORT}\` });
   });
 }
 
 main().catch((err) => {
-  console.error("Failed to start the API:", err);
+  log.fatal("Failed to start the API", { err });
   process.exit(1);
 });
 `;
+var backendLogger = () => `import { createLogger, jsonConsole, prettyConsole } from "@lacspace/logger";
+import type { Request, Response, NextFunction } from "express";
+import { env } from "./env.js";
+
+// how this works: one structured logger for the whole API (@lacspace/logger, zero-dep).
+// In production we emit JSON-per-line (clean for log aggregators); in dev we print a
+// readable, coloured line. Common secret fields are redacted before anything is logged.
+const isProd = env.NODE_ENV === "production";
+export const log = createLogger({
+  level: isProd ? "info" : "debug",
+  transports: [isProd ? jsonConsole() : prettyConsole({ colors: true })],
+  redact: ["password", "token", "authorization", "*.password", "*.token"],
+});
+
+// Request logger \u2014 one line per request with method, path, status and duration.
+// Each request gets a child logger with a short request id you can thread through.
+export function requestLogger(req: Request, res: Response, next: NextFunction): void {
+  const start = Date.now();
+  const reqId = Math.random().toString(36).slice(2, 10);
+  (req as Request & { log: typeof log }).log = log.child({ reqId });
+  res.on("finish", () => {
+    log.info("request", {
+      reqId,
+      method: req.method,
+      path: req.originalUrl,
+      status: res.statusCode,
+      ms: Date.now() - start,
+    });
+  });
+  next();
+}
+`;
 var backendDb = () => `import mongoose from "mongoose";
 
 // how this works: opens the Mongoose connection. Call once at boot.
@@ -7816,16 +7945,19 @@ export default router;
 var backendApp = (ctx) => `import express from "express";
 import cors from "cors";
 import { env } from "./env.js";
+import { requestLogger } from "./logger.js";
 import { errorHandler } from "./middleware/error.js";
 import { registerRoutes } from "./routes/index.js";
 
 // how this works: assembles the Express app \u2014 CORS for the frontend, JSON parsing,
-// a health check, all route groups (see routes/index.ts), then the error handler LAST.
+// structured request logging (@lacspace/logger), a health check, all route groups
+// (see routes/index.ts), then the error handler LAST.
 export function createApp(): express.Express {
   const app = express();
 
   app.use(cors({ origin: env.CORS_ORIGIN.split(",").map((o) => o.trim()), credentials: true }));
   app.use(express.json());
+  app.use(requestLogger); // one structured log line per request
 
   app.get("/health", (_req, res) => { res.json({ ok: true, service: "${ctx.name}-api" }); });
   registerRoutes(app);
@@ -7866,6 +7998,7 @@ function backendFiles(ctx) {
     "backend/src/env.ts": backendEnv(ctx),
     "backend/src/db.ts": backendDb(),
     "backend/src/cache.ts": backendCache(),
+    "backend/src/logger.ts": backendLogger(),
     "backend/src/app.ts": backendApp(ctx),
     "backend/src/http.ts": backendHttp(),
     "backend/src/express.d.ts": backendExpressTypes(),

package/dist/lib.js

@@ -2403,6 +2403,38 @@ var FEATURES = [
       "Push works on https (or localhost); the generated public/sw.js receives the notifications."
     ],
     learn: "https://developer.lacspace.com/packages/web-push"
+  },
+  {
+    key: "consent",
+    label: "Cookie consent",
+    description: "GDPR-friendly cookie consent (@lacspace/consent) \u2014 a drop-in <ConsentBanner/>, per-category choices, cookie persistence and whenConsent() script-gating. Frontend, any template.",
+    deps: { "@lacspace/consent": "^1.0.0" },
+    files: () => ({ "components/consent.tsx": consentComponent() }),
+    nextSteps: [
+      "Render <ConsentBanner/> once in app/layout.tsx: import { ConsentBanner } from '@/components/consent'.",
+      "Gate analytics/marketing scripts: whenConsent(consent, 'analytics', () => { /* load tag */ }).",
+      "The choice is stored in a cookie \u2014 gate server-side too with parseConsentCookie()."
+    ],
+    learn: "https://developer.lacspace.com/packages/consent"
+  },
+  {
+    key: "realtime",
+    label: "Real-time (SSE)",
+    description: "Live server-to-browser updates over Server-Sent Events (@lacspace/sse) \u2014 a channel hub + a /live stream + a React useSSE feed. No WebSocket server. Full-stack.",
+    requiresBackend: true,
+    deps: { "@lacspace/sse": "^1.0.0" },
+    files: () => ({ "app/live/page.tsx": realtimeLivePage() }),
+    backend: () => ({
+      deps: { "@lacspace/sse": "^1.0.0" },
+      files: { "src/routes/live.ts": realtimeRoutesBackend() },
+      routes: [{ path: "/live", handler: "liveRoutes", auth: false, importLine: 'import liveRoutes from "./live.js";' }]
+    }),
+    nextSteps: [
+      "Open http://localhost:3000/live in two tabs; click 'Broadcast' in one \u2014 the other updates instantly.",
+      "Push from anywhere on the server: hub.broadcast({ event: 'message', data }) in src/routes/live.ts.",
+      "SSE auto-reconnects and needs no WebSocket server \u2014 great for notifications and live feeds."
+    ],
+    learn: "https://developer.lacspace.com/packages/sse"
   }
 ];
 var aiChatRoute = (_ctx) => `import { resolveConfig } from "@lacspace/providers";
@@ -6921,6 +6953,69 @@ router.post("/send", asyncHandler(async (req, res) => {
   res.json({ sent: results.filter((r) => r.result && !r.result.expired).length, removed: expired.length });
 }));
 
+export default router;
+`;
+var consentComponent = () => `"use client";
+// how this works: re-export the consent UI + API from one component. Render
+// <ConsentBanner/> once in app/layout.tsx; gate scripts with whenConsent().
+export { ConsentBanner, useConsent } from "@lacspace/consent/react";
+export { consent, whenConsent } from "@lacspace/consent";
+`;
+var realtimeLivePage = () => `"use client";
+import { useState } from "react";
+import { useSSE } from "@lacspace/sse/react";
+
+const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+export default function LivePage() {
+  const [log, setLog] = useState<string[]>([]);
+  const { status } = useSSE(API + "/live", {
+    onEvent: { message: (m) => setLog((prev) => [String((m as { text?: string }).text ?? ""), ...prev].slice(0, 50)) },
+  });
+
+  async function broadcast() {
+    await fetch(API + "/live/broadcast", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text: "Hello at " + new Date().toLocaleTimeString() }),
+    });
+  }
+
+  return (
+    <main className="mx-auto max-w-lg px-6 py-16">
+      <h1 className="text-2xl font-bold">Live feed</h1>
+      <p className="mt-1 text-muted">Server-Sent Events \u2014 status: {status}.</p>
+      <button className="mt-4 rounded-xl border border-hairline px-4 py-2" onClick={broadcast}>Broadcast a message</button>
+      <ul className="mt-6 space-y-2">
+        {log.map((line, i) => (<li key={i} className="rounded-xl border border-hairline p-3">{line}</li>))}
+      </ul>
+    </main>
+  );
+}
+`;
+var realtimeRoutesBackend = () => `import express from "express";
+import { SSEHub, sseHandler } from "@lacspace/sse";
+import { asyncHandler } from "../http.js";
+
+// how this works: one shared hub holds every open SSE connection. GET /live opens
+// a stream; POST /live/broadcast pushes a "message" event to everyone connected.
+// Push from anywhere in your app by importing this hub and calling hub.broadcast().
+const router = express.Router();
+const hub = new SSEHub();
+hub.startHeartbeat();
+
+router.get("/", (_req, res) => {
+  const client = sseHandler(res, { onClose: () => hub.remove(client) });
+  hub.add(client);
+  client.send({ event: "message", data: { text: "Connected to the live feed." } });
+});
+
+router.post("/broadcast", asyncHandler(async (req, res) => {
+  const text = typeof req.body?.text === "string" ? req.body.text : "ping";
+  const sent = hub.broadcast({ event: "message", data: { text } });
+  res.json({ sent });
+}));
+
 export default router;
 `;
 var scope = (ctx) => `@${ctx.name}`;
@@ -7374,6 +7469,7 @@ var backendPkgJson = (ctx) => {
       "@lacspace/id": "^1.1.0",
       "@lacspace/rate-limit": "^1.2.0",
       "@lacspace/cache": "^1.1.0",
+      "@lacspace/logger": "^1.0.0",
       ...featureDeps,
       [`${scope(ctx)}/types`]: "*"
     },
@@ -7483,21 +7579,54 @@ var backendIndex = (ctx) => `import "./load-env.js"; // MUST be first: fills pro
 import { env } from "./env.js";
 import { connectDb } from "./db.js";
 import { createApp } from "./app.js";
+import { log } from "./logger.js";
 
 // how this works: connect to MongoDB, build the Express app, then listen.
 async function main(): Promise<void> {
   await connectDb(env.MONGODB_URI);
   const app = createApp();
   app.listen(env.PORT, () => {
-    console.log(\`\u{1F680} ${ctx.name} API ready on http://localhost:\${env.PORT}\`);
+    log.info("${ctx.name} API ready", { url: \`http://localhost:\${env.PORT}\` });
   });
 }
 
 main().catch((err) => {
-  console.error("Failed to start the API:", err);
+  log.fatal("Failed to start the API", { err });
   process.exit(1);
 });
 `;
+var backendLogger = () => `import { createLogger, jsonConsole, prettyConsole } from "@lacspace/logger";
+import type { Request, Response, NextFunction } from "express";
+import { env } from "./env.js";
+
+// how this works: one structured logger for the whole API (@lacspace/logger, zero-dep).
+// In production we emit JSON-per-line (clean for log aggregators); in dev we print a
+// readable, coloured line. Common secret fields are redacted before anything is logged.
+const isProd = env.NODE_ENV === "production";
+export const log = createLogger({
+  level: isProd ? "info" : "debug",
+  transports: [isProd ? jsonConsole() : prettyConsole({ colors: true })],
+  redact: ["password", "token", "authorization", "*.password", "*.token"],
+});
+
+// Request logger \u2014 one line per request with method, path, status and duration.
+// Each request gets a child logger with a short request id you can thread through.
+export function requestLogger(req: Request, res: Response, next: NextFunction): void {
+  const start = Date.now();
+  const reqId = Math.random().toString(36).slice(2, 10);
+  (req as Request & { log: typeof log }).log = log.child({ reqId });
+  res.on("finish", () => {
+    log.info("request", {
+      reqId,
+      method: req.method,
+      path: req.originalUrl,
+      status: res.statusCode,
+      ms: Date.now() - start,
+    });
+  });
+  next();
+}
+`;
 var backendDb = () => `import mongoose from "mongoose";
 
 // how this works: opens the Mongoose connection. Call once at boot.
@@ -7813,16 +7942,19 @@ export default router;
 var backendApp = (ctx) => `import express from "express";
 import cors from "cors";
 import { env } from "./env.js";
+import { requestLogger } from "./logger.js";
 import { errorHandler } from "./middleware/error.js";
 import { registerRoutes } from "./routes/index.js";
 
 // how this works: assembles the Express app \u2014 CORS for the frontend, JSON parsing,
-// a health check, all route groups (see routes/index.ts), then the error handler LAST.
+// structured request logging (@lacspace/logger), a health check, all route groups
+// (see routes/index.ts), then the error handler LAST.
 export function createApp(): express.Express {
   const app = express();
 
   app.use(cors({ origin: env.CORS_ORIGIN.split(",").map((o) => o.trim()), credentials: true }));
   app.use(express.json());
+  app.use(requestLogger); // one structured log line per request
 
   app.get("/health", (_req, res) => { res.json({ ok: true, service: "${ctx.name}-api" }); });
   registerRoutes(app);
@@ -7863,6 +7995,7 @@ function backendFiles(ctx) {
     "backend/src/env.ts": backendEnv(ctx),
     "backend/src/db.ts": backendDb(),
     "backend/src/cache.ts": backendCache(),
+    "backend/src/logger.ts": backendLogger(),
     "backend/src/app.ts": backendApp(ctx),
     "backend/src/http.ts": backendHttp(),
     "backend/src/express.d.ts": backendExpressTypes(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lacspace-app",
-  "version": "2.11.0",
+  "version": "2.13.0",
   "description": "Scaffold a beautiful, production-ready Next.js app from a Lacspace template — portfolio, business, e-commerce, SaaS, blog, docs, dashboard, restaurant or marketplace — pre-wired with SEO, security headers, sitemap and robots. Use it as a CLI (like create-next-app, but you start gorgeous) or import it as a library to generate projects programmatically.",
   "type": "module",
   "bin": {