@flisk-sh/flisk 1.4.2 → 1.4.5

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}`,
     }));

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

@@ -1,3 +1,81 @@
+const STARTER_STYLE = `<style scoped>
+main { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem; font-family: system-ui, sans-serif; color: #1f2933; }
+.muted { color: #616e7c; margin-top: 0; }
+.card { border: 1px solid #d9e2ec; border-radius: 8px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
+.card-header { display: flex; justify-content: space-between; align-items: center; }
+.ok { color: #0a7f3f; }
+.unreachable { color: #b42318; }
+pre { background: #f5f7fa; border-radius: 6px; padding: 0.75rem; overflow-x: auto; }
+</style>`;
+/** 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.vue</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 `<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+const API_URL = import.meta.env.VITE_API_URL ?? '';
+const BACKEND_NAME = '${backendName}';
+
+interface Health {
+  ok: boolean;
+  body: unknown;
+}
+
+const health = ref<Health | null>(null);
+
+onMounted(async () => {
+  try {
+    const response = await fetch(API_URL + '/health');
+    health.value = { ok: response.ok, body: await response.json() };
+  } catch (error) {
+    health.value = { ok: false, body: { error: String(error) } };
+  }
+});
+</script>
+
+<template>
+  <main>
+    <h1>${name}</h1>
+    <p class="muted">Flisk frontend</p>
+
+    <section class="card">
+      <div class="card-header">
+        <strong>Backend: {{ BACKEND_NAME }}</strong>
+        <span v-if="health === null">checking…</span>
+        <span v-else-if="health.ok" class="ok">ok</span>
+        <span v-else class="unreachable">unreachable</span>
+      </div>
+      <pre v-if="health">{{ JSON.stringify(health.body, null, 2) }}</pre>
+    </section>
+
+${STARTER_HINTS}
+  </main>
+</template>
+
+${STARTER_STYLE}
+`;
+}
+function renderAppWithoutBackend(name) {
+    return `<script setup lang="ts">
+const appName = '${name}';
+</script>
+
+<template>
+  <main>
+    <h1>{{ appName }}</h1>
+    <p class="muted">Flisk frontend</p>
+
+${STARTER_HINTS}
+  </main>
+</template>
+
+${STARTER_STYLE}
+`;
+}
 export const vueFrontendProvider = {
     id: "vue",
     label: "Vue + Vite",
@@ -8,7 +86,7 @@ export const vueFrontendProvider = {
         "@vitejs/plugin-vue": "^5.2.4",
     },
     compilerOptions: {},
-    createFiles(name) {
+    createFiles(name, options = {}) {
         return [
             {
                 filename: "index.html",
@@ -40,17 +118,9 @@ createApp(App).mount('#app');
             },
             {
                 filename: "src/App.vue",
-                content: `<script setup lang="ts">
-const message = 'Frontend resource created with Flisk';
-</script>
-
-<template>
-  <main style="padding: 2rem; font-family: system-ui">
-    <h1>${name}</h1>
-    <p>{{ message }}</p>
-  </main>
-</template>
-`,
+                content: options.backendName
+                    ? renderAppWithBackend(name, options.backendName)
+                    : renderAppWithoutBackend(name),
                 description: "Generating Vue app",
                 emoji: "💻",
             },

package/cli/dist/generator/resource-templates.js

@@ -122,12 +122,10 @@ main().catch((err) => {
 `;
 }
 export function getTestTemplate(name) {
-    return `import { describe, it, expect } from 'vitest';
+    return `import { describe, it } from 'vitest';
 
 describe('${name}', () => {
-  it('should pass a basic test', () => {
-    expect(true).toBe(true);
-  });
+  it.todo('add a real test for ${name}');
 });
 `;
 }

package/cli/dist/generator/template-engine.js

@@ -34,11 +34,13 @@ export function loadTemplate(filename) {
     const triedPaths = [];
     for (const templateDir of templateDirs) {
         const templatePath = path.join(templateDir, filename);
-        triedPaths.push(templatePath);
         try {
             return fs.readFileSync(templatePath, "utf-8");
         }
-        catch (_error) { }
+        catch (error) {
+            const reason = error instanceof Error ? error.message : String(error);
+            triedPaths.push(`${templatePath} (${reason})`);
+        }
     }
     throw new Error(`Failed to load template ${filename} from any of these paths: ${triedPaths.join(", ")}`);
 }
@@ -707,7 +709,7 @@ async function vendorFliskExtension(projectRoot, options = {}) {
         console.warn(`⚠️  Premium overlay skipped: ${err.message}`);
     }
 }
-const FLISK_GENERATED_MARKER = "SYSTEM-GENERATED BY Flisk CLI";
+export const FLISK_GENERATED_MARKER = "SYSTEM-GENERATED BY Flisk CLI";
 export function verifyMasterConfigs(projectRoot, options) {
     const errors = [];
     const warnings = [];

package/cli/dist/utils/cold-preflight.js

@@ -61,7 +61,7 @@ export function requireVerifiedDockerVersions(result) {
         fix: result.fix ?? "Start Docker and ensure Docker Engine 25+ and Compose 2.20.2+ are installed.",
     };
 }
-function usesPrisma(projectRoot) {
+export function usesPrisma(projectRoot) {
     try {
         return discoverResourcesFromRoot(projectRoot).some((resource) => {
             return resource.config?.featuresEnabled?.includes("prisma") ?? false;
@@ -120,9 +120,10 @@ export async function runColdPreflight(opts = {}) {
     const bunPath = bunNeeded ? findOnPath("bun") : undefined;
     if (bunPath) {
         try {
+            // A cold start of bun can pass 3s on a busy machine; a timeout there reads as "not installed".
             const version = execFileSync(bunPath, ["--version"], {
                 encoding: "utf-8",
-                timeout: 3000,
+                timeout: 10_000,
             }).trim();
             bun = bunMeetsFloor(version);
         }