Foldkit | Workers 简体中文

Foldkit supports single-page applications (SPA), static site generation (SSG), and server-side rendering (SSR). Each mode uses Workers Assets to serve browser files. SSR also runs a Worker fetch handler.

You need Node.js 22.22.2 or newer and a Cloudflare account.

Create a Foldkit application

Create a project with create-foldkit-app:

npm

yarn

pnpm

npx create-foldkit-app@latest --name my-foldkit-app

yarn dlx create-foldkit-app@latest --name my-foldkit-app

pnpx create-foldkit-app@latest --name my-foldkit-app

Choose a rendering mode when prompted. For SPA, choose the routing example. Select npm as the package manager.

In the project directory, install Wrangler:

cd my-foldkit-app

npm

yarn

pnpm

bun

npm i -D wrangler

yarn add -D wrangler

pnpm add -D wrangler

bun add -d wrangler

Configure your rendering mode

In the project directory, create a wrangler.jsonc file with the configuration for your rendering mode.

SPA

The SPA build writes index.html and browser assets to dist. The single-page-application setting serves index.html when a client-side route does not match an asset.

wrangler.jsonc

wrangler.toml

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "my-foldkit-app",
  // Set this to today's date
  "compatibility_date": "2026-11-02",
  "assets": {
    "directory": "./dist",
    "not_found_handling": "single-page-application"
  }
}

name = "my-foldkit-app"
# Set this to today's date
compatibility_date = "2026-11-02"

[assets]
directory = "./dist"
not_found_handling = "single-page-application"

SSG

The SSG build uses a server bundle to prerender routes, then writes HTML and browser assets to dist/client. Deploy only dist/client with Workers Assets.

wrangler.jsonc

wrangler.toml

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "my-foldkit-app",
  // Set this to today's date
  "compatibility_date": "2026-11-02",
  "assets": {
    "directory": "./dist/client"
  }
}

name = "my-foldkit-app"
# Set this to today's date
compatibility_date = "2026-11-02"

[assets]
directory = "./dist/client"

SSR

The SSR build writes a Web fetch handler to dist/server/fetch.js and browser assets to dist/client. The Worker handles page requests, while Workers Assets serves the browser files.

wrangler.jsonc

wrangler.toml

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "my-foldkit-app",
  "main": "./dist/server/fetch.js",
  // Set this to today's date
  "compatibility_date": "2026-11-02",
  "assets": {
    "directory": "./dist/client"
  }
}

name = "my-foldkit-app"
main = "./dist/server/fetch.js"
# Set this to today's date
compatibility_date = "2026-11-02"

[assets]
directory = "./dist/client"

Preview and deploy

Build the application:

npm

yarn

pnpm

npm run build

yarn run build

pnpm run build

Preview it in the Workers runtime:
npm
yarn
pnpm
npx wrangler dev
yarn wrangler dev
pnpm wrangler dev
Open the local URL printed by Wrangler. For SPA, open /people and reload it. For SSG, visit /about/. For SSR, increment the counter and reload. Its cookie-backed value should persist.

Build and deploy the application:

npm

yarn

pnpm

npm run build

yarn run build

pnpm run build

npm

yarn

pnpm

npx wrangler deploy

yarn wrangler deploy

pnpm wrangler deploy

Open the workers.dev URL printed by Wrangler to verify the deployed application. For more information about SSG and SSR builds, refer to Foldkit's server rendering guide.