create-l5e 0.1.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 L5E contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,44 @@
+# create-l5e
+
+Create a L5E app from the official starter template.
+
+```sh
+npm create l5e@alpha my-app -- --template basic
+```
+
+Equivalent commands:
+
+```sh
+npx create-l5e@alpha my-app --template basic
+pnpm create l5e@alpha my-app --template basic
+bun create l5e@alpha my-app --template basic
+```
+
+Available templates:
+
+- `basic`: example app with middleware rewrite, loader cache headers, action and swap interaction
+- `minimal`: small app with one server-rendered page
+
+Run the dev server immediately after install:
+
+```sh
+pnpm create l5e@alpha my-app --template basic --dev
+```
+
+## Publishing
+
+The package name must be `create-l5e`. npm maps `npm create l5e` to the
+`create-l5e` package name.
+
+Publish the alpha:
+
+```sh
+pnpm --filter create-l5e publish --tag alpha
+```
+
+After the package is stable, publish or move the dist tag to `latest` so users can run:
+
+```sh
+npm create l5e@latest my-app
+npx create-l5e@latest my-app
+```

package/bin/create-l5e.js

@@ -0,0 +1,275 @@
+#!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const helpText = `
+Usage:
+  create-l5e <project-directory> [options]
+
+Options:
+  -t, --template <name>         Use a first-party template
+  --dev                         Start the dev server after installing
+  --no-install                  Copy the starter without installing dependencies
+  -p, --package-manager <name>  Use npm, pnpm, yarn, or bun
+  -h, --help                    Show this help
+
+Templates:
+  basic                         Example app with middleware, loaders, actions, and swap
+  minimal                       Small app with one server-rendered page
+
+Examples:
+  pnpm create l5e@alpha my-app --template basic
+  pnpm create l5e@alpha my-app --template minimal
+`;
+
+const builtInTemplates = new Map([
+  ['basic', '../templates/basic'],
+  ['minimal', '../templates/minimal'],
+]);
+const packageManagers = new Set(['npm', 'pnpm', 'yarn', 'bun']);
+
+main().catch((error) => {
+  console.error(error instanceof Error ? error.message : String(error));
+  process.exit(1);
+});
+
+async function main() {
+  const options = parseArgs(process.argv.slice(2));
+
+  if (options.help) {
+    console.log(helpText.trim());
+    return;
+  }
+
+  if (!options.targetDir) {
+    console.error(helpText.trim());
+    process.exit(1);
+  }
+
+  if (options.dev && !options.install) {
+    throw new Error('The --dev option requires dependency installation. Remove --no-install.');
+  }
+
+  const targetDir = path.resolve(process.cwd(), options.targetDir);
+  const projectName = toPackageName(path.basename(targetDir));
+  const template = resolveTemplate(options.template);
+  const packageManager = options.packageManager ?? detectPackageManager();
+
+  await ensureEmptyDirectory(targetDir);
+  await writeTemplate(template, targetDir, { projectName });
+  await updatePackageName(targetDir, projectName);
+
+  console.log(`Created ${projectName} from ${template.name} in ${targetDir}`);
+
+  if (options.install) {
+    runCommand(packageManager, ['install'], targetDir);
+  }
+
+  if (options.dev) {
+    runCommand(packageManager, devArgs(packageManager), targetDir);
+    return;
+  }
+
+  printNextSteps(targetDir, packageManager, options.install);
+}
+
+function parseArgs(args) {
+  const options = {
+    dev: false,
+    help: false,
+    install: true,
+    packageManager: undefined,
+    template: 'basic',
+    targetDir: undefined,
+  };
+
+  for (let index = 0; index < args.length; index += 1) {
+    const arg = args[index];
+
+    if (arg === '--help' || arg === '-h') {
+      options.help = true;
+      continue;
+    }
+
+    if (arg === '--dev') {
+      options.dev = true;
+      continue;
+    }
+
+    if (arg === '--no-install') {
+      options.install = false;
+      continue;
+    }
+
+    if (arg === '--template' || arg === '-t') {
+      const value = args[index + 1];
+      if (!value) throw new Error(`${arg} requires a first-party template name.`);
+      options.template = value;
+      index += 1;
+      continue;
+    }
+
+    if (arg.startsWith('--template=')) {
+      options.template = arg.slice('--template='.length);
+      continue;
+    }
+
+    if (arg === '--package-manager' || arg === '-p') {
+      const value = args[index + 1];
+      if (!value) throw new Error(`${arg} requires npm, pnpm, yarn, or bun.`);
+      options.packageManager = normalizePackageManager(value);
+      index += 1;
+      continue;
+    }
+
+    if (arg.startsWith('--package-manager=')) {
+      options.packageManager = normalizePackageManager(arg.slice('--package-manager='.length));
+      continue;
+    }
+
+    if (arg.startsWith('-')) {
+      throw new Error(`Unknown option: ${arg}`);
+    }
+
+    if (options.targetDir) {
+      throw new Error(`Unexpected argument: ${arg}`);
+    }
+
+    options.targetDir = arg;
+  }
+
+  return options;
+}
+
+function normalizePackageManager(value) {
+  const normalized = value.trim().toLowerCase();
+  if (!packageManagers.has(normalized)) {
+    throw new Error(`Unsupported package manager: ${value}. Use npm, pnpm, yarn, or bun.`);
+  }
+  return normalized;
+}
+
+function detectPackageManager() {
+  const userAgent = process.env.npm_config_user_agent ?? '';
+
+  if (userAgent.startsWith('pnpm')) return 'pnpm';
+  if (userAgent.startsWith('yarn')) return 'yarn';
+  if (userAgent.startsWith('bun')) return 'bun';
+  return 'npm';
+}
+
+function toPackageName(name) {
+  const normalized = name
+    .trim()
+    .toLowerCase()
+    .replace(/^[._]/, '')
+    .replace(/[^a-z0-9._-]+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+
+  return normalized || 'l5e-app';
+}
+
+function resolveTemplate(value) {
+  const templateName = value.trim();
+  const builtInPath = builtInTemplates.get(templateName.toLowerCase());
+
+  if (builtInPath) {
+    return {
+      type: 'local',
+      name: templateName,
+      dir: path.resolve(__dirname, builtInPath),
+    };
+  }
+
+  const builtIns = [...builtInTemplates.keys()].join(', ');
+  throw new Error(`Unknown template: ${value}. Use one of: ${builtIns}.`);
+}
+
+async function ensureEmptyDirectory(dir) {
+  await fs.mkdir(dir, { recursive: true });
+
+  const entries = await fs.readdir(dir);
+  if (entries.length > 0) {
+    throw new Error(`Target directory is not empty: ${dir}`);
+  }
+}
+
+async function writeTemplate(template, targetDir, replacements) {
+  await copyTemplate(template.dir, targetDir, replacements);
+}
+
+async function copyTemplate(sourceDir, targetDir, replacements) {
+  const entries = await fs.readdir(sourceDir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const sourcePath = path.join(sourceDir, entry.name);
+    const targetName = entry.name === '_gitignore' ? '.gitignore' : entry.name;
+    const targetPath = path.join(targetDir, targetName);
+
+    if (entry.isDirectory()) {
+      await fs.mkdir(targetPath, { recursive: true });
+      await copyTemplate(sourcePath, targetPath, replacements);
+      continue;
+    }
+
+    let content = await fs.readFile(sourcePath, 'utf8');
+    content = content.replaceAll('__PROJECT_NAME__', replacements.projectName);
+    await fs.writeFile(targetPath, content);
+  }
+}
+
+async function updatePackageName(targetDir, projectName) {
+  const packageJsonPath = path.join(targetDir, 'package.json');
+  let content;
+
+  try {
+    content = await fs.readFile(packageJsonPath, 'utf8');
+  } catch (error) {
+    if (error && error.code === 'ENOENT') return;
+    throw error;
+  }
+
+  const packageJson = JSON.parse(content);
+  packageJson.name = projectName;
+  await fs.writeFile(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`);
+}
+
+function runCommand(command, args, cwd) {
+  console.log(`Running ${[command, ...args].join(' ')}...`);
+
+  const result = spawnSync(command, args, {
+    cwd,
+    stdio: 'inherit',
+    shell: process.platform === 'win32',
+  });
+
+  if (result.status !== 0) {
+    const exitCode = typeof result.status === 'number' ? result.status : 1;
+    process.exit(exitCode);
+  }
+}
+
+function devArgs(packageManager) {
+  if (packageManager === 'npm') return ['run', 'dev'];
+  if (packageManager === 'bun') return ['run', 'dev'];
+  return ['dev'];
+}
+
+function printNextSteps(targetDir, packageManager, installed) {
+  const relativeTarget = path.relative(process.cwd(), targetDir) || '.';
+  const devCommand = [packageManager, ...devArgs(packageManager)].join(' ');
+
+  console.log('');
+  console.log('Next steps:');
+  console.log(`  cd ${relativeTarget}`);
+  if (!installed) {
+    console.log(`  ${packageManager} install`);
+  }
+  console.log(`  ${devCommand}`);
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "create-l5e",
+  "version": "0.1.0-alpha.0",
+  "description": "Create an L5E app from the official starter template.",
+  "type": "module",
+  "license": "MIT",
+  "bin": {
+    "create-l5e": "./bin/create-l5e.js"
+  },
+  "files": [
+    "bin",
+    "templates",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "publishConfig": {
+    "tag": "alpha"
+  },
+  "scripts": {
+    "build": "node --check bin/create-l5e.js",
+    "typecheck": "node --check bin/create-l5e.js"
+  }
+}

package/templates/basic/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.env
+.env.local

package/templates/basic/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!--app-head-->
+  </head>
+  <body>
+    <!--app-html-->
+    <!--app-scripts-->
+  </body>
+</html>

package/templates/basic/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsx server.ts",
+    "build": "vite build && vite build --ssr src/entry-server.ts --outDir dist/server && vite build --ssr server.ts --outDir dist --emptyOutDir false",
+    "preview": "cross-env NODE_ENV=production node dist/server.js",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@withl5e/l5e": "^0.1.0-alpha.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "cross-env": "^7.0.3",
+    "tsx": "^4.7.0",
+    "typescript": "^5.6.3",
+    "vite": "^7.1.5"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  }
+}

package/templates/basic/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

package/templates/basic/server.ts

@@ -0,0 +1,8 @@
+import { startServer } from '@withl5e/l5e/server';
+
+startServer({
+  root: process.cwd(),
+  port: Number(process.env.PORT) || 5173,
+  base: '/',
+  publicDir: './public',
+});

package/templates/basic/src/client.global.ts

@@ -0,0 +1 @@
+import './global.css';

package/templates/basic/src/entry-server.ts

@@ -0,0 +1,4 @@
+export { loadMiddleware, render } from '@withl5e/l5e/entry-server';
+export { runInRenderContext } from '@withl5e/l5e/jsx-runtime';
+export { renderJsxToHtmlString } from '@withl5e/l5e';
+export { viewActions } from 'virtual:l5e-actions';

package/templates/basic/src/global.css

@@ -0,0 +1,48 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #17202a;
+  background: #f6f7f9;
+}
+
+a {
+  color: #0f6bff;
+}
+
+main {
+  width: min(920px, calc(100% - 32px));
+  margin: 48px auto;
+}
+
+.nav {
+  display: flex;
+  gap: 16px;
+  padding: 16px 24px;
+  border-bottom: 1px solid #d9dee7;
+  background: #fff;
+}
+
+.panel {
+  padding: 24px;
+  border: 1px solid #d9dee7;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding: 0 14px;
+  border: 1px solid #aeb8c8;
+  border-radius: 6px;
+  color: #17202a;
+  background: #fff;
+  cursor: pointer;
+}

package/templates/basic/src/middleware.ts

@@ -0,0 +1,17 @@
+import { defineMiddleware, sequence } from '@withl5e/l5e/middleware';
+
+const rewriteDemo = defineMiddleware((context, next) => {
+  if (context.url.pathname === '/rewrite-demo') {
+    return next('/');
+  }
+
+  return next();
+});
+
+const addPoweredBy = defineMiddleware(async (_context, next) => {
+  const response = await next();
+  response.headers.set('x-powered-by', 'L5E');
+  return response;
+});
+
+export const onRequest = sequence(rewriteDemo, addPoweredBy);

package/templates/basic/src/route.ts

@@ -0,0 +1,7 @@
+import type { RequestInfo } from '@withl5e/l5e/entry-server';
+
+export default function routeHandler(requestInfo: RequestInfo) {
+  if (requestInfo.pathname === '/') return 'home';
+  if (requestInfo.pathname === '/actions') return 'actions';
+  return null;
+}

package/templates/basic/src/views/actions/actions.css

@@ -0,0 +1,7 @@
+.actions-panel h1 {
+  margin: 0 0 12px;
+}
+
+.actions-panel button {
+  margin: 16px 0;
+}

package/templates/basic/src/views/actions/actions.tsx

@@ -0,0 +1,8 @@
+import { defineAction } from '@withl5e/l5e/action';
+
+export const loadServerTime = defineAction({
+  method: 'GET',
+  handler: () => {
+    return <span data-swap-target="server-time">{new Date().toISOString()}</span>;
+  },
+});

package/templates/basic/src/views/actions/client.ts

@@ -0,0 +1,10 @@
+import { createSwap } from '@withl5e/l5e/swap';
+import { loadServerTime } from './actions';
+
+createSwap({
+  trigger: '[data-load-time]',
+  target: '[data-swap-target="server-time"]',
+  select: '[data-swap-target="server-time"]',
+  swap: 'outerHTML',
+  action: () => loadServerTime({}),
+});

package/templates/basic/src/views/actions/index.tsx

@@ -0,0 +1,32 @@
+import { Fragment, useClientJs, useCss } from '@withl5e/l5e/jsx-runtime';
+import { MetadataRenderer } from '@withl5e/l5e/seo';
+
+export default function ActionsPage() {
+  useCss('./actions.css');
+  useClientJs('./client.ts');
+
+  return (
+    <>
+      <MetadataRenderer metadata={{ title: 'Action + swap example' }} />
+      <nav class="nav" aria-label="Primary">
+        <a href="/">Home</a>
+        <a href="/rewrite-demo">Rewrite demo</a>
+        <a href="/actions">Action + swap</a>
+      </nav>
+      <main>
+        <section class="panel actions-panel">
+          <h1>Action + swap</h1>
+          <p>
+            Click the button to call a server action and swap the returned HTML into the page.
+          </p>
+          <button class="button" type="button" data-load-time>
+            Load server time
+          </button>
+          <p>
+            Current value: <span data-swap-target="server-time">not loaded</span>
+          </p>
+        </section>
+      </main>
+    </>
+  );
+}

package/templates/basic/src/views/home/home.css

@@ -0,0 +1,13 @@
+.home-panel h1 {
+  margin: 0 0 12px;
+}
+
+.home-panel p {
+  max-width: 64ch;
+}
+
+.timestamp {
+  margin-top: 24px;
+  color: #5f6f85;
+  font-size: 0.95rem;
+}

package/templates/basic/src/views/home/index.tsx

@@ -0,0 +1,34 @@
+import { Fragment, useCss } from '@withl5e/l5e/jsx-runtime';
+import { MetadataRenderer } from '@withl5e/l5e/seo';
+
+import type { HomeLoaderData } from './loader';
+
+export default function HomePage({ now }: HomeLoaderData) {
+  useCss('./home.css');
+
+  return (
+    <>
+      <MetadataRenderer
+        metadata={{
+          title: 'L5E basic example',
+          description: 'A minimal L5E app with middleware rewrite and cache headers.',
+        }}
+      />
+      <nav class="nav" aria-label="Primary">
+        <a href="/">Home</a>
+        <a href="/rewrite-demo">Rewrite demo</a>
+        <a href="/actions">Action + swap</a>
+      </nav>
+      <main>
+        <section class="panel home-panel">
+          <h1>L5E basic example</h1>
+          <p>
+            This page is server-rendered. Visiting <a href="/rewrite-demo">/rewrite-demo</a>{' '}
+            renders the same home page through middleware rewrite.
+          </p>
+          <p class="timestamp">Rendered at {now}</p>
+        </section>
+      </main>
+    </>
+  );
+}

package/templates/basic/src/views/home/loader.ts

@@ -0,0 +1,17 @@
+import type { LoaderFunction, LoaderResult } from '@withl5e/l5e/entry-server';
+
+export type HomeLoaderData = {
+  now: string;
+};
+
+export const loader: LoaderFunction = async (): Promise<LoaderResult> => {
+  return {
+    props: {
+      now: new Date().toISOString(),
+    },
+    maxAge: 0,
+    sMaxAge: 60,
+    swr: 300,
+    cacheTags: ['home'],
+  };
+};

package/templates/basic/src/vite-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="vite/client" />
+
+declare module 'virtual:l5e-actions' {
+  export const viewActions: Record<string, () => Promise<Record<string, unknown>>>;
+}

package/templates/basic/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "moduleResolution": "Bundler",
+    "lib": ["ES2024", "DOM"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": false,
+    "noEmit": true,
+    "sourceMap": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "jsxFactory": "jsxFactory",
+    "jsxFragmentFactory": "Fragment",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*", "server.ts", "vite.config.js"]
+}

package/templates/basic/vite.config.js

@@ -0,0 +1,36 @@
+import { coreVite } from '@withl5e/l5e/vite-plugin';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig({
+  esbuild: {
+    jsx: 'preserve',
+  },
+  plugins: [coreVite()],
+  build: {
+    outDir: 'dist/client',
+    manifest: true,
+    rollupOptions: {
+      external: (id) => id === 'fsevents',
+    },
+  },
+  optimizeDeps: {
+    exclude: ['@withl5e/l5e'],
+  },
+  ssr: {
+    noExternal: ['@withl5e/l5e'],
+    external: ['rollup', 'esbuild', 'fsevents'],
+  },
+  resolve: {
+    alias: {
+      '~': path.resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    port: 5173,
+  },
+});

package/templates/minimal/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.env
+.env.local

package/templates/minimal/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!--app-head-->
+  </head>
+  <body>
+    <!--app-html-->
+    <!--app-scripts-->
+  </body>
+</html>

package/templates/minimal/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsx server.ts",
+    "build": "vite build && vite build --ssr src/entry-server.ts --outDir dist/server && vite build --ssr server.ts --outDir dist --emptyOutDir false",
+    "preview": "cross-env NODE_ENV=production node dist/server.js",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@withl5e/l5e": "^0.1.0-alpha.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "cross-env": "^7.0.3",
+    "tsx": "^4.7.0",
+    "typescript": "^5.6.3",
+    "vite": "^7.1.5"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  }
+}

package/templates/minimal/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/templates/minimal/server.ts

@@ -0,0 +1,8 @@
+import { startServer } from '@withl5e/l5e/server';
+
+startServer({
+  root: process.cwd(),
+  port: Number(process.env.PORT) || 5173,
+  base: '/',
+  publicDir: './public',
+});

package/templates/minimal/src/client.global.ts

@@ -0,0 +1 @@
+import './global.css';

package/templates/minimal/src/entry-server.ts

@@ -0,0 +1,4 @@
+export { loadMiddleware, render } from '@withl5e/l5e/entry-server';
+export { runInRenderContext } from '@withl5e/l5e/jsx-runtime';
+export { renderJsxToHtmlString } from '@withl5e/l5e';
+export { viewActions } from 'virtual:l5e-actions';

package/templates/minimal/src/global.css

@@ -0,0 +1,41 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #17202a;
+  background: #f6f7f9;
+}
+
+a {
+  color: #0f6bff;
+}
+
+main {
+  width: min(920px, calc(100% - 32px));
+  margin: 48px auto;
+}
+
+.nav {
+  display: flex;
+  gap: 16px;
+  padding: 16px 24px;
+  border-bottom: 1px solid #d9dee7;
+  background: #fff;
+}
+
+.panel {
+  padding: 24px;
+  border: 1px solid #d9dee7;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.timestamp {
+  margin-top: 24px;
+  color: #5f6f85;
+  font-size: 0.95rem;
+}

package/templates/minimal/src/route.ts

@@ -0,0 +1,6 @@
+import type { RequestInfo } from '@withl5e/l5e/entry-server';
+
+export default function routeHandler(requestInfo: RequestInfo) {
+  if (requestInfo.pathname === '/') return 'home';
+  return null;
+}

package/templates/minimal/src/views/home/home.css

@@ -0,0 +1,7 @@
+.home-panel h1 {
+  margin: 0 0 12px;
+}
+
+.home-panel p {
+  max-width: 64ch;
+}

package/templates/minimal/src/views/home/index.tsx

@@ -0,0 +1,29 @@
+import { Fragment, useCss } from '@withl5e/l5e/jsx-runtime';
+import { MetadataRenderer } from '@withl5e/l5e/seo';
+
+import type { HomeLoaderData } from './loader';
+
+export default function HomePage({ now }: HomeLoaderData) {
+  useCss('./home.css');
+
+  return (
+    <>
+      <MetadataRenderer
+        metadata={{
+          title: 'L5E starter',
+          description: 'A minimal L5E app.',
+        }}
+      />
+      <nav class="nav" aria-label="Primary">
+        <a href="/">Home</a>
+      </nav>
+      <main>
+        <section class="panel home-panel">
+          <h1>L5E starter</h1>
+          <p>This page is server-rendered by L5E.</p>
+          <p class="timestamp">Rendered at {now}</p>
+        </section>
+      </main>
+    </>
+  );
+}

package/templates/minimal/src/views/home/loader.ts

@@ -0,0 +1,17 @@
+import type { LoaderFunction, LoaderResult } from '@withl5e/l5e/entry-server';
+
+export type HomeLoaderData = {
+  now: string;
+};
+
+export const loader: LoaderFunction = async (): Promise<LoaderResult> => {
+  return {
+    props: {
+      now: new Date().toISOString(),
+    },
+    maxAge: 0,
+    sMaxAge: 60,
+    swr: 300,
+    cacheTags: ['home'],
+  };
+};

package/templates/minimal/src/vite-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="vite/client" />
+
+declare module 'virtual:l5e-actions' {
+  export const viewActions: Record<string, () => Promise<Record<string, unknown>>>;
+}

package/templates/minimal/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "moduleResolution": "Bundler",
+    "lib": ["ES2024", "DOM"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": false,
+    "noEmit": true,
+    "sourceMap": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "jsxFactory": "jsxFactory",
+    "jsxFragmentFactory": "Fragment",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*", "server.ts", "vite.config.js"]
+}

package/templates/minimal/vite.config.js

@@ -0,0 +1,36 @@
+import { coreVite } from '@withl5e/l5e/vite-plugin';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig({
+  esbuild: {
+    jsx: 'preserve',
+  },
+  plugins: [coreVite()],
+  build: {
+    outDir: 'dist/client',
+    manifest: true,
+    rollupOptions: {
+      external: (id) => id === 'fsevents',
+    },
+  },
+  optimizeDeps: {
+    exclude: ['@withl5e/l5e'],
+  },
+  ssr: {
+    noExternal: ['@withl5e/l5e'],
+    external: ['rollup', 'esbuild', 'fsevents'],
+  },
+  resolve: {
+    alias: {
+      '~': path.resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    port: 5173,
+  },
+});