@flisk-sh/flisk 1.4.2 → 1.4.6

package/cli/dist/commands/up.js

@@ -20,14 +20,18 @@ import { exportHostPortPlan, getHostPortPlan, writeSavedHostPortPlan, } from "..
 import { formatHostPortPlan } from "../utils/host-port-plan.js";
 import { createJsonEmitter } from "../utils/json-output.js";
 import { toMachineError } from "../utils/machine-output.js";
+import { hasNearbyServiceJson } from "../utils/native-project.js";
+import { formatMixedRuntimeRefusal, isNativeProject, isNativeService, resolveRuntimeMode, } from "../utils/native-service.js";
+import { runNativeUp } from "../utils/native-up.js";
 import { nativeWindowsStackRefusal } from "../utils/native-windows.js";
 import { findProjectRoot, getPackageVersion } from "../utils/paths.js";
 import { findAvailablePort } from "../utils/port-assignment.js";
 import { formatPortFallbackNotice } from "../utils/port-fallback-notice.js";
+import { findPortOccupant } from "../utils/port-occupant.js";
 import { isApiServiceType } from "../utils/resource-kind.js";
 import { enforceSchemaVersionGate } from "../utils/schema-version-gate.js";
 import { enforceServiceConfigGate, warnSchemaVersions } from "../utils/service-config-checks.js";
-import { appendHealthPath, resolveSubdomainBases } from "../utils/service-urls.js";
+import { appendHealthPath, resolveServiceUrl, resolveSubdomainBases, } from "../utils/service-urls.js";
 import { discoverResourcesStrict, discoverResourcesWithProblems, discoverStacks, getResourcesForStack, stackExists, warnAboutSkippedFiles, } from "../utils/services.js";
 import { buildSmokePlans, formatSmokeFailure, runSmokePlans, safeSmokeDeps, } from "../utils/smoke.js";
 import { buildStartupReport, formatStartupReport, isStartupStalled, } from "../utils/startup-report.js";
@@ -37,17 +41,54 @@ import { stopTiltOnPort } from "../utils/tilt-process.js";
 import { parseTiltPort, resolveTiltPort, secondUpAction, stopTiltForUp, } from "../utils/tilt-startup.js";
 import { findUnknownServices, resolveOnlySelection } from "../utils/up-only.js";
 import { tiltGetUiResources, waitForTiltResourcesReady } from "../utils/up-readiness.js";
-import { enableDiscoveredStacks } from "./project.js";
-export function formatUpSuccess(port, appUrls = []) {
-    return [
-        "Flisk is up.",
-        `Tilt UI: http://localhost:${port}`,
-        "App URLs:",
-        ...(appUrls.length > 0
-            ? appUrls.slice(0, 5).map((url) => `  ${url}`)
-            : ["  run: flisk networks"]),
-        "Stop: flisk down",
-    ];
+import { enableDiscoveredStacks, writeDefaultProjectConfig } from "./project.js";
+export function formatUpSuccess(port, options = {}) {
+    const { appUrls = [], serviceHealth = [], showLogsHint = serviceHealth.length > 0 } = options;
+    const lines = [];
+    lines.push("Flisk is up.");
+    lines.push(`Tilt UI: http://localhost:${port}`);
+    if (serviceHealth.length > 0) {
+        lines.push("Services:");
+        for (const svc of serviceHealth.slice(0, 10)) {
+            const icon = svc.status === "ready" ? "✓" : svc.status === "failed" ? "✗" : "⟳";
+            const urlPart = svc.url ? ` → ${svc.url}` : "";
+            lines.push(`  ${icon} ${svc.name}${urlPart}`);
+        }
+        if (serviceHealth.length > 10) {
+            lines.push(`  … and ${serviceHealth.length - 10} more`);
+        }
+        // Health check URLs for test infrastructure and monitoring
+        lines.push("Health checks:");
+        for (const svc of serviceHealth.slice(0, 10)) {
+            const icon = svc.status === "ready" ? "✓" : svc.status === "failed" ? "✗" : "⟳";
+            if (svc.url) {
+                const healthUrl = svc.url.endsWith("/health") ? svc.url : `${svc.url}/health`;
+                lines.push(`  ${icon} ${svc.name}: ${healthUrl}`);
+            }
+        }
+        if (serviceHealth.length > 10) {
+            lines.push(`  … and ${serviceHealth.length - 10} more`);
+        }
+    }
+    else if (appUrls.length > 0) {
+        lines.push("App URLs:");
+        for (const url of appUrls.slice(0, 5)) {
+            lines.push(`  ${url}`);
+        }
+        if (appUrls.length > 5) {
+            lines.push(`   … and ${appUrls.length - 5} more`);
+        }
+    }
+    else {
+        lines.push("App URLs:");
+        lines.push("  run: flisk networks");
+    }
+    lines.push("Stop: flisk down");
+    if (showLogsHint) {
+        lines.push("Logs: flisk logs <service>");
+    }
+    lines.push("Next: flisk help  # or visit https://flisk.sh/docs");
+    return lines;
 }
 /**
  * The native Windows boundary for a command that starts a stack.
@@ -197,6 +238,67 @@ function envFileFailure(error) {
         exitCode: error instanceof FliskError ? error.exitCode : 2,
     };
 }
+/**
+ * Decides whether `flisk up` runs the selection as local processes (#2229). Returns null for today's Docker + Tilt path, which
+ * a project without any `command` service always takes. Outside a project, a directory whose services all declare `command`
+ * becomes the project. Refuses (through `fail`) an unknown stack or service, an invalid service.json, and a run that would mix
+ * native and container services.
+ */
+export function selectNativeRun(stackName, only, fail, cwd = process.cwd()) {
+    const foundRoot = findProjectRoot(cwd);
+    if (!foundRoot && !hasNearbyServiceJson(cwd))
+        return null;
+    const projectRoot = foundRoot ?? cwd;
+    let discovered;
+    try {
+        discovered = discoverResourcesWithProblems(projectRoot);
+    }
+    catch {
+        return null;
+    }
+    const all = discovered.resources;
+    if (!all.some(isNativeService))
+        return null;
+    if (!foundRoot && !isNativeProject(all))
+        return null;
+    if (discovered.problems.length > 0) {
+        fail("INVALID_SERVICE_CONFIG", discovered.problems
+            .map((problem) => `Invalid service.json at ${problem.path}: ${problem.reason}`)
+            .join("\n"));
+    }
+    let requested = all;
+    if (stackName) {
+        if (!stackExists(stackName, all)) {
+            const error = errorFactories.stackNotFound(stackName, discoverStacks(all).map((s) => s.name));
+            fail("STACK_NOT_FOUND", error.message, error.suggestions);
+        }
+        requested = getResourcesForStack(stackName, all);
+    }
+    if (only) {
+        const unknown = findUnknownServices(only, requested);
+        if (unknown.length > 0) {
+            const error = errorFactories.unknownServices(unknown, requested.map((service) => service.name));
+            fail("UNKNOWN_SERVICE", error.message, error.suggestions);
+        }
+    }
+    // A process cannot start before what it depends on, so a stack or --only selection always brings its dependsOn closure.
+    const names = only ?? requested.map((service) => service.name);
+    const selection = resolveOnlySelection(names, all);
+    const { mode, mixed } = resolveRuntimeMode(selection.selected, all);
+    if (mode === "container") {
+        const containerNames = (selection.selected.some(isNativeService) ? selection.selected : all)
+            .filter((service) => !isNativeService(service))
+            .map((service) => service.name);
+        fail("MIXED_RUNTIME", formatMixedRuntimeRefusal(mixed, containerNames));
+    }
+    return {
+        projectRoot,
+        isNewProject: !foundRoot,
+        all,
+        selected: selection.selected,
+        dependencies: only ? selection.dependencies : [],
+    };
+}
 export const upCommand = new Command("up")
     .description("Start all services (optionally filtered by stack)")
     .alias("deploy")
@@ -228,6 +330,60 @@ export const upCommand = new Command("up")
             onFail: (message) => emit?.({ ok: false }, [{ code: "FLISK_VERSION_TOO_OLD", message }]),
         });
     }
+    // Every selected service declares `command`: run them as local processes, with no Docker, Compose, Tilt or generated
+    // files (#2229). Decided before any Docker or Tilt check; a project without `command` services never enters this branch.
+    const nativeRun = selectNativeRun(stackName, options.only, (code, message, suggestions) => {
+        emit?.({ ok: false }, [
+            { code, message, ...(suggestions && suggestions.length > 0 ? { suggestions } : {}) },
+        ]);
+        return showErrorAndExit(message, 1, suggestions);
+    });
+    if (nativeRun) {
+        const platformRefusal = nativeWindowsUpRefusal(process.platform, process.env.FLISK_ALLOW_NATIVE_WINDOWS);
+        if (platformRefusal)
+            showErrorAndExit(platformRefusal);
+        const { projectRoot } = nativeRun;
+        let envFilePath;
+        if (options.envFile !== undefined) {
+            try {
+                envFilePath = selectEnvFile(projectRoot, options.envFile).path;
+            }
+            catch (error) {
+                const { failure, exitCode } = envFileFailure(error);
+                emit?.({ ok: false }, [failure]);
+                showErrorAndExit(failure.message, exitCode, failure.suggestions);
+            }
+        }
+        if (!nativeRun.isNewProject) {
+            enforceSchemaVersionGate(projectRoot, {
+                resources: nativeRun.all,
+                onInvalid: (message) => emit?.({ ok: false }, [{ code: "INVALID_SCHEMA_VERSION", message }]),
+            });
+        }
+        enforceServiceConfigGate(projectRoot, {
+            resources: nativeRun.all,
+            onInvalid: (message) => emit?.({ ok: false }, [{ code: "INVALID_SERVICE_CONFIG", message }]),
+        });
+        if (nativeRun.isNewProject && !options.dryRun) {
+            writeDefaultProjectConfig(projectRoot);
+            if (!options.quiet) {
+                console.log(chalk.gray("Created .flisk/project.json (this directory is now a Flisk project)"));
+            }
+        }
+        await runNativeUp({
+            projectRoot,
+            selected: nativeRun.selected,
+            dependencies: nativeRun.dependencies,
+            stackName,
+            only: options.only,
+            envFilePath,
+            dryRun: options.dryRun,
+            quiet: options.quiet,
+            force: options.force,
+            emit,
+        });
+        return;
+    }
     // The env file of the run. `--env-file` replaces the project .env for this run, so the file is
     // resolved and read before any prerequisite check, any write and any service starts.
     const envFileRoot = versionRoot;
@@ -366,8 +522,13 @@ export const upCommand = new Command("up")
                 console.log(chalk.gray(`Refreshed runtime assets: ${copiedAssets.join(", ")}`));
             }
             const newlyEnabledStacks = enableDiscoveredStacks(projectRoot, discoveredResources);
-            if (newlyEnabledStacks.length > 0 && !options.quiet) {
-                console.log(chalk.gray(`Added ${newlyEnabledStacks.join(", ")} to the pre_alpha phase in .flisk/project.json`));
+            if (newlyEnabledStacks.length > 0) {
+                // project.json just changed, so the generated spec.master is now stale. Regenerate it here, or the next
+                // `flisk config verify` reports it out of sync.
+                await generateMasterConfigs(projectRoot, { quiet: options.quiet });
+                if (!options.quiet) {
+                    console.log(chalk.gray(`Added ${newlyEnabledStacks.join(", ")} to the pre_alpha phase in .flisk/project.json`));
+                }
             }
         }
         let servicesToStart;
@@ -413,7 +574,7 @@ export const upCommand = new Command("up")
                 console.log(chalk.blue("\n🌍 Frontend URLs:"));
                 for (const svc of frontends) {
                     const basePath = svc.config?.basePath ?? `/${svc.name}`;
-                    console.log(chalk.gray(`  - ${svc.name}: ${appBase}${chalk.cyan(appendHealthPath(basePath))}`));
+                    console.log(chalk.gray(`  - ${svc.name}: ${appBase}${chalk.cyan(basePath)}`));
                 }
             }
             if (backends.length > 0) {
@@ -605,14 +766,35 @@ export const upCommand = new Command("up")
                             blocked: [],
                             starting: [],
                         };
-                    const reportLines = formatStartupReport(report, readiness.timedOut);
+                    const reportLines = formatStartupReport(report, readiness.timedOut, (port) => findPortOccupant(port));
                     if (reportLines.length > 0) {
                         showError(reportLines.join("\n"));
                     }
                 }
             }
             if (uiReady && !options.quiet && !startupFailed) {
-                for (const line of formatUpSuccess(port))
+                const deferred = getDeferredResourceNames(discoveredResources);
+                const dependsOn = Object.fromEntries(discoveredResources.map((r) => [r.name, r.config?.dependsOn ?? []]));
+                const readiness = await waitForTiltResourcesReady(port, {
+                    deferred,
+                    isStalled: (text) => isStartupStalled(text, dependsOn, deferred),
+                });
+                const serviceHealth = readiness.enabled.map((name) => {
+                    const failed = readiness.failures.find((f) => f.name === name);
+                    const svc = discoveredResources.find((r) => r.name === name);
+                    const isReady = !failed && !readiness.failures.some((f) => f.name === name);
+                    const isStarting = !isReady && !failed;
+                    const url = svc ? resolveServiceUrl(svc, hostPortPlan.ingressHttp) : undefined;
+                    return {
+                        name,
+                        status: failed ? "failed" : isStarting ? "starting" : "ready",
+                        url,
+                    };
+                });
+                for (const line of formatUpSuccess(port, {
+                    serviceHealth,
+                    showLogsHint: true,
+                }))
                     console.log(chalk.blue(line));
                 printedSuccess = true;
             }
@@ -673,7 +855,28 @@ export const upCommand = new Command("up")
             process.exit(1);
         }
         if (!options.quiet && result.exitCode === 0 && !printedSuccess) {
-            for (const line of formatUpSuccess(port))
+            const deferred = getDeferredResourceNames(discoveredResources);
+            const dependsOn = Object.fromEntries(discoveredResources.map((r) => [r.name, r.config?.dependsOn ?? []]));
+            const readiness = await waitForTiltResourcesReady(port, {
+                deferred,
+                isStalled: (text) => isStartupStalled(text, dependsOn, deferred),
+            });
+            const serviceHealth = readiness.enabled.map((name) => {
+                const failed = readiness.failures.find((f) => f.name === name);
+                const svc = discoveredResources.find((r) => r.name === name);
+                const isReady = !failed && !readiness.failures.some((f) => f.name === name);
+                const isStarting = !isReady && !failed;
+                const url = svc ? resolveServiceUrl(svc, hostPortPlan.ingressHttp) : undefined;
+                return {
+                    name,
+                    status: failed ? "failed" : isStarting ? "starting" : "ready",
+                    url,
+                };
+            });
+            for (const line of formatUpSuccess(port, {
+                serviceHealth,
+                showLogsHint: true,
+            }))
                 console.log(chalk.blue(line));
         }
     };

package/cli/dist/commands/upgrade.js

@@ -140,7 +140,7 @@ export function detectAllInstallations() {
     return [...unique.values()];
 }
 const BINARY_RELEASE_REPO = "flisk-sh/releases";
-const ENGINE_ASSET_NAME = "tdk-cli-engine.tar.gz";
+const ENGINE_ASSET_NAME = "flisk-cli-engine.tar.gz";
 const CHECKSUMS_ASSET_NAME = "checksums.txt";
 /** Parses `shasum -a 256` / `sha256sum` output ("<hash>  <name>" or "<hash> *<name>"). */
 /** @internal Exported for unit tests only; not part of the package API. */
@@ -656,7 +656,7 @@ export function createUpgradeCommand() {
                     showErrorAndExit("Flisk Windows v1 supports AMD64 only. Use WSL2 Ubuntu or a 64-bit Intel/AMD PC.");
                 }
                 if (process.platform === "win32") {
-                    showErrorAndExit("No Windows AMD64 binary in this Flisk release. Need asset tdk-windows-amd64.exe.");
+                    showErrorAndExit("No Windows AMD64 binary in this Flisk release. Need asset flisk-windows-amd64.exe.");
                 }
                 showErrorAndExit(`Unsupported OS: Flisk does not support this OS: ${process.platform}. Supported: linux, darwin, win32.`);
             }

package/cli/dist/frontend-frameworks/next.js

@@ -0,0 +1,197 @@
+/**
+ * Next.js (App Router) is a `server` provider: it owns its build and dev server, so there is no Vite config and no nginx.
+ * Under `flisk up` the engine runs `next dev` in a Node image (live reload through Tilt), served under `/<name>/` by Traefik.
+ * The engine writes `.autogenerated/.env.frontend.autogenerated`; the generated Dockerfile copies it to `.env`, so
+ * `next.config.mjs` and the page read `FLISK_BASE_PATH` and `NEXT_PUBLIC_API_URL` without any wiring in the app.
+ */
+const NEXT_CONFIG = `// FLISK_BASE_PATH is set by flisk up (the route this app is served under, for example /web). On the host it is unset,
+// so \`next dev\` serves from the root.
+const basePath = process.env.FLISK_BASE_PATH ?? '';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  basePath,
+  // Flisk's route is /<name>/; with trailingSlash the page answers there instead of redirecting.
+  trailingSlash: true,
+  output: 'standalone',
+  reactStrictMode: true,
+};
+
+export default nextConfig;
+`;
+const STARTER_STYLES = `const page = { maxWidth: 640, margin: '0 auto', padding: '3rem 1.5rem', fontFamily: 'system-ui, sans-serif', color: '#1f2933' };
+const muted = { color: '#616e7c', marginTop: 0 };
+`;
+function renderPage(name, backendName) {
+    return `${backendName ? "import HealthCard from './health-card';\n\n" : ""}${STARTER_STYLES}
+export default function Home() {
+  return (
+    <main style={page}>
+      <h1>${name}</h1>
+      <p style={muted}>Flisk frontend (Next.js)</p>
+${backendName ? "\n      <HealthCard />\n" : ""}
+      <p>Edit <code>src/app/page.tsx</code> and save. It live-reloads.</p>
+      <ul>
+        <li><a href="http://localhost:10350">Tilt UI</a>: logs and resource status</li>
+        <li><code>flisk status</code>: every resource in this project</li>
+      </ul>
+    </main>
+  );
+}
+`;
+}
+function renderHealthCard(backendName) {
+    return `'use client';
+
+import { useEffect, useState } from 'react';
+
+// Set by flisk up from the backend's route; empty on the host, where the browser calls the same origin.
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? '';
+const BACKEND_NAME = '${backendName}';
+
+const card = { border: '1px solid #d9e2ec', borderRadius: 8, padding: '1rem 1.25rem', margin: '1.5rem 0' };
+const cardHeader = { display: 'flex', justifyContent: 'space-between', alignItems: 'center' };
+const pre = { background: '#f5f7fa', borderRadius: 6, padding: '0.75rem', overflowX: 'auto' as const };
+
+interface Health {
+  ok: boolean;
+  body: unknown;
+}
+
+export default function HealthCard() {
+  const [health, setHealth] = useState<Health | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetch(API_URL + '/health', { signal: controller.signal })
+      .then(async (response) => {
+        // Read the body as text first: a non-JSON error page must show its real status, not an unreachable backend.
+        const text = await response.text();
+        let body: unknown = text;
+        try {
+          body = JSON.parse(text);
+        } catch {
+          // keep the raw text
+        }
+        setHealth({ ok: response.ok, body: { status: response.status, body } });
+      })
+      .catch((error: unknown) => {
+        if (!controller.signal.aborted) setHealth({ ok: false, body: { error: String(error) } });
+      });
+    return () => controller.abort();
+  }, []);
+
+  return (
+    <section style={card}>
+      <div style={cardHeader}>
+        <strong>Backend: {BACKEND_NAME}</strong>
+        {health === null && <span>checking…</span>}
+        {health?.ok === true && <span style={{ color: '#0a7f3f' }}>ok</span>}
+        {health?.ok === false && <span style={{ color: '#b42318' }}>unreachable</span>}
+      </div>
+      {health && <pre style={pre}>{JSON.stringify(health.body, null, 2)}</pre>}
+    </section>
+  );
+}
+`;
+}
+export const nextFrontendProvider = {
+    id: "next",
+    label: "Next.js (App Router)",
+    kind: "server",
+    dependencies: {
+        next: "^15.5.0",
+        react: "^19.0.0",
+        "react-dom": "^19.0.0",
+    },
+    devDependencies: {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        // `next build` type-checks through the TypeScript JavaScript API.
+        typescript: "^5.9.0",
+        // The image installs with npm, which enforces peer ranges: vitest 5 peers on @types/node ^22 || >=24, and the
+        // scaffold's ^20 otherwise fails `npm install` with ERESOLVE.
+        "@types/node": "^22.0.0",
+    },
+    compilerOptions: {},
+    scripts: {
+        dev: "next dev",
+        build: "next build",
+        start: "next start",
+    },
+    tsconfig: {
+        compilerOptions: {
+            target: "ES2022",
+            lib: ["dom", "dom.iterable", "esnext"],
+            allowJs: true,
+            skipLibCheck: true,
+            strict: true,
+            noEmit: true,
+            esModuleInterop: true,
+            module: "esnext",
+            moduleResolution: "bundler",
+            resolveJsonModule: true,
+            isolatedModules: true,
+            jsx: "preserve",
+            incremental: true,
+            plugins: [{ name: "next" }],
+        },
+        include: ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", ".next/types/**/*.ts"],
+        exclude: ["node_modules"],
+    },
+    createFiles(name, options = {}) {
+        return [
+            {
+                filename: "next.config.mjs",
+                content: NEXT_CONFIG,
+                description: "Generating Next.js config",
+                emoji: "⚙️",
+            },
+            {
+                filename: "src/app/layout.tsx",
+                content: `import type { ReactNode } from 'react';
+
+export const metadata = { title: '${name}' };
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+`,
+                description: "Generating Next.js root layout",
+                emoji: "💻",
+            },
+            {
+                filename: "src/app/page.tsx",
+                content: renderPage(name, options.backendName),
+                description: "Generating Next.js home page",
+                emoji: "💻",
+            },
+            {
+                filename: "src/app/health/route.ts",
+                content: `// The engine probes /<name>/health; the base path puts this route under the same prefix.
+export const dynamic = 'force-static';
+
+export function GET() {
+  return new Response('ok');
+}
+`,
+                description: "Generating health route",
+                emoji: "🩺",
+            },
+            ...(options.backendName
+                ? [
+                    {
+                        filename: "src/app/health-card.tsx",
+                        content: renderHealthCard(options.backendName),
+                        description: "Generating backend health card",
+                        emoji: "💻",
+                    },
+                ]
+                : []),
+        ];
+    },
+};

package/cli/dist/frontend-frameworks/react.js

@@ -1,3 +1,80 @@
+const STARTER_STYLES = `const page = { maxWidth: 640, margin: '0 auto', padding: '3rem 1.5rem', fontFamily: 'system-ui, sans-serif', color: '#1f2933' };
+const muted = { color: '#616e7c', marginTop: 0 };
+const card = { border: '1px solid #d9e2ec', borderRadius: 8, padding: '1rem 1.25rem', margin: '1.5rem 0' };
+const cardHeader = { display: 'flex', justifyContent: 'space-between', alignItems: 'center' };
+const pre = { background: '#f5f7fa', borderRadius: 6, padding: '0.75rem', overflowX: 'auto' };
+`;
+/** Hints and links shared by both starters. They need no backend, so they appear in every frontend. */
+const STARTER_HINTS = `      <p>Edit <code>src/App.tsx</code> and save. It live-reloads.</p>
+      <ul>
+        <li><a href="http://localhost:10350">Tilt UI</a>: logs and resource status</li>
+        <li><code>flisk status</code>: every resource in this project</li>
+      </ul>`;
+function renderAppWithBackend(name, backendName) {
+    return `/// <reference types="vite/client" />
+import { useEffect, useState } from 'react';
+
+const API_URL = import.meta.env.VITE_API_URL ?? '';
+const BACKEND_NAME = '${backendName}';
+
+${STARTER_STYLES}
+interface Health {
+  ok: boolean;
+  body: unknown;
+}
+
+function App() {
+  const [health, setHealth] = useState<Health | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetch(API_URL + '/health', { signal: controller.signal })
+      .then(async (response) => setHealth({ ok: response.ok, body: await response.json() }))
+      .catch((error: unknown) => {
+        if (!controller.signal.aborted) setHealth({ ok: false, body: { error: String(error) } });
+      });
+    return () => controller.abort();
+  }, []);
+
+  return (
+    <main style={page}>
+      <h1>${name}</h1>
+      <p style={muted}>Flisk frontend</p>
+
+      <section style={card}>
+        <div style={cardHeader}>
+          <strong>Backend: {BACKEND_NAME}</strong>
+          {health === null && <span>checking…</span>}
+          {health?.ok === true && <span style={{ color: '#0a7f3f' }}>ok</span>}
+          {health?.ok === false && <span style={{ color: '#b42318' }}>unreachable</span>}
+        </div>
+        {health && <pre>{JSON.stringify(health.body, null, 2)}</pre>}
+      </section>
+
+${STARTER_HINTS}
+    </main>
+  );
+}
+
+export default App;
+`;
+}
+function renderAppWithoutBackend(name) {
+    return `${STARTER_STYLES}
+function App() {
+  return (
+    <main style={page}>
+      <h1>${name}</h1>
+      <p style={muted}>Flisk frontend</p>
+
+${STARTER_HINTS}
+    </main>
+  );
+}
+
+export default App;
+`;
+}
 export const reactFrontendProvider = {
     id: "react",
     label: "React + Vite",
@@ -13,7 +90,7 @@ export const reactFrontendProvider = {
     compilerOptions: {
         jsx: "react-jsx",
     },
-    createFiles(name) {
+    createFiles(name, options = {}) {
         return [
             {
                 filename: "index.html",
@@ -50,17 +127,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
             },
             {
                 filename: "src/App.tsx",
-                content: `function App() {
-  return (
-    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
-      <h1>${name}</h1>
-      <p>Frontend resource created with Flisk</p>
-    </div>
-  );
-}
-
-export default App;
-`,
+                content: options.backendName
+                    ? renderAppWithBackend(name, options.backendName)
+                    : renderAppWithoutBackend(name),
                 description: "Generating React app",
                 emoji: "💻",
             },

package/cli/dist/frontend-frameworks/registry.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: MIT
 import { FliskError } from "../utils/errors.js";
 import { litFrontendProvider } from "./lit.js";
+import { nextFrontendProvider } from "./next.js";
 import { preactFrontendProvider } from "./preact.js";
 import { qwikFrontendProvider } from "./qwik.js";
 import { reactFrontendProvider } from "./react.js";
@@ -21,11 +22,11 @@ export const FRONTEND_FRAMEWORKS = {
     qwik: qwikFrontendProvider,
     vanilla: vanillaFrontendProvider,
     "tanstack-router": tanstackRouterFrontendProvider,
+    next: nextFrontendProvider,
 };
-// Frameworks that own their own server or build config. They are never scaffolded as Vite SPA providers; they go through
-// `flisk resource <name> --type bring-your-own` instead.
+// Meta-frameworks that are not registered providers. They are never scaffolded as Vite SPA providers; they go through
+// `flisk resource <name> --type bring-your-own` instead. Next.js is a registered `server` provider, so it is not listed here.
 export const META_FRAMEWORK_IDS = [
-    "next",
     "nuxt",
     "sveltekit",
     "astro",
@@ -49,7 +50,7 @@ export function listFrontendFrameworks() {
     return Object.entries(FRONTEND_FRAMEWORKS).map(([id, provider]) => ({
         id,
         label: provider.label,
-        kind: "vite-spa",
+        kind: provider.kind ?? "vite-spa",
         verified: VERIFIED_FRONTEND_FRAMEWORKS.includes(id),
         command: `flisk resource <name> --type frontend --framework ${id}`,
     }));