create-foldkit-app 0.26.0 → 0.27.1

package/README.md

@@ -1,6 +1,6 @@
 # create-foldkit-app
 
-Scaffolding CLI for new Foldkit applications. Creates a ready-to-run project with Vite, Tailwind CSS, TypeScript, [`@foldkit/vite-plugin`](https://www.npmjs.com/package/@foldkit/vite-plugin) for hot reloading with Model preservation, and your choice of starter example.
+Scaffolding CLI for new Foldkit applications. Creates a ready-to-run project with Vite, Tailwind CSS, TypeScript, [`@foldkit/vite-plugin`](https://www.npmjs.com/package/@foldkit/vite-plugin) for hot reloading with Model preservation, your choice of rendering mode, and a starter example for SPA scaffolds.
 
 ## Usage
 
@@ -14,7 +14,17 @@ yarn create foldkit-app
 bun create foldkit-app
 ```
 
-The CLI prompts you for a project name, starter example, and package manager. Pass `--name`, `--example`, and/or `--package-manager` to skip the matching prompts.
+The CLI prompts you for a project name, rendering mode, starter example, and package manager. Pass `--name`, `--rendering`, `--example`, and/or `--package-manager` to skip the matching prompts.
+
+## Rendering
+
+| Mode  | Description                                                                                                                                                                    |
+| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `spa` | Render entirely in the browser. Starts from your choice of starter example below.                                                                                              |
+| `ssg` | Prerender routes to static HTML at build time, then hydrate in the browser. Scaffolds a small routed app with a server entry and a prerender script.                           |
+| `ssr` | Render each request on a Node server, then hydrate in the browser. Scaffolds a counter whose Flags come from the request, plus an Effect HttpServer host and a `start` script. |
+
+The starter examples apply to `spa` rendering. The `ssg` and `ssr` modes scaffold their own starter apps.
 
 ## Examples
 

package/dist/commands/create.js

@@ -1,8 +1,9 @@
 import chalk from 'chalk';
-import { Console, Effect, FileSystem, Option, Path } from 'effect';
+import { Console, Effect, FileSystem, Match, Option, Path, pipe } from 'effect';
 import { Prompt } from 'effect/unstable/cli';
 import { spawnSync } from 'node:child_process';
 import { examples } from '../examples.js';
+import { Scaffold, renderings } from '../rendering.js';
 import { createProject } from '../utils/files.js';
 import { devCommand, installDependencies, } from '../utils/packages.js';
 import { validateProjectName } from '../validateName.js';
@@ -14,6 +15,14 @@ const promptForName = Prompt.text({
         onSome: message => Effect.fail(message),
     }),
 });
+const promptForRendering = Prompt.select({
+    message: 'Pick a rendering mode',
+    choices: renderings.map(({ value, title, description }) => ({
+        value,
+        title,
+        description,
+    })),
+});
 const promptForExample = Prompt.autoComplete({
     message: 'Pick a starting example',
     choices: examples.map(({ value, title, description }) => ({
@@ -31,20 +40,28 @@ const promptForPackageManager = Prompt.select({
         { value: 'bun', title: 'bun' },
     ],
 });
+const resolveScaffold = (rendering, maybeExample) => Match.value(rendering).pipe(Match.when('spa', () => pipe(maybeExample, Option.match({
+    onNone: () => promptForExample,
+    onSome: Effect.succeed,
+}), Effect.map(example => Scaffold.Spa({ example })))), Match.when('ssg', () => Effect.succeed(Scaffold.Ssg())), Match.when('ssr', () => Effect.succeed(Scaffold.Ssr())), Match.exhaustive);
 const resolveInput = (input) => Effect.gen(function* () {
     const name = yield* Option.match(input.name, {
         onNone: () => promptForName,
         onSome: Effect.succeed,
     });
-    const example = yield* Option.match(input.example, {
-        onNone: () => promptForExample,
+    const rendering = yield* Option.match(input.rendering, {
+        onNone: () => promptForRendering,
         onSome: Effect.succeed,
     });
+    if (rendering !== 'spa' && Option.isSome(input.example)) {
+        yield* Effect.fail('The --example flag only applies to spa rendering.');
+    }
+    const scaffold = yield* resolveScaffold(rendering, input.example);
     const packageManager = yield* Option.match(input.packageManager, {
         onNone: () => promptForPackageManager,
         onSome: Effect.succeed,
     });
-    return { name, example, packageManager };
+    return { name, scaffold, packageManager };
 });
 const validateProject = (name, projectPath, packageManager) => Effect.gen(function* () {
     const fs = yield* FileSystem.FileSystem;
@@ -60,16 +77,16 @@ const validateProject = (name, projectPath, packageManager) => Effect.gen(functi
         return yield* Effect.fail(`Package manager '${packageManager}' is not available. Please install it first.`);
     }
 });
-const setupProject = (name, projectPath, example, packageManager) => Effect.gen(function* () {
+const setupProject = (name, projectPath, scaffold, packageManager) => Effect.gen(function* () {
     yield* Console.log(chalk.blue('🚀 Creating your Foldkit app...'));
     yield* Console.log('');
-    yield* createProject(name, projectPath, example, packageManager);
+    yield* createProject(name, projectPath, scaffold, packageManager);
     yield* Console.log(chalk.green(`✅ Created project`));
     yield* Console.log('');
 });
-const installProjectDependencies = (projectPath, packageManager, example) => Effect.gen(function* () {
+const installProjectDependencies = (projectPath, packageManager, scaffold) => Effect.gen(function* () {
     yield* Console.log(chalk.blue(`📦 Installing dependencies with ${packageManager}...`));
-    yield* installDependencies(projectPath, packageManager, example);
+    yield* installDependencies(projectPath, packageManager, scaffold);
     yield* Console.log(chalk.green('✅ Dependencies installed'));
     yield* Console.log('');
 });
@@ -113,12 +130,12 @@ const displaySuccessMessage = (name, packageManager) => Effect.gen(function* ()
     yield* Console.log('');
 });
 export const create = (input) => Effect.gen(function* () {
-    const { name, example, packageManager } = yield* resolveInput(input);
+    const { name, scaffold, packageManager } = yield* resolveInput(input);
     const path = yield* Path.Path;
     const projectPath = path.resolve(name);
     yield* validateProject(name, projectPath, packageManager);
-    yield* setupProject(name, projectPath, example, packageManager);
-    yield* installProjectDependencies(projectPath, packageManager, example);
+    yield* setupProject(name, projectPath, scaffold, packageManager);
+    yield* installProjectDependencies(projectPath, packageManager, scaffold);
     yield* displaySuccessMessage(name, packageManager);
     return name;
 });

package/dist/index.js

@@ -6,6 +6,7 @@ import { createRequire } from 'node:module';
 import { NodeRuntime, NodeServices, NodeStdio } from '@effect/platform-node';
 import { create as create_ } from './commands/create.js';
 import { EXAMPLE_VALUES } from './examples.js';
+import { RENDERING_VALUES } from './rendering.js';
 import { validateProjectName } from './validateName.js';
 /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
 const packageJson = createRequire(import.meta.url)('../package.json');
@@ -14,7 +15,8 @@ const nameSchema = Schema.String.pipe(Schema.check(Schema.makeFilter(value => Op
     onSome: message => message,
 }))));
 const name = Flag.string('name').pipe(Flag.withAlias('n'), Flag.withDescription('The name of the project to create'), Flag.withSchema(nameSchema), Flag.optional);
-const example = Flag.choice('example', EXAMPLE_VALUES).pipe(Flag.withAlias('e'), Flag.withDescription("The example application to start from. Run with no flags for an interactive picker that shows each example's description."), Flag.optional);
+const rendering = Flag.choice('rendering', RENDERING_VALUES).pipe(Flag.withAlias('r'), Flag.withDescription('How the application renders: spa renders entirely in the browser, ssg prerenders routes to static HTML at build time, ssr renders each request on a Node server'), Flag.optional);
+const example = Flag.choice('example', EXAMPLE_VALUES).pipe(Flag.withAlias('e'), Flag.withDescription("The example application to start from with spa rendering. Run with no flags for an interactive picker that shows each example's description."), Flag.optional);
 const packageManager = Flag.choice('package-manager', [
     'pnpm',
     'npm',
@@ -23,6 +25,7 @@ const packageManager = Flag.choice('package-manager', [
 ]).pipe(Flag.withAlias('p'), Flag.withDescription('The package manager to use for installing dependencies'), Flag.optional);
 const create = Command.make('create', {
     name,
+    rendering,
     example,
     packageManager,
 }, create_).pipe(Command.withDescription('Create a new Foldkit application'));

package/dist/rendering.js

@@ -0,0 +1,20 @@
+import { Data } from 'effect';
+export const RENDERING_VALUES = ['spa', 'ssg', 'ssr'];
+export const renderings = [
+    {
+        value: 'spa',
+        title: 'SPA',
+        description: 'Render entirely in the browser',
+    },
+    {
+        value: 'ssg',
+        title: 'SSG',
+        description: 'Prerender routes to static HTML at build time, then hydrate in the browser',
+    },
+    {
+        value: 'ssr',
+        title: 'SSR',
+        description: 'Render each request on a Node server, then hydrate in the browser',
+    },
+];
+export const Scaffold = Data.taggedEnum();

package/dist/utils/files.js

@@ -1,7 +1,7 @@
 import { Array, Effect, FileSystem, Match, Option, Path, Record, Ref, Schema, String, pipe, } from 'effect';
 import { HttpClient, HttpClientRequest, } from 'effect/unstable/http';
 import { fileURLToPath } from 'node:url';
-import { devCommand, installCommand } from './packages.js';
+import { devCommand, installCommand, runScriptCommand, } from './packages.js';
 const GITHUB_API_BASE_URL = 'https://api.github.com/repos/foldkit/foldkit/contents/examples';
 const getTemplateRoot = Effect.gen(function* () {
     const path = yield* Path.Path;
@@ -72,13 +72,29 @@ const createPackageManagerFiles = (projectPath, packageManager) => Effect.gen(fu
     const packageManagerFiles = yield* getPackageManagerFiles(packageManager);
     yield* createFiles(projectPath, packageManagerFiles);
 });
-export const createProject = (name, projectPath, example, packageManager) => Effect.gen(function* () {
+const overlayRenderingFiles = (projectPath, directory) => Effect.gen(function* () {
+    const path = yield* Path.Path;
+    const templateRoot = yield* getTemplateRoot;
+    const renderingFiles = yield* getTemplateFiles(path.join(templateRoot, 'rendering', directory));
+    yield* createFiles(projectPath, renderingFiles);
+});
+const createRenderingFiles = (projectPath, scaffold) => Match.value(scaffold).pipe(Match.tagsExhaustive({
+    Spa: () => Effect.void,
+    Ssg: () => overlayRenderingFiles(projectPath, 'ssg'),
+    Ssr: () => overlayRenderingFiles(projectPath, 'ssr'),
+}));
+export const createProject = (name, projectPath, scaffold, packageManager) => Effect.gen(function* () {
     yield* createBaseFiles(projectPath);
+    yield* createRenderingFiles(projectPath, scaffold);
     yield* modifyBaseFiles(projectPath, name, packageManager);
     yield* createPackageManagerFiles(projectPath, packageManager);
-    yield* createExampleFiles(projectPath, example);
+    yield* Match.value(scaffold).pipe(Match.tagsExhaustive({
+        Spa: ({ example }) => createExampleFiles(projectPath, example),
+        Ssg: () => Effect.void,
+        Ssr: () => Effect.void,
+    }));
 });
-export const applyPackageManager = (readme, packageManager) => pipe(readme, String.replace('{{installCommand}}', installCommand(packageManager)), String.replace('{{devCommand}}', devCommand(packageManager)));
+export const applyPackageManager = (readme, packageManager) => pipe(readme, String.replaceAll('{{installCommand}}', installCommand(packageManager)), String.replaceAll('{{devCommand}}', devCommand(packageManager)), String.replaceAll('{{buildCommand}}', runScriptCommand(packageManager, 'build')), String.replaceAll('{{previewCommand}}', runScriptCommand(packageManager, 'preview')), String.replaceAll('{{startCommand}}', runScriptCommand(packageManager, 'start')));
 const modifyBaseFiles = (projectPath, name, packageManager) => Effect.gen(function* () {
     const fs = yield* FileSystem.FileSystem;
     const path = yield* Path.Path;

package/dist/utils/packages.js

@@ -1,4 +1,4 @@
-import { Array, Effect, FileSystem, Match, Order, Path, Record, Result, Schema, pipe, } from 'effect';
+import { Array, Data, Effect, FileSystem, Match, Order, Path, Record, Result, Schema, pipe, } from 'effect';
 import { HttpClient, HttpClientRequest } from 'effect/unstable/http';
 import { spawn } from 'node:child_process';
 export const installCommand = (packageManager) => `${packageManager} install`;
@@ -9,6 +9,13 @@ const DEV_COMMANDS = {
     bun: 'bun dev',
 };
 export const devCommand = (packageManager) => DEV_COMMANDS[packageManager];
+const RUN_SCRIPT_PREFIXES = {
+    pnpm: 'pnpm',
+    npm: 'npm run',
+    yarn: 'yarn',
+    bun: 'bun run',
+};
+export const runScriptCommand = (packageManager, script) => `${RUN_SCRIPT_PREFIXES[packageManager]} ${script}`;
 const GITHUB_RAW_BASE_URL = 'https://raw.githubusercontent.com/foldkit/foldkit/main/examples';
 const NPM_REGISTRY_BASE_URL = 'https://registry.npmjs.org';
 const FOLDKIT_SCOPE_PREFIX = '@foldkit/';
@@ -38,15 +45,16 @@ const TEMPLATE_DEV_DEPENDENCIES = [
     'prettier',
     'vitest',
 ];
+const SERVER_RENDERING_DEV_DEPENDENCIES = ['@types/node'];
 const isFoldkitPackage = (name) => name === 'foldkit' || name.startsWith(FOLDKIT_SCOPE_PREFIX);
-const Keep = (version) => ({ _tag: 'Keep', version });
-const Latest = { _tag: 'Latest' };
+const UnresolvedSpec = Data.taggedEnum();
+const { Keep, Latest } = UnresolvedSpec;
 const toUnresolvedSpec = (spec, name) => {
     if (spec.includes('workspace:')) {
-        return isFoldkitPackage(name) ? Result.succeed(Latest) : Result.failVoid;
+        return isFoldkitPackage(name) ? Result.succeed(Latest()) : Result.failVoid;
     }
     else {
-        return Result.succeed(Keep(spec));
+        return Result.succeed(Keep({ version: spec }));
     }
 };
 /**
@@ -58,14 +66,35 @@ const toUnresolvedSpec = (spec, name) => {
 export const buildUnresolvedDeps = (exampleDeps) => Record.filterMap(exampleDeps, toUnresolvedSpec);
 /**
  * Build the devDependency map for a scaffolded project by merging the always-on
- * template tooling with the example's own `devDependencies`. A concrete version
- * from the example wins over the template's latest marker for the same package.
+ * template tooling and any extra scaffold devDependencies with the example's
+ * own `devDependencies`. A concrete version from the example wins over a
+ * latest marker for the same package.
  */
-export const buildUnresolvedDevDeps = (exampleDevDeps) => {
-    const templateSpecs = Record.fromIterableWith(TEMPLATE_DEV_DEPENDENCIES, name => [name, Latest]);
+export const buildUnresolvedDevDeps = (exampleDevDeps, extraDevDependencies) => {
+    const templateSpecs = Record.fromIterableWith([...TEMPLATE_DEV_DEPENDENCIES, ...extraDevDependencies], name => [name, Latest()]);
     const exampleSpecs = Record.filterMap(exampleDevDeps, toUnresolvedSpec);
     return Record.union(templateSpecs, exampleSpecs, (_templateSpec, exampleSpec) => exampleSpec);
 };
+/**
+ * The repo example whose `package.json` supplies a scaffold's dependency
+ * versions. An SPA scaffold reads from its chosen starter example; the SSG and
+ * SSR scaffolds read from the reference apps their overlay files mirror.
+ */
+export const dependencyExample = (scaffold) => Match.value(scaffold).pipe(Match.tagsExhaustive({
+    Spa: ({ example }) => example,
+    Ssg: () => 'ssg',
+    Ssr: () => 'ssr',
+}));
+/**
+ * The devDependencies a scaffold needs beyond the template tooling and the
+ * example's own list. The server-rendered scaffolds ship Node build and host
+ * scripts, so they need `@types/node` to typecheck.
+ */
+export const scaffoldDevDependencies = (scaffold) => Match.value(scaffold).pipe(Match.tagsExhaustive({
+    Spa: () => [],
+    Ssg: () => SERVER_RENDERING_DEV_DEPENDENCIES,
+    Ssr: () => SERVER_RENDERING_DEV_DEPENDENCIES,
+}));
 const resolveLatestVersion = (name) => Effect.gen(function* () {
     const client = yield* HttpClient.HttpClient;
     const encodedName = name.replace('/', '%2F');
@@ -130,10 +159,10 @@ const runCommand = (command, args, cwd) => Effect.callback((resume) => {
         }
     });
 });
-export const installDependencies = (projectPath, packageManager, example) => Effect.gen(function* () {
-    const examplePackageJson = yield* fetchExamplePackageJson(example);
+export const installDependencies = (projectPath, packageManager, scaffold) => Effect.gen(function* () {
+    const examplePackageJson = yield* fetchExamplePackageJson(dependencyExample(scaffold));
     const dependencies = yield* resolveSpecs(buildUnresolvedDeps(examplePackageJson.dependencies));
-    const devDependencies = yield* resolveSpecs(buildUnresolvedDevDeps(examplePackageJson.devDependencies));
+    const devDependencies = yield* resolveSpecs(buildUnresolvedDevDeps(examplePackageJson.devDependencies, scaffoldDevDependencies(scaffold)));
     yield* writeManifest(projectPath, sortDependencies(dependencies), sortDependencies(devDependencies));
     yield* runCommand(packageManager, ['install'], projectPath);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-foldkit-app",
-  "version": "0.26.0",
+  "version": "0.27.1",
   "description": "Create Foldkit applications",
   "type": "module",
   "main": "./dist/index.js",

package/templates/package-managers/pnpm/pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 allowBuilds:
+  esbuild: true
   msgpackr-extract: false

package/templates/rendering/ssg/README.md

@@ -0,0 +1,61 @@
+# My Foldkit App
+
+A statically generated Foldkit application built with Effect.
+
+## Getting Started
+
+```bash
+{{installCommand}}
+{{devCommand}}
+```
+
+## Building and previewing
+
+```bash
+{{buildCommand}}
+{{previewCommand}}
+```
+
+The build script runs `scripts/build.mjs`, which builds the client bundle, builds
+the server bundle, prerenders every path `src/entry.server.ts` lists, and gives
+all three steps the same build id.
+
+## The build id
+
+The build id does not make hydration correct. It makes hydration refuse when it
+would otherwise be incorrect.
+
+The generated page carries the id, and the client bundle carries its own copy.
+Hydration compares the two before it reads the Flags payload or adopts DOM.
+When they differ, startup stops and the document body is marked `inert`,
+`aria-hidden`, and `data-foldkit-refused`. A nondismissable modal shield covers
+its controls and existing top-layer content, then takes focus without closing
+author-owned dialogs. Nothing moves, so no custom element reconnects and no
+frame reloads.
+
+Without that check, stale HTML from an earlier deployment can be hydrated by the
+newer client. Where the old markup happens to line up with the new markup,
+an input the old page called `email` can be adopted for whatever the new build
+puts in that position, carrying what the visitor typed into it.
+
+The comparison happens when a client boots against a page. A tab whose client
+is already running when a deployment lands is not rechecked.
+
+`scripts/build.mjs` takes care of this: it produces one id per build and passes
+it to every step. Supply `FOLDKIT_BUILD_ID` when those steps run in separate
+jobs, or when you want the served id to name a deployment you can look up later:
+
+```bash
+FOLDKIT_BUILD_ID="$CI_DEPLOYMENT_ID" {{buildCommand}}
+```
+
+The id is public HTML and must never contain a secret or be derived from one.
+Every step of one deployment must share an id. By contrast, two deployments
+must never share one. Reusing an id produces no warning: the ids agree, so
+hydration proceeds. When in doubt, leave `FOLDKIT_BUILD_ID` unset and let the
+build script generate one.
+
+## Learn More
+
+- [Foldkit Documentation](https://github.com/foldkit/foldkit)
+- [Effect Documentation](https://effect.website)

package/templates/rendering/ssg/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{name}}",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "node scripts/build.mjs",
+    "preview": "vite preview --outDir dist/client",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier -w .",
+    "test": "vitest run",
+    "lint": "oxlint src scripts"
+  }
+}

package/templates/rendering/ssg/scripts/build.mjs

@@ -0,0 +1,40 @@
+import { spawnSync } from 'node:child_process'
+import { randomUUID } from 'node:crypto'
+
+// NOTE: one id names this build, and every command below is given that same
+// id, so the client bundle and the server bundle of a deployment agree on which
+// deployment they are. `renderToString` stamps it on the prerendered pages and
+// `Runtime.hydrate` compares it before adopting any DOM, so a page left over
+// from an earlier deployment is refused and contained rather than reconciled
+// against a client that no longer means the same thing by it.
+//
+// The id is published in the HTML every visitor receives. It identifies a
+// deployment and is never a credential, so keep secrets out of it. Set
+// FOLDKIT_BUILD_ID to name builds from a value the deployment already has, such
+// as a commit or a release tag; without one, each build takes a fresh id.
+// NOTE: `??` alone would take an empty FOLDKIT_BUILD_ID as a real value, and
+// the plugin treats empty as absent, so the build would compile no id at all and
+// fail later at the render. Empty is unset here too.
+const supplied = process.env.FOLDKIT_BUILD_ID
+const buildId =
+  supplied === undefined || supplied === '' ? randomUUID() : supplied
+
+const steps = [
+  ['vite', ['build', '--outDir', 'dist/client']],
+  [
+    'vite',
+    ['build', '--ssr', 'src/entry.server.ts', '--outDir', 'dist/server'],
+  ],
+  ['tsx', ['scripts/prerender.ts']],
+]
+
+for (const [command, args] of steps) {
+  const { status } = spawnSync(command, args, {
+    stdio: 'inherit',
+    shell: process.platform === 'win32',
+    env: { ...process.env, FOLDKIT_BUILD_ID: buildId },
+  })
+  if (status !== 0) {
+    process.exit(status ?? 1)
+  }
+}

package/templates/rendering/ssg/scripts/prerender.ts

@@ -0,0 +1,71 @@
+import { Console, Effect, FileSystem } from 'effect'
+import { Server } from 'foldkit/experimental'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+
+import { NodeRuntime, NodeServices } from '@effect/platform-node'
+
+import type * as ServerEntry from '../src/entry.server'
+
+const SCRIPT_DIR = dirname(fileURLToPath(import.meta.url))
+const PROJECT_DIR = resolve(SCRIPT_DIR, '..')
+const CLIENT_DIR = resolve(PROJECT_DIR, 'dist/client')
+const SERVER_ENTRY_PATH = resolve(PROJECT_DIR, 'dist/server/entry.server.js')
+const SITE_ORIGIN = 'https://example.com'
+
+const loadServerEntry: Effect.Effect<typeof ServerEntry> = Effect.promise(
+  () => import(pathToFileURL(SERVER_ENTRY_PATH).href),
+)
+
+const outputFileFor = (path: string): string => {
+  const url = new URL(path, SITE_ORIGIN)
+  if (url.origin !== SITE_ORIGIN || url.pathname !== path) {
+    throw new Error(
+      `Cannot generate the non-normalized same-origin path "${path}".`,
+    )
+  }
+  return path === '/'
+    ? resolve(CLIENT_DIR, 'index.html')
+    : resolve(CLIENT_DIR, path.slice(1), 'index.html')
+}
+
+const program = Effect.gen(function* () {
+  const fs = yield* FileSystem.FileSystem
+  const template = yield* fs.readFileString(resolve(CLIENT_DIR, 'index.html'))
+  const serverEntry = yield* loadServerEntry
+
+  for (const path of serverEntry.prerenderPaths) {
+    const result = yield* Effect.promise(() =>
+      serverEntry.renderPage(new Request(`${SITE_ORIGIN}${path}`)),
+    )
+    if (result._tag === 'Responded') {
+      return yield* Effect.die(
+        new Error(
+          `Cannot write the complete Response returned while generating "${path}" to a static HTML file.`,
+        ),
+      )
+    }
+    if (result.status !== undefined && result.status !== 200) {
+      return yield* Effect.die(
+        new Error(
+          `Cannot preserve status ${result.status} while generating "${path}" as a static HTML file.`,
+        ),
+      )
+    }
+    if (result.headers !== undefined) {
+      return yield* Effect.die(
+        new Error(
+          `Cannot preserve response headers while generating "${path}" as a static HTML file.`,
+        ),
+      )
+    }
+    const html = Server.injectIntoTemplate(template, result.application)
+    const outputFile = outputFileFor(path)
+
+    yield* fs.makeDirectory(dirname(outputFile), { recursive: true })
+    yield* fs.writeFileString(outputFile, html)
+    yield* Console.log(`Generated ${path}`)
+  }
+}).pipe(Effect.provide(NodeServices.layer))
+
+NodeRuntime.runMain(program)

package/templates/rendering/ssg/src/entry.server.ts

@@ -0,0 +1,18 @@
+import { Effect } from 'effect'
+import { Server } from 'foldkit/experimental'
+
+import { init, view } from './main'
+
+export const prerenderPaths: ReadonlyArray<string> = ['/', '/about']
+
+export const renderPage = (request: Request): Promise<Server.EntryResult> =>
+  Effect.runPromise(
+    Effect.gen(function* () {
+      const renderedApplication = yield* Server.renderToString(
+        { routing: {}, init, view },
+        { url: request.url, buildId: import.meta.env.FOLDKIT_BUILD_ID },
+      )
+
+      return Server.Rendered(renderedApplication)
+    }),
+  )

package/templates/rendering/ssg/src/entry.ts

@@ -0,0 +1,28 @@
+import { Runtime } from 'foldkit'
+
+import {
+  ChangedUrl,
+  ClickedLink,
+  Message,
+  Model,
+  init,
+  update,
+  view,
+} from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  init,
+  update,
+  view,
+  container: document.getElementById('root'),
+  routing: {
+    onUrlRequest: request => ClickedLink({ request }),
+    onUrlChange: url => ChangedUrl({ url }),
+  },
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.hydrate(application, { buildId: import.meta.env.FOLDKIT_BUILD_ID })