A minimal, file-based SSR framework for Node.js with Nunjucks templating.
Current release:
0.1.0-alpha.0— Hono-based HTTP stack, production build compiler, and Cloudflare Workers adapter. See What's new and CHANGELOG.md.
New to Webspresso? Follow docs/getting-started.md for a 15-minute walkthrough (page, API, model, migrations, admin). Example apps: examples/.
Highlights in 0.1.0-alpha.0 (see CHANGELOG.md for the full list):
| Area | Summary |
|---|---|
| HTTP runtime | Hono under the hood; handlers still use (req, res, next) and app.listen() via compat wrappers. |
| Production build | webspresso build --adapter node|cloudflare|bun — discover → analyze → compile → manifest → bundle → validate; output under .webspresso/. |
| Cloudflare Workers | webspresso add deploy --provider cloudflare scaffolds Wrangler + webspresso.build.js; build emits precompiled templates.mjs (walks extends / include from views/). Worker entry uses createWorkerApp via webspresso/build/runtime/create-app-from-manifest (not the Node server bundle). |
| D1 on Workers | Wrangler env.DB → req.db / getDb() when the generated entry wires knex + knex-cloudflare-d1. |
| Package exports | Subpaths: webspresso/build, webspresso/core/auth, webspresso/core/orm, webspresso/plugins/*, plus split manifest helpers (create-app-from-manifest vs create-app-from-manifest-node). |
- File-Based Routing: Create pages by adding
.njkfiles to apages/directory - Dynamic Routes: Use
[param]for dynamic params and[...rest]for catch-all routes - API Endpoints: Add
.jsfiles topages/api/with method suffixes (e.g.,health.get.js) - Schema Validation: Zod-based request validation for body, params, and query
- Built-in i18n: JSON-based translations with automatic locale detection
- Lifecycle Hooks: Global and route-level hooks for request processing
- Template Helpers: Laravel-inspired helper functions available in templates
- Plugin System: Extensible architecture with version control and inter-plugin communication
- Built-in Plugins: Development dashboard, sitemap generator, SEO checker, analytics integration (Google, Yandex, Bing), self-hosted site analytics, optional Swagger UI for HTTP APIs, configurable HTTP health probe endpoint, optional REST CRUD routes from ORM models, optional admin UI for ORM query cache metrics and purge, optional admin-only spreadsheet exchange (Excel export, CSV/XLSX import via
dataExchangePlugin) - Session authentication (optional):
createAuth/quickAuthinwebspresso/core/auth— pass the manager tocreateApp({ auth })for encrypted cookie sessions (hono-sessions),req.user/req.auth, remember-me tokens, and policy-style authorization. Full walkthrough:doc/index.html#authentication. - Optional client runtime (Alpine.js + swup):
createApp({ clientRuntime: { alpine, swup } })serves scripts under/__webspresso/client-runtime/and exposesclientRuntimein Nunjucks; layouts can includeviews/partials/webspresso-client-runtime.njk. Env overrides:WEBSPRESSO_ALPINE,WEBSPRESSO_SWUP. Details:doc/index.html#client-runtime. - TypeScript: Published
index.d.ts(viapackage.json"types") forcreateApp, ORM, plugins, and router helpers — use from TS/JS with IDE autocomplete; runtime stays CommonJS - Application kernel (optional): In-process
kernelAPI (require('webspresso').kernel) — event bus (dispatch/publish),kernel.createApp()(namespaced differently from SSRcreateApp),definePlugin/defineFlow, minimal{{ }}view resolver, and simulatedBaseRepositorywithorm.<resource>.*events. Ships ascore/kernel/on npm. Demo:node core/kernel/run-demo.js. Docs:doc/index.html#application-kernel. - Production builds & Cloudflare Workers:
webspresso build --adapter cloudflareemits a Wrangler-ready worker (manifest, precompiled Nunjucks, static assets). Full guide:doc/index.html#cloudflare-workers· summary below in Deployment.
npm install -g webspresso
# or
npm install webspressoThe npm package ships with index.d.ts so consumers get typings for the public API (createApp, defineModel, createDatabase, zdb, plugins, etc.). No extra @types/webspresso package is required.
import { createApp, defineModel, zdb } from 'webspresso';index.d.ts exports WebspressoCompatApp, WebspressoRequest, and WebspressoResponse for route handlers and middleware (Express-shaped API on Hono). Install hono in your app if you need Hono core types when extending createApp().app. knex and zod bring their own types.
Framework development (this repo): run npm run check:types to typecheck the declarations against a small smoke file (tests/ts-smoke/).
Major versions use Hono instead of Express. Breaking changes:
| Before (Express) | After (Hono) |
|---|---|
createApp().app is express.Application |
createApp().app is WebspressoCompatApp (Hono + listen, get, post, …) |
express-session, cookie-parser, helmet, multer |
Built into Webspresso (hono-sessions, secure-headers, parseBody / upload plugin) |
app.listen(port) via Express |
Same call — implemented with @hono/node-server |
Custom middleware (req, res, next) |
Same signature; req / res are compat wrappers |
supertest in tests |
Use app.fetch or project test helper (tests/helpers/http.js) |
server.js scaffold (from webspresso new) still uses app.listen(PORT, callback) — no change required for basic apps.
Rate limiting: optional peer hono-rate-limiter; built-in rateLimitPlugin provides in-memory limiters for file routes.
Raw Hono: createApp().app._hono exposes the underlying Hono instance for advanced routing.
The npm exports field exposes focused entry points (CommonJS, with types on the root):
| Import | Use |
|---|---|
webspresso |
createApp, router utils, ORM re-exports, plugins index |
webspresso/build |
runBuild, BuildConfig, build diagnostics |
webspresso/build/runtime/create-app-from-manifest |
Cloudflare Worker manifest bootstrap → createWorkerApp |
webspresso/build/runtime/create-app-from-manifest-node |
Node manifest bootstrap (full server.js feature set) |
webspresso/core/auth |
createAuth, quickAuth, session middleware |
webspresso/core/orm |
defineModel, createDatabase, zdb |
webspresso/plugins/* |
Individual built-in plugins |
Use the worker manifest path in generated .webspresso/worker/index.mjs so Wrangler does not bundle bcrypt, admin plugins, or filesystem route scanning.
Do not confuse kernel.createApp() with the package root createApp used for SSR—it returns a different object (event bus, optional flows, and a minimal view resolver). It does not modify Knex ORM behavior or HTTP routing.
const { kernel } = require('webspresso');
const app = kernel.createApp();
app.events.on('orm.post.afterCreate', async (ctx) => { /* ... */ });See doc/index.html#application-kernel · source modules: core/kernel/. Cursor skill: REFERENCE-kernel.md (installed via webspresso skill --preset webspresso).
# Create a new project (Tailwind CSS included by default)
webspresso new my-app
# Navigate to project
cd my-app
# Install dependencies
npm install
# Build Tailwind CSS
npm run build:css
# Start development server (watches both CSS and server)
webspresso dev
# or
npm run devNote: New projects include Tailwind CSS by default. Use
--no-tailwindflag to skip it.
Create a new Webspresso project with Tailwind CSS (default).
# Create in a new directory
webspresso new my-app
# Create in current directory (interactive)
webspresso new
# → Prompts: "Install in current directory?"
# → If yes, asks for project name (for package.json)
# Auto install dependencies and build CSS
webspresso new my-app --install
# Without Tailwind
webspresso new my-app --no-tailwindInteractive Mode (no arguments):
- Asks if you want to install in the current directory
- If current directory is not empty, shows a warning
- Prompts for project name (defaults to current folder name)
- Asks if you will use a database (SQLite, PostgreSQL, or MySQL)
- If yes, adds the appropriate driver to
package.jsonand createswebspresso.db.jsconfig - After project creation, asks if you want to install dependencies
- If yes, runs
npm installandnpm run build:css - Then asks if you want to start the development server
- If yes, starts
npm run devautomatically
Auto Installation:
# With --install flag (semi-interactive)
webspresso new my-app --install
# → Automatically runs: npm install && npm run build:css
# → Then prompts: "Start development server?" [Y/n]
# → If yes: starts npm run dev (with watch:css if Tailwind enabled)
# Without --install flag (fully interactive)
webspresso new my-app
# → Prompts: "Install dependencies and build CSS now?" [Y/n]
# → If yes: runs npm install && npm run build:css
# → Then: "Start development server?" [Y/n]
# → If yes: starts npm run dev (with watch:css if Tailwind enabled)Note: When dev server starts with Tailwind CSS, it automatically runs watch:css in the background to watch for CSS changes.
Database Selection: During project creation, you'll be asked if you want to use a database:
- SQLite (better-sqlite3) - Recommended for development and small projects
- PostgreSQL (pg) - For production applications
- MySQL (mysql2) - Alternative SQL database
If you select a database:
- The appropriate driver is added to
package.jsondependencies webspresso.db.jsconfig file is created with proper settingsmigrations/directory is createdmodels/directory is createdDATABASE_URLis added to.env.examplewith a template
Scaffold: config/ and environment files
New projects include:
config/load-env.js— loads, in order,.env,.env.local,.env.${NODE_ENV}, and.env.${NODE_ENV}.local(each file overrides keys from earlier ones).config/env.schema.js— validatesprocess.envwith Zod before the app starts (PORT,NODE_ENV, i18n vars,BASE_URL, optionalDATABASE_URL).config/app.js— returnscreateApp()options (paths; ifwebspresso.db.jsexists, alsocreateDatabaseasdb).server.js— callsloadEnv(), thencreateApp(getCreateAppOptions()), thenlistenusing the parsedPORT.
Copy .env.example to .env (and use .env.local for machine-specific overrides). Patterns such as .env.development.local are gitignored via .env.*.local.
Seed Data Generation: After selecting a database, you'll be asked if you want to generate seed data:
- If yes,
@faker-js/fakeris added to dependencies seeds/directory is created withseeds/index.jsnpm run seedscript is added topackage.json- The seed script automatically detects models in
models/directory and generates fake data based on their schemas
To run seeds after creating models:
npm run seedThe seed script will:
- Load all models from
models/directory - Generate 10 fake records per model (by default)
- Use smart field detection based on column names (email, name, title, etc.)
You can always add database support later by:
- Installing the driver:
npm install better-sqlite3(orpg,mysql2) - Creating
webspresso.db.jsconfig file - Adding
DATABASE_URLto your.envfile - Creating
models/directory and defining your models - Optionally adding seed support:
npm install @faker-js/fakerand creatingseeds/index.js
Options:
-i, --install- Auto runnpm installandnpm run build:css(non-interactive)--no-tailwind- Skip Tailwind CSS setup
The project includes:
- Tailwind CSS with build process
- Optimized layout template with navigation and footer
- Responsive starter page
- i18n setup (e.g. en/de)
- Development and production scripts
Add a new page to your project (interactive prompt).
webspresso pageThe CLI will ask you:
- Route path (e.g.,
/aboutor/blog/post) - Whether to add a route config file
- Whether to add locale files
Add a new API endpoint (interactive prompt).
webspresso apiThe CLI will ask you:
- API route path (e.g.,
/api/usersor/api/users/[id]) - HTTP method (GET, POST, PUT, PATCH, DELETE)
Start development server with hot reload.
webspresso dev
# or with custom port
webspresso dev --port 3001Start production server.
webspresso start
# or with custom port
webspresso start --port 3000Check Node.js version, package.json / engines.node, lockfile, webspresso dependency, typical project files (server.js, pages/), session secrets, plugin scan (Node-only vs edge), and whether webspresso.db.js or knexfile.js exists. Use --db for a connection test and --migrations for pending migrations. Warnings alone exit with code 0; pass --strict to fail (exit 1) on any warning—useful in CI.
webspresso doctor
webspresso doctor --db
webspresso doctor --db --migrations --strictScaffold a Cursor Agent Skill: creates .cursor/skills/<name>/SKILL.md with valid YAML frontmatter (name, description) and a short markdown template for AI tooling. Use --global to write under ~/.cursor/skills/ instead of the current project.
Bundled preset: --preset webspresso copies SKILL.md (short index), REFERENCE-framework.md (SSR createApp, routes, ORM, auth, plugins, CLI), and REFERENCE-kernel.md (kernel event bus / flows) into .cursor/skills/webspresso-usage/ — no prompts.
webspresso skill my-workflow
webspresso skill review-pr --description "Runs PR review checklist. Use when reviewing pull requests."
webspresso skill deploy-check -g
# Install the bundled Webspresso agent reference (same content shipped in templates/skills/)
webspresso skill --preset webspresso
webspresso skill -p webspresso --globalAdd Tailwind CSS to your project with build process.
webspresso add tailwindThis command will:
- Install Tailwind CSS, PostCSS, and Autoprefixer as dev dependencies
- Create
tailwind.config.jsandpostcss.config.js - Create
src/input.csswith Tailwind directives - Add build scripts to
package.json - Update your layout to use the built CSS instead of CDN
- Create
public/css/style.cssfor the compiled output
After running this command:
npm install
npm run build:css # Build CSS once
npm run watch:css # Watch and rebuild CSS on changes
npm run dev # Starts both CSS watch and dev serverScaffold deployment provider files in the current project.
# Cloudflare Workers + Wrangler + D1 example config
webspresso add deploy --provider cloudflare
# Docker or PM2 (Node process)
webspresso add deploy --provider docker
webspresso add deploy --provider pm2
# Multiple providers at once
webspresso add deploy --provider cloudflare,docker| Provider | Files created |
|---|---|
cloudflare |
wrangler.toml, webspresso.build.js, optional webspresso.db.js (D1), legacy src/worker.js stub |
docker |
Dockerfile, .dockerignore, docker-compose.yml |
pm2 |
ecosystem.config.js |
After scaffolding, run webspresso build --adapter <name> then deploy with the provider’s tool (Wrangler, Docker, PM2). See Deployment and doc/index.html#cloudflare-workers.
Compile routes into a build manifest and write adapter-specific output under .webspresso/.
# Node production entry (default when webspresso.build.js sets adapter: 'node')
webspresso build
webspresso build --adapter node
# Cloudflare Workers (Wrangler bundles .webspresso/worker/)
webspresso build --adapter cloudflare
# Manifest only — skip esbuild pre-bundle (Cloudflare always skips; Wrangler bundles)
webspresso build --adapter node --skip-bundle
# Fail CI on validation warnings (edge-incompatible imports, unresolved templates, …)
webspresso build --adapter cloudflare --fail-on-warnings| Adapter | Output directory | Runtime entry |
|---|---|---|
node |
.webspresso/server/ |
index.mjs + manifest.json + handlers.mjs |
cloudflare |
.webspresso/worker/ |
same layout + templates.mjs (precompiled Nunjucks) |
bun |
.webspresso/server/ (Bun adapter) |
experimental |
Configure defaults in webspresso.build.js at the project root (see templates under templates/deploy/).
Build phases (summary): discover pages/ → analyze edge imports & Nunjucks graph → compile handlers + inline i18n → write manifest.json → bundle adapter output (Node: optional esbuild; Cloudflare: templates.mjs + skip framework esbuild) → validate. Compiler internals: core/build/README.md.
Generate favicon PNG files and favicons.njk partial from a single source PNG.
# Basic usage (creates files in public/, views/partials/)
webspresso favicon:generate logo.png
# With PWA manifest options
webspresso favicon:generate logo.png --name "My App" --short-name "App" --theme-color "#22c55e"
# Custom output directory
webspresso favicon:generate logo.png -o static
# Skip adding include to layout.njk
webspresso favicon:generate logo.png --no-layoutThis command will:
- Resize the source PNG to all required sizes (Apple touch 57–180px, Android 192px, favicon 16/32/96px, MS Tile 144px)
- Write PNGs to
public/(or-opath) - Create
public/manifest.json(PWA format) - Create
views/partials/favicons.njkwith<link>and<meta>tags - Add
{% include "partials/favicons.njk" %}toviews/layout.njk(unless--no-layout)
Options:
-o, --output-dir <path>– Output directory for PNGs (default:public)--partial-dir <path>– Directory for favicons.njk (default:views/partials)--layout-file <path>– Layout file to update (default:views/layout.njk)--theme-color <hex>– theme-color and msapplication-TileColor (default:#ffffff)--name <string>– manifest.jsonname(PWA)--short-name <string>– manifest.jsonshort_name(PWA)--no-layout– Do not add include to layout.njk
# Create admin_users table migration
webspresso admin:setup
# List all admin users
webspresso admin:list
# Reset admin password (interactive)
webspresso admin:password
# Reset with options
webspresso admin:password -e admin@example.com -p yeni_sifre123
webspresso admin:password -c ./webspresso.db.js -E productionNote: Requires
webspresso.db.jsorknexfile.jsin project root. Run from project directory.
Create your app with this structure:
my-app/
├── pages/
│ ├── locales/ # Global i18n translations
│ │ ├── en.json
│ │ └── de.json
│ ├── _hooks.js # Global lifecycle hooks
│ ├── index.njk # Home page (GET /)
│ ├── about/
│ │ ├── index.njk # About page (GET /about)
│ │ └── locales/ # Route-specific translations
│ ├── tools/
│ │ ├── index.njk # Tools list (GET /tools)
│ │ ├── index.js # Route config with load()
│ │ ├── [slug].njk # Dynamic tool page (GET /tools/:slug)
│ │ └── [slug].js # Route config for dynamic page
│ └── api/
│ ├── health.get.js # GET /api/health
│ └── echo.post.js # POST /api/echo
├── views/
│ └── layout.njk # Base layout template
├── public/ # Static files
└── server.js
Creates and configures the Hono-based compat app (WebspressoCompatApp).
Options:
pagesDir(required): Path to pages directoryviewsDir(optional): Path to views/layouts directorypublicDir(optional): Path to public/static directorydb(optional): Database instance — exposed asctx.dbin plugin hooks (register,onRoutesReady) and in pageload/metafunctions; also registered forgetDb()/getAppContext()belowlogging(optional): Enable request logging (default: true in development)helmet(optional): Helmet security configurationtrueorundefined: Use default secure configurationfalse: Disable HelmetObject: Custom Helmet configuration (merged with defaults)
middlewares(optional): Named middleware registry for routesclientRuntime(optional):{ alpine?: boolean | object, swup?: boolean | object }. When either flag is enabled, mounts vendored Alpine 3 / swup 4 (+ Head + Scripts plugins) at/__webspresso/client-runtime/*and passes resolved{ alpine, swup }into SSR templates asclientRuntime. Override with envWEBSPRESSO_ALPINE/WEBSPRESSO_SWUP(1ortrue). Package exportsresolveClientRuntimeandCLIENT_RUNTIME_BASE. See Client runtime below anddoc/index.html#client-runtime.auth(optional):AuthManagerfromcreateAuth()/quickAuth()(require('webspresso/core/auth')). Registers session + cookie parsing, attachesreq.auth/req.user, and injects named route middlewareauthandguest(do not reuse those names for custom handlers if you passauth). Seedoc/index.html#authentication.setupRoutes(app, ctx)(optional): Register custom routes on the compatappafter file routes and pluginonRoutesReady, before the 404 handler — use for login/logout handlers when using the auth module;ctx.authMiddlewareexposesrequireAuth,requireGuest, etc.;ctx.clientRuntimeis{ alpine, swup }
Example with middlewares:
const { createApp } = require('webspresso');
const { app } = createApp({
pagesDir: './pages',
viewsDir: './views',
middlewares: {
auth: (req, res, next) => {
if (!req.session?.user) {
return res.redirect('/login');
}
next();
},
admin: (req, res, next) => {
if (req.session?.user?.role !== 'admin') {
return res.status(403).send('Forbidden');
}
next();
},
rateLimit: require('hono-rate-limiter')({ windowMs: 60_000, limit: 100 })
}
});Then use in route configs by name:
// pages/admin/index.js
module.exports = {
middleware: ['auth', 'admin'], // Use named middlewares
load(req, ctx) { ... }
};
// pages/api/data.get.js
module.exports = {
middleware: ['auth', 'rateLimit'],
handler: (req, res) => res.json({ data: 'protected' })
};Parameterized named middleware: entries in middlewares can be factories (options) => (req, res, next) => …. A bare string calls the factory with {}; a tuple passes options:
// pages/api/account.get.js
module.exports = {
middleware: [['auth', { api: true }], 'rateLimit'], // JSON 401 instead of redirect when using createApp({ auth })
handler: (req, res) => res.json({ ok: true }),
};
// server.js — custom factory
middlewares: {
oauth: (opts) => (req, res, next) => {
if (opts.google && !req.headers['x-google']) return res.status(401).end();
next();
},
};
// pages/example/index.js → middleware: [['oauth', { google: true }], 'auth']Plain (req, res, next) => … handlers still work as today. Tuple form requires a factory for that name (you get a clear error if you mix a plain handler with ['name', opts]).
Alpine.js + swup — opt-in progressive enhancement for SSR pages:
clientRuntime: { alpine: true, swup: true }(each can be toggled independently). Default is off; no scripts are injected when both are disabled.- Include
{% include "partials/webspresso-client-runtime.njk" %}in your layout (copy from the npm package’sviews/partials/or the framework repo). When swup is on, wrap the main content in<main id="swup">…</main>so transitions replace the correct region. - swup uses Head + Scripts plugins; Alpine is re-bound after each visit via
Alpine.initTreeon the container. Usedata-no-swupon links for a full page load. Paths/_adminand/_webspressoare ignored by the default bootstrap; the admin panel and dev dashboard stay separate Mithril apps. - Dynamic UI can call
pages/api/*from Alpine withfetch(enableclientRuntimeoncreateApp; seedoc/index.html#client-runtime). - Helmet / CSP: production
script-src 'self'works for/__webspresso/client-runtime/; some Alpine builds may needunsafe-eval— validate for your version or use a stricter build.
const { createApp } = require('webspresso');
const { app } = createApp({
pagesDir: './pages',
viewsDir: './views',
publicDir: './public',
clientRuntime: { alpine: true, swup: true },
});With createApp({ db }), file-based API routes (pages/api/*.js) get the same ORM instance on req.db before your middleware array and the handler run — no extra require in the handler:
module.exports = async function handler(req, res) {
if (!req.db) {
return res.status(503).json({ error: 'Database not configured' });
}
const posts = await req.db.getRepository('Post').query().limit(10).list();
res.json(posts);
};
module.exports.middleware = ['auth']; // can use req.db tooThe framework also registers that instance for non-request code (scripts, jobs) and for tests:
const { getDb, hasDb } = require('webspresso');
// hasDb() / getDb() — getDb() throws if createApp had no dbFor routes you add manually in setupRoutes, run attachDbMiddleware early so those handlers get req.db:
const { createApp, attachDbMiddleware } = require('webspresso');
createApp({
pagesDir: './pages',
db,
setupRoutes(app) {
app.use(attachDbMiddleware);
app.get('/custom/api', (req, res) => res.json({ ok: !!req.db }));
},
});| Export | Role |
|---|---|
req.db |
Set on each API request when createApp({ db }) was used (file-based API routes + after attachDbMiddleware) |
getDb() |
Same instance as req.db; throws if no db was passed to createApp |
hasDb() |
true if createApp was given db |
getAppContext() |
{ db } — db may be null |
attachDbMiddleware |
Compat middleware to populate req.db for non–file-router routes |
resetAppContext() |
Clears context (mainly for tests) |
setAppContext(partial) |
Low-level merge; normally only createApp uses this |
Custom Error Pages:
const { createApp } = require('webspresso');
const { app } = createApp({
pagesDir: './pages',
viewsDir: './views',
errorPages: {
// Option 1: Custom handler function
notFound: (req, res) => {
res.render('errors/404.njk', { url: req.url });
},
// Option 2: Template path (rendered with Nunjucks)
serverError: 'errors/500.njk',
// Timeout error page (503)
timeout: 'errors/503.njk'
}
});Error templates receive these variables:
404.njk:{ url, method }500.njk:{ error, status, isDev }503.njk:{ url, method, isDev }
How errors reach this handler
Unhandled errors from file-based routes (pages/**/*.njk load() / middleware / render, and pages/api/**/*.js handlers) are forwarded with next(err), so they go through the central error handler. That means errorPages.serverError and errorPages.timeout apply to those failures as well (not only to routes you add with setupRoutes).
-
pages/_hooks.jsonError(ctx, err)runs before the central handler (for both SSR and API file routes). Use it for logging or APM (Sentry.captureException,newrelic.noticeError, etc.). The error is also onctx.error. -
JSON vs HTML: Requests whose path starts with
/apialways get a JSON error body from the default branch (and the default stringserverError/timeoutNunjucks templates are skipped for those paths). Other clients useAcceptas before: prefer HTML when the client accepts HTML.
Request Timeout:
Configure request timeout with connect-timeout:
const { app } = createApp({
pagesDir: './pages',
timeout: '30s', // Default: 30 seconds
// timeout: '1m', // 1 minute
// timeout: false, // Disable timeout
});Asset Management:
Configure asset handling with versioning and manifest support:
const { createApp } = require('webspresso');
const path = require('path');
const { app } = createApp({
pagesDir: './pages',
viewsDir: './views',
publicDir: './public',
assets: {
// Option 1: Simple versioning (cache busting)
version: '1.2.3', // or process.env.APP_VERSION
// Option 2: Manifest file (Vite, Webpack, etc.)
manifestPath: path.join(__dirname, 'public/.vite/manifest.json'),
// URL prefix for assets
prefix: '/static'
}
});Use asset helpers in templates:
{# Using fsy helpers (auto-resolved) #}
<link rel="stylesheet" href="{{ fsy.asset('/css/style.css') }}">
{# Or generate full HTML tags #}
{{ fsy.css('/css/style.css') | safe }}
{{ fsy.js('/js/app.js', { defer: true, type: 'module' }) | safe }}
{{ fsy.img('/images/logo.png', 'Site Logo', { class: 'logo', loading: 'lazy' }) | safe }}Asset helpers available in fsy:
asset(path)- Returns versioned/manifest-resolved URLcss(href, attrs)- Generates<link>tagjs(src, attrs)- Generates<script>tagimg(src, alt, attrs)- Generates<img>tag
Manifest Support:
Works with Vite and Webpack manifest formats:
// Vite manifest format (.vite/manifest.json)
{
"css/style.css": { "file": "assets/style-abc123.css" },
"js/app.js": { "file": "assets/app-xyz789.js" }
}
// Webpack manifest format
{
"/css/style.css": "/dist/style.abc123.css",
"/js/app.js": "/dist/app.xyz789.js"
}Returns: { app, nunjucksEnv, pluginManager, authMiddleware } — authMiddleware is null when auth was not passed.
Optional session-based auth lives under webspresso/core/auth: createAuth, quickAuth, hash / verify, setupAuthMiddleware, createRememberTokensTable, and policy helpers. Pass the manager to createApp({ auth }) so routes can use middleware: ['auth'] or ['guest'] and handlers can call req.auth.attempt(), req.auth.logout(), req.auth.can(), etc.
The admin panel plugin uses its own session and /api/auth/* routes (req.session.adminUser) — it is separate from createApp({ auth }).
For integration patterns (remember-me table, setupRoutes, file-router ordering), see doc/index.html#authentication.
Webspresso has a built-in plugin system with version control and dependency management.
Error handling: On plugin errors (missing dependencies, version mismatch, register() or onRoutesReady() failure), the app does not crash; only a console.warn is logged and other plugins continue to run.
const { createApp } = require('webspresso');
const { sitemapPlugin, analyticsPlugin, dashboardPlugin } = require('webspresso/plugins');
const { app } = createApp({
pagesDir: './pages',
viewsDir: './views',
plugins: [
dashboardPlugin(), // Dev dashboard at /_webspresso
sitemapPlugin({
hostname: 'https://example.com',
exclude: ['/admin/*', '/api/*'],
i18n: true,
locales: ['en', 'de']
}),
analyticsPlugin({
google: {
measurementId: 'G-XXXXXXXXXX',
verificationCode: 'xxxxx'
},
yandex: {
counterId: '12345678',
verificationCode: 'xxxxx'
},
bing: {
uetId: '12345678',
verificationCode: 'xxxxx'
}
})
]
});Webspresso Studio (developer panel at /_webspresso):
- SSR inspector: routes, plugins, health, ORM, cache, OpenAPI, sitemap, env, logs
- Enabled by default in development via
createApp({ studio: true }) - Disabled in production unless explicitly configured with authentication
- Separate from production admin at
/_admin - Docs: docs/studio.md, docs/studio-security.md
const { app } = createApp({
pagesDir: './pages',
viewsDir: './views',
studio: {
enabled: true,
path: '/_webspresso',
auth: 'dev-only',
exposeEnv: false,
},
});dashboardPlugin() is deprecated and delegates to Studio.
Production example:
studio: {
enabled: true,
auth: 'basic',
basicAuth: { user: process.env.STUDIO_USER, pass: process.env.STUDIO_PASS },
}Redirect plugin:
- Runs in
register()before file-based routes, so configured paths override SSR pages. - Rules:
from(string orRegExp),to(path or URL), optionalstatus(301/302/303/307/308), optionalmethods('*'or a list; default plugin methods areGETandHEADonly). preserveQuery(defaulttrue) appends the request query whentohas no?. Externaltovalues requireallowExternal: true.
const { redirectPlugin } = require('webspresso/plugins');
redirectPlugin({
rules: [
{ from: '/old-blog', to: '/blog', status: 301 },
{ from: /^\/wiki\/(.*)$/, to: '/docs' },
],
});Sitemap Plugin:
- Generates
/sitemap.xmlfrom routes automatically - Dynamic Database Content: Generate URLs from database records
- Excludes dynamic routes and API endpoints
- Supports i18n with hreflang tags
- Generates
/robots.txt - Configurable caching for performance
sitemapPlugin({
hostname: 'https://example.com',
db, // Database instance
dynamicSources: [
{
model: 'Post', // Model name
urlPattern: '/blog/:slug', // URL pattern
lastmodField: 'updated_at', // Field for lastmod
filter: (r) => r.published, // Filter records
priority: 0.9,
},
{
// Custom query function
query: async (db) => {
return db.getRepository('Product')
.query()
.where('active', true)
.list();
},
urlPattern: '/products/:slug',
},
],
})Analytics Plugin:
- Google Analytics (GA4) and Google Ads
- Google Tag Manager
- Yandex.Metrika
- Microsoft/Bing UET
- Facebook Pixel
- Verification meta tags for all services
Template helpers from analytics plugin:
<head>
{{ fsy.verificationTags() | safe }}
{{ fsy.analyticsHead() | safe }}
</head>
<body>
{{ fsy.analyticsBodyOpen() | safe }}
...
</body>Individual helpers: gtag(), gtm(), gtmNoscript(), yandexMetrika(), bingUET(), facebookPixel(), allAnalytics()
Admin Panel Plugin:
- Modular admin panel with SPA (Mithril.js)
- Model CRUD UI (auto-generated from ORM)
- Extensible via custom pages, menu items, API routes, and dashboard widgets
- Other plugins (e.g. site-analytics) can register their own admin pages
const { adminPanelPlugin } = require('webspresso/plugins');
const { app } = createApp({
pagesDir: './pages',
plugins: [
adminPanelPlugin({
db,
path: '/_admin', // Admin URL (default: /_admin)
auth: authManager, // Optional: for user management
userManagement: { enabled: true, model: 'User' },
})
]
});Options:
db(required) - Database instancepath- Admin panel path (default:/_admin)auth- SameAuthManagerinstance ascreateApp({ auth })when you useuserManagement— enables Active Sessions / revoke APIs ifrememberTokens(remember-me) is configured; optional for user CRUD-onlyuserManagement- Site-user admin UI (enabled,modelmatching ORM user table, optionalfieldsmap). SPA routes:/_admin/users,/_admin/users/new, …; APIs:/_admin/api/users*. Admin staff still useadmin_users//_adminlogin; this is separate fromreq.useron the public siteconfigure- Callback(registry) => voidfor manual setup
See doc/index.html#admin-user-management and Session authentication in .cursor/skills/webspresso-usage/REFERENCE-framework.md for the split between adminUser and createApp({ auth }).
Custom Admin Pages (registerModule):
Plugins can add custom admin pages using registerModule in onRoutesReady:
// In your plugin's onRoutesReady(ctx)
const adminApi = ctx.usePlugin('admin-panel');
if (adminApi) {
adminApi.registerModule({
id: 'my-module',
pages: [{
id: 'reports',
title: 'Reports',
path: '/reports',
icon: 'chart',
description: 'View reports',
component: `window.__customPages["reports"] = { view: () => m("div", "My Report") };`, // Mithril.js
}],
menu: [{ id: 'reports', label: 'Reports', path: '/reports', icon: 'chart', order: 5 }],
api: {
prefix: '/reports',
routes: [
{ method: 'get', path: '/summary', handler: getSummaryHandler, auth: true },
],
},
widgets: [{
id: 'reports-widget',
title: 'Quick Stats',
dataLoader: async () => ({ count: 42 }),
}],
menuGroups: [{ id: 'analytics', label: 'Analytics', order: 2 }],
});
}registerModule config:
| Field | Description |
|---|---|
id |
Unique module identifier (required) |
pages |
Custom admin pages (each: id, title, path, icon, description, optional component) |
menu |
Sidebar menu items (id, label, path, icon, order) |
menuGroups |
Collapsible menu groups (id, label, order) |
api |
API routes (prefix, routes: method, path, handler, auth) |
widgets |
Dashboard widgets (id, title, dataLoader) |
For pages with component: provide Mithril.js code that assigns to window.__customPages[pageId]. Without component, the page shows a static placeholder.
Manual registry API (alternative to registerModule):
adminPanelPlugin({
db,
configure(registry) {
registry.registerPage('custom', { title: 'Custom', path: '/custom', icon: 'tool' });
registry.registerClientComponent('custom', 'window.__customPages["custom"] = { view: () => m("p","Hi") };');
registry.registerMenuItem({ id: 'custom', label: 'Custom', path: '/custom', icon: 'tool' });
},
})- Admin session only — same
requireAuth/req.session.adminUseras the admin panel; paths live under your admin prefix (default/_admin). - Excel export (
.xlsx) for models withadmin.enabled; record selection matches the built-in JSON/CSV export (ids,selectAll,filtersvia query or POST body). - Import —
multipart/form-datafieldfile(.csvor.xlsx); query/bodymode=insert|upsert,upsertKey(default primary key). Rows are validated through the ORM (repository.create/update). Hidden columns are excluded; caps:maxRows,maxFileBytes. - UI — when the plugin is loaded, the admin model list adds Export Excel, Import, and bulk Export Excel (alongside the existing JSON/CSV export actions). Registers bulk action
export-xlsxfor download URLs. - Dependencies — implemented with
exceljsandcsv-parse(declared on thewebspressopackage).
Register after adminPanelPlugin so session middleware and the admin registry exist; use the same db and adminPath:
const { adminPanelPlugin, dataExchangePlugin } = require('webspresso/plugins');
const { app } = createApp({
pagesDir: './pages',
db,
plugins: [
adminPanelPlugin({ db, path: '/_admin' }),
dataExchangePlugin({
db,
adminPath: '/_admin',
maxRows: 10_000,
maxFileBytes: 10 * 1024 * 1024,
}),
],
});Options:
db— database instance (defaults toctx.dbinonRoutesReadyif omitted butcreateApp({ db })was set)adminPath— must match the admin panel path (default/_admin)enabled— setfalseto skip registering routes (defaulttrue)maxRows— export and import row limit (default10000)maxFileBytes— multipart upload limit (default 10 MiB)
API (all require admin cookie):
GET|POST ${adminPath}/api/data-exchange/export/:model— spreadsheet downloadPOST ${adminPath}/api/data-exchange/import/:model— import summary{ success, created, updated, failed, errors: [{ row, message }] }
Site Analytics Plugin:
- Self-hosted page view analytics (no external services required)
- Automatic page view tracking via Express middleware
- Bot detection (40+ patterns: Googlebot, GPTBot, curl, etc.)
- Country detection (CDN headers, Accept-Language fallback)
- Admin panel dashboard with Chart.js visualizations
- Privacy-first: IP addresses are hashed, no cookies required
const { siteAnalyticsPlugin, adminPanelPlugin } = require('webspresso/plugins');
const { app } = createApp({
pagesDir: './pages',
plugins: [
adminPanelPlugin({ db }),
siteAnalyticsPlugin({
db,
excludePaths: ['/health', '/favicon.ico'],
trackBots: true, // Record bot visits separately (default: true)
}),
]
});Admin panel analytics page includes:
- Summary cards: Total views, unique visitors, unique pages, sessions
- Views over time: Line chart (Chart.js) with daily views/visitors/sessions
- Bot activity: Bot request counts with horizontal bar visualization
- Top pages: Most viewed pages sorted by view count
- Recent activity: Latest page views with country flags and timestamps
- Country stats: Country breakdown with flag emojis and bar charts
- Date filtering: Last 7, 30, or 90 days toggle
Options:
db(required) - Database instanceexcludePaths- Additional paths to exclude from tracking (admin, API, and static files are auto-excluded)trackBots- Whether to record bot visits (default:true)tableName- Custom table name (default:analytics_page_views)
The analytics_page_views table is automatically created on first request.
Audit log plugin:
- Records successful (
2xx) admin panel model mutations:create,update,delete,restoreon${adminPath}/api/models/:model/records… - Actor from
req.session.adminUserafter login; optional IP / user-agent; update metadata stores changed field names only (not full body) GET ${adminPath}/api/audit-logswith pagination and filters (page,perPage,model,action,from,to) — use from custom admin pages or the bundled Mithril list (includeDefaultPagedefaulttrue)- Run
webspresso db:migrateafter adding the migration (seeplugins/audit-log/migration-template.jsor the example undermigrations/). Prune old rows with the CLI (recommended on a schedule):
npx webspresso audit:prune --days 90const { adminPanelPlugin, auditLogPlugin } = require('webspresso/plugins');
const { app } = createApp({
pagesDir: './pages',
plugins: [
adminPanelPlugin({ db }),
auditLogPlugin({
db,
// adminPath: '/_admin', // must match admin panel `path`
// tableName: 'audit_logs',
// includeDefaultPage: true,
// apiPrefix: '/audit-logs',
}),
],
});Programmatic API (other plugins): ctx.usePlugin('audit-log') exposes queryLogs, purgeAuditLogs, and getMigrationTemplate().
Email plugin:
- Sends email via Nodemailer with MJML templates (
{{variable}}interpolation) - Template sources:
templatesDir(*.mjml, Node.js only — skipped on edge/workers),templatesmap with inline{ mjml }, runtimeregisterTemplate, or inlinesend({ mjml, html, data }) - Transport:
transport,smtp, or env (SMTP_HOST,SMTP_PORT,SMTP_USER,SMTP_PASS,SMTP_SECURE,MAIL_FROM) - Optional DB logging to
email_logswhendbis passed; prune withwebspresso email:prune --days 90 - Build:
webspresso buildembedsemails/*.mjml(configemailDir) + bundled auth templates intomanifest.emailTemplatesandemail-templates.mjs(Cloudflare). UseemailPlugin({ manifest })oremailPlugin({ emailTemplates: manifest.emailTemplates })on edge. - Admin page at
/_admin/email(test send, preview, SMTP verify, logs) whenadminPanelPluginis loaded - Optional auth bridge:
authEmails: { enabled: true }sends password-reset / email-verification mails and can registerPOST /api/auth/forgot-password,/reset-password,/verify-email,/resend-verification
const { quickAuth, createAuthTokensTable } = require('webspresso/core/auth');
const { adminPanelPlugin, emailPlugin } = require('webspresso/plugins');
const auth = quickAuth({ db, authTokens: true });
await createAuthTokensTable(db.knex);
const { app, pluginManager } = createApp({
pagesDir: './pages',
db,
auth,
plugins: [
emailPlugin({
db,
auth,
templatesDir: './emails',
smtp: {
host: process.env.SMTP_HOST,
port: 587,
auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS },
},
defaults: { from: process.env.MAIL_FROM },
authEmails: {
enabled: true,
baseUrl: process.env.BASE_URL,
registerRoutes: true,
},
}),
adminPanelPlugin({ db }),
],
});
// From a route handler or another plugin:
await pluginManager.getPluginAPI('email').sendTemplate('welcome', {
to: 'user@example.com',
subject: 'Welcome',
data: { name: 'Ali' },
});Programmatic API: ctx.usePlugin('email') exposes send, sendTemplate, preview, registerTemplate, listTemplates, verifyConnection, queryLogs, purgeLogs, getMigrationTemplate().
ORM cache admin plugin:
- Depends on
adminPanelPluginand a database instance created withcreateDatabase({ cache: true | { … } })sodb.cacheis non-null - Registers an ORM Cache admin page (metrics, full purge, per-model invalidation, reset counters) backed by
db.cache - If
db.cacheis disabled, the plugin logs a warning and skips registration
const { adminPanelPlugin, ormCacheAdminPlugin } = require('webspresso');
const { app } = createApp({
pagesDir: './pages',
plugins: [
adminPanelPlugin({ db }),
ormCacheAdminPlugin({ db }),
],
});reCAPTCHA plugin:
- Google reCAPTCHA v2 (checkbox) or v3 (score): server verification via
https://www.google.com/recaptcha/api/siteverify(no extra npm dependency; Node 18+fetch) - Registers CSP entries for Google scripts/iframes; Nunjucks helpers:
recaptchaScript,recaptchaWidget(v2),recaptchaV3Token(hidden input + execute for v3 — use withversion: 'v3'andrecaptchaScriptloadsapi.js?render=siteKey) - Secret key:
options.secretKeyor envRECAPTCHA_SECRET_KEY(never expose to templates)
const {
recaptchaPlugin,
createRecaptchaMiddleware,
resolveRecaptchaMiddlewareParams,
} = require('webspresso/plugins/recaptcha');
const recaptchaConfig = {
siteKey: process.env.RECAPTCHA_SITE_KEY,
secretKey: process.env.RECAPTCHA_SECRET_KEY,
version: 'v2', // or 'v3'
minScore: 0.5,
expectedAction: 'contact', // v3 verification only
defaultV3Action: 'submit', // for recaptchaV3Token helper
};
const { app } = createApp({
pagesDir: './pages',
plugins: [recaptchaPlugin(recaptchaConfig)],
middlewares: {
recaptcha: createRecaptchaMiddleware({
...resolveRecaptchaMiddlewareParams(recaptchaConfig),
bodyField: 'g-recaptcha-response',
}),
},
});File-based API (pages/api/...post.js): use the named middleware instead of duplicating verification in the handler; on success, req.recaptcha contains a short summary of Google’s response.
// pages/api/contact.post.js
module.exports = async function post(req, res) {
// recaptcha middleware already returned 400 if token invalid
return res.json({ ok: true, hostname: req.recaptcha.hostname });
};
module.exports.middleware = ['recaptcha'];Optional: after createApp, use pluginManager.getPluginAPI('recaptcha').createMiddleware({ bodyField: '...' }) to override plugin defaults and attach to the app.use chain (after body parsers).
Low-level usage (without middleware): import verifyRecaptcha / getRemoteIp from webspresso/plugins/recaptcha/verify.
SEO Checker Plugin:
- Client-side SEO analysis tool (inspired by django-check-seo)
- Integrated with dev toolbar
- 40+ SEO checks across 7 categories
- Real-time analysis with score calculation
- Only active in development mode
const { seoCheckerPlugin } = require('webspresso/plugins');
const { app } = createApp({
pagesDir: './pages',
plugins: [
seoCheckerPlugin({
settings: {
titleLength: [30, 60], // Min/max title length
descriptionLength: [50, 160], // Min/max description length
minContentWords: 300, // Minimum content words
minInternalLinks: 1, // Minimum internal links
minExternalLinks: 1, // Minimum external links
maxUrlLength: 75, // Maximum URL length
maxUrlDepth: 3 // Maximum URL depth
}
})
]
});SEO Check Categories:
| Category | Checks |
|---|---|
| Meta | Title, Description, Canonical, Viewport, Robots, Charset, Lang |
| Headings | H1 existence, Single H1, Hierarchy, Non-empty headings |
| Content | Word count, Paragraphs, Keyword usage, Keywords early |
| Links | Internal links, External links, Nofollow, Anchor text |
| Images | Alt text, Descriptive alt, Dimensions, Lazy loading |
| Structured | Open Graph, Twitter Card, JSON-LD, Hreflang |
| URL | Length, Depth, Readability, HTTPS |
The SEO Checker panel appears as a floating widget and can be opened via:
- Dev toolbar "SEO Check" button
- Floating toggle button (🔍) in bottom-right corner
const myPlugin = {
name: 'my-plugin',
version: '1.0.0',
// Optional: depend on other plugins
dependencies: {
'analytics': '^1.0.0'
},
// Optional: expose API for other plugins
api: {
getData() { return this.data; }
},
// Called during registration
register(ctx) {
// Access Express app
ctx.app.use((req, res, next) => next());
// Access database (when createApp({ db }) is used)
if (ctx.db) {
// Use ctx.db.getRepository('Model'), ctx.db.knex, etc.
}
// Add template helpers
ctx.addHelper('myHelper', () => 'Hello!');
// Add Nunjucks filters
ctx.addFilter('myFilter', (val) => val.toUpperCase());
// Use other plugins
const analytics = ctx.usePlugin('analytics');
},
// Called after all routes are mounted
onRoutesReady(ctx) {
// ctx.db available when createApp({ db }) is used
// Access route metadata
console.log('Routes:', ctx.routes);
// Add custom routes
ctx.addRoute('get', '/my-route', (req, res) => {
res.json({ hello: 'world' });
});
},
// Called before server starts
onReady(ctx) {
console.log('Server ready!');
}
};
// Use as factory function for configuration
function myPluginFactory(options = {}) {
return {
name: 'my-plugin',
version: '1.0.0',
_options: options,
register(ctx) {
// ctx.options contains the passed options
}
};
}The plugin system does not crash the app on errors; it only logs warnings:
- Missing dependency: If a plugin in
dependenciesis not loaded → warning, plugin still loads - Version mismatch: If a dependent plugin version is incompatible → warning, plugin still loads
- Circular dependency: If two plugins depend on each other → warning, plugins in the cycle are skipped
- Duplicate plugin name: Two plugins with the same name → warning, second one is skipped
register()error: Ifregister(ctx)throws → warning, plugin is removed from the registryonRoutesReady()error: If the hook throws → warning, server stays up
A single faulty plugin does not block the entire application.
Create .njk files in the pages/ directory:
| File Path | Route |
|---|---|
pages/index.njk |
/ |
pages/about/index.njk |
/about |
pages/tools/[slug].njk |
/tools/:slug |
pages/docs/[...rest].njk |
/docs/* |
Create .js files in pages/api/ with optional method suffixes:
| File Path | Route |
|---|---|
pages/api/health.get.js |
GET /api/health |
pages/api/echo.post.js |
POST /api/echo |
pages/api/users/[id].get.js |
GET /api/users/:id |
Basic API Handler:
// pages/api/health.get.js
module.exports = async function handler(req, res) {
res.json({ status: 'ok' });
};Object export (handler, middleware, schema):
Use a single export object when you need named middleware from createApp({ middlewares }) and/or a Zod schema. Order at runtime: req.db (if configured) → schema (req.input) → middleware chain → handler.
// pages/api/search.post.js
module.exports = {
middleware: ['requireAuth'],
schema: ({ z }) => ({
body: z.object({ q: z.string() }),
}),
handler: async (req, res) => {
const { q } = req.input.body;
const results = [];
return res.json({ results, q });
},
};Register requireAuth (and any other names) on the app:
createApp({
pagesDir: './pages',
middlewares: {
requireAuth: (req, res, next) => {
if (!req.session?.user) return res.status(401).json({ error: 'Unauthorized' });
next();
},
},
});With Schema Validation (same object shape):
// pages/api/posts.post.js
module.exports = {
schema: ({ z }) => ({
body: z.object({
title: z.string().min(3).max(100),
content: z.string(),
tags: z.array(z.string()).optional()
}),
query: z.object({
draft: z.coerce.boolean().default(false)
})
}),
async handler(req, res) {
// Validated & parsed data available in req.input
const { title, content, tags } = req.input.body;
const { draft } = req.input.query;
// Original req.body, req.query remain untouched
res.json({ success: true, title, draft });
}
};Schema Options:
| Key | Description |
|---|---|
body |
Validates req.body (POST/PUT/PATCH) |
params |
Validates route parameters (e.g., :id) |
query |
Validates query string parameters |
response |
Response schema (for documentation, not enforced) |
All schemas use Zod for validation. Invalid requests receive 400 JSON: { error: 'Validation Error', issues: [...] } (no handler / middleware run).
For nanoid route parameters (same alphabet and default length as generateNanoid / zdb.nanoid()), use z.nanoid() on the z passed into your API schema (Webspresso extends it; no extra import). Optional: z.nanoid(12) or z.nanoid({ maxLength: 12 }) (matches zdb.nanoid({ maxLength })). For scripts or tests outside schema: ({ z }), zodNanoid(z, size?) and extendZ(z) are exported from webspresso.
module.exports = {
schema: ({ z }) => ({
params: z.object({
id: z.nanoid(), // default 21 chars
shortId: z.nanoid(12), // numeric length
other: z.nanoid({ maxLength: 8 }), // zdb-style options
}),
}),
async handler(req, res) {
const { id } = req.input.params;
// ...
},
};Dynamic Route with Params Validation:
// pages/api/users/[id].get.js
module.exports = {
schema: ({ z }) => ({
params: z.object({
id: z.string().uuid()
}),
query: z.object({
fields: z.string().optional()
})
}),
async handler(req, res) {
const { id } = req.input.params; // Validated UUID
const user = await getUser(id);
res.json(user);
}
};Add a .js file alongside your .njk file to configure the route:
// pages/tools/index.js
module.exports = {
// Middleware for this route
middleware: [(req, res, next) => next()],
// Load data for SSR
async load(req, ctx) {
// ctx.db is available when createApp({ db }) is used
if (ctx.db) {
const posts = await ctx.db.getRepository('Post').query().limit(10);
return { posts };
}
return { tools: await fetchTools() };
},
// Override meta tags
meta(req, ctx) {
return {
title: 'Tools',
description: 'Developer tools'
};
},
// Route-level hooks
hooks: {
beforeLoad: async (ctx) => {},
afterRender: async (ctx) => {}
}
};Add JSON files to pages/locales/:
{
"nav": {
"home": "Home",
"about": "About"
}
}Add a locales/ folder inside any route directory to override global translations.
In templates:
<h1>{{ t('nav.home') }}</h1>The fsy object is available in all templates:
{# URL helpers #}
{{ fsy.url('/tools', { page: 1 }) }}
{{ fsy.fullUrl('/tools') }}
{{ fsy.route('/tools/:slug', { slug: 'test' }) }}
{# Request helpers #}
{{ fsy.q('page', 1) }}
{{ fsy.param('slug') }}
{{ fsy.hdr('User-Agent') }}
{# Utility helpers #}
{{ fsy.slugify('Hello World') }}
{{ fsy.truncate(text, 100) }}
{{ fsy.prettyBytes(1024) }}
{{ fsy.prettyMs(5000) }}
{# Date/Time helpers (dayjs) #}
{{ fsy.dateFormat(post.created_at, 'YYYY-MM-DD HH:mm') }}
{{ fsy.dateFromNow(post.created_at) }} {# "2 hours ago" #}
{{ fsy.dateAgo(post.created_at) }} {# "2 hours ago" #}
{{ fsy.dateUntil(event.date) }} {# "in 2 hours" #}
{{ fsy.date(post.created_at).format('MMMM D, YYYY') }} {# Full dayjs API #}
{% if fsy.dateIsBefore(post.created_at, fsy.date()) %}Published{% endif %}
{{ fsy.dateDiff(post.created_at, fsy.date(), 'day') }} days ago
{{ fsy.dateAdd(post.created_at, 7, 'day').format('YYYY-MM-DD') }}
{{ fsy.dateStartOf(post.created_at, 'month').format('YYYY-MM-DD') }}
{# Environment #}
{% if fsy.isDev() %}Dev mode{% endif %}
{# SEO #}
{{ fsy.canonical() }}
{{ fsy.jsonld(schema) | safe }}Create pages/_hooks.js:
module.exports = {
onRequest(ctx) {},
beforeLoad(ctx) {},
afterLoad(ctx) {},
beforeRender(ctx) {},
afterRender(ctx) {},
onError(ctx, err) {}
};- Global
onRequest - Route
onRequest - Route
beforeMiddleware - Route middleware
- Route
afterMiddleware - Route
beforeLoad - Route
load() - Route
afterLoad - Route
beforeRender - Nunjucks render
- Route
afterRender
| Variable | Default | Description |
|---|---|---|
NODE_ENV |
development |
Environment |
DEFAULT_LOCALE |
en |
Default locale |
SUPPORTED_LOCALES |
en |
Comma-separated locales |
BASE_URL |
http://localhost:3000 |
Base URL for canonical URLs |
DATABASE_URL |
- | Database connection string (for ORM) |
Webspresso includes a minimal, Eloquent-inspired ORM built on Knex with Zod schemas as the single source of truth.
const { zdb, defineModel, createDatabase } = require('webspresso');
// 1. Define your schema with database metadata
const UserSchema = zdb.schema({
id: zdb.id(),
email: zdb.string({ unique: true, index: true }),
name: zdb.string({ maxLength: 100 }),
status: zdb.enum(['active', 'inactive'], { default: 'active' }),
company_id: zdb.foreignKey('companies', { nullable: true }),
created_at: zdb.timestamp({ auto: 'create' }),
updated_at: zdb.timestamp({ auto: 'update' }),
deleted_at: zdb.timestamp({ nullable: true }),
});
// 3. Define your model
const User = defineModel({
name: 'User',
table: 'users',
schema: UserSchema,
relations: {
company: { type: 'belongsTo', model: () => Company, foreignKey: 'company_id' },
posts: { type: 'hasMany', model: () => Post, foreignKey: 'user_id' },
},
scopes: { softDelete: true, timestamps: true },
});
// 4. Create database (models auto-loaded from ./models directory)
const db = createDatabase({
client: 'pg',
connection: process.env.DATABASE_URL,
models: './models', // Optional, defaults to './models'
});
// Models are automatically loaded from models/ directory
// Use getRepository with model name
const UserRepo = db.getRepository('User');
const user = await UserRepo.findById(1, { with: ['company', 'posts'] });The zdb helpers wrap Zod schemas with database column metadata:
| Helper | Description | Options |
|---|---|---|
zdb.id() |
Primary key (bigint, auto-increment) | |
zdb.uuid() |
UUID primary key | |
zdb.nanoid(opts) |
Nanoid primary key (URL-safe string, stored as VARCHAR) | maxLength (default 21) |
zdb.string(opts) |
VARCHAR column | maxLength, unique, index, nullable |
zdb.text(opts) |
TEXT column | nullable |
zdb.integer(opts) |
INTEGER column | nullable, default |
zdb.bigint(opts) |
BIGINT column | nullable |
zdb.float(opts) |
FLOAT column | nullable |
zdb.decimal(opts) |
DECIMAL column | precision, scale, nullable |
zdb.boolean(opts) |
BOOLEAN column | default, nullable |
zdb.date(opts) |
DATE column | nullable |
zdb.datetime(opts) |
DATETIME column | nullable |
zdb.timestamp(opts) |
TIMESTAMP column | auto: 'create'|'update', nullable |
zdb.json(opts) |
JSON column | nullable |
zdb.array(itemSchema, opts) |
ARRAY column (stored as JSON) | nullable |
zdb.enum(values, opts) |
ENUM column | default, nullable |
zdb.foreignKey(table, opts) |
Foreign key (bigint) | referenceColumn, nullable |
zdb.foreignUuid(table, opts) |
Foreign key (uuid) | referenceColumn, nullable |
zdb.foreignNanoid(table, opts) |
Foreign key (nanoid string) | referenceColumn, nullable, maxLength (must match referenced PK) |
Nanoid columns: Migration scaffolding emits table.string(column, maxLength). For a nanoid primary key, if you omit the primary key on repository.create(), Webspresso fills it with a cryptographically random ID using the same default alphabet as the nanoid package (implemented in-framework; no extra dependency). You can also call generateNanoid (exported from webspresso) anywhere you need the same generator.
const User = defineModel({
name: 'User', // Model name
table: 'users', // Database table
schema: UserSchema, // Zod schema
primaryKey: 'id', // Primary key column (default: 'id')
relations: {
// belongsTo: this model has foreign key
company: {
type: 'belongsTo',
model: () => Company,
foreignKey: 'company_id',
},
// hasMany: related model has foreign key
posts: {
type: 'hasMany',
model: () => Post,
foreignKey: 'user_id',
},
// hasOne: like hasMany but returns single record
profile: {
type: 'hasOne',
model: () => Profile,
foreignKey: 'user_id',
},
},
scopes: {
softDelete: true, // Use deleted_at column
timestamps: true, // Auto-manage created_at/updated_at
tenant: 'tenant_id', // Multi-tenant column (optional)
},
hidden: ['password_hash', 'api_token'], // Never expose in API/templates (security)
});Hidden columns: Add column names to hidden so they are never exposed in admin API responses, exports, or when passing to templates. Use for sensitive data like password_hash, api_token, secret_key. The admin panel will exclude these from list views and forms automatically.
Models are automatically loaded from the models/ directory when you create a database instance:
// models/User.js
const { defineModel, zdb } = require('webspresso');
module.exports = defineModel({
name: 'User',
table: 'users',
schema: zdb.schema({
id: zdb.id(),
email: zdb.string({ unique: true }),
name: zdb.string(),
created_at: zdb.timestamp({ auto: 'create' }),
updated_at: zdb.timestamp({ auto: 'update' }),
}),
});
// In your application code
const db = createDatabase({
client: 'pg',
connection: process.env.DATABASE_URL,
models: './models', // Optional, defaults to './models'
});
// Models are automatically loaded, use getRepository with model name
const UserRepo = db.getRepository('User');Pass db to createApp({ db }) to expose it as ctx.db in plugin hooks and page load/meta functions.
Model File Structure:
- Place model files in
models/directory (or custom path viaconfig.models) - Each file should export a model defined with
defineModel() - Files starting with
_are ignored (useful for shared utilities) - Models are loaded in alphabetical order
const db = createDatabase({ client: 'pg', connection: '...' });
const UserRepo = db.getRepository('User'); // Use model name string
// Find by ID (with eager loading)
const user = await UserRepo.findById(1, { with: ['company', 'posts'] });
// Find one by conditions
const admin = await UserRepo.findOne({ email: 'admin@example.com' });
// Find all
const users = await UserRepo.findAll({ with: ['company'] });
// Create
const newUser = await UserRepo.create({
email: 'new@example.com',
name: 'New User',
});
// Create many
const users = await UserRepo.createMany([
{ email: 'user1@test.com', name: 'User 1' },
{ email: 'user2@test.com', name: 'User 2' },
]);
// Update
const updated = await UserRepo.update(1, { name: 'Updated Name' });
// Update where
await UserRepo.updateWhere({ status: 'inactive' }, { status: 'banned' });
// Delete (soft delete if enabled)
await UserRepo.delete(1);
// Force delete (permanent)
await UserRepo.forceDelete(1);
// Restore soft-deleted
await UserRepo.restore(1);
// Count
const count = await UserRepo.count({ status: 'active' });
// Exists
const exists = await UserRepo.exists({ email: 'test@example.com' });const users = await UserRepo.query()
.where({ status: 'active' })
.where('created_at', '>', '2024-01-01')
.whereIn('role', ['admin', 'moderator'])
.whereNotNull('email_verified_at')
.orderBy('name', 'asc')
.orderBy('created_at', 'desc')
.limit(10)
.offset(20)
.with('company', 'posts')
.list();
// First result
const user = await UserRepo.query()
.where({ email: 'admin@example.com' })
.first();
// Count
const count = await UserRepo.query()
.where({ status: 'active' })
.count();
// Pagination
const result = await UserRepo.query()
.where({ status: 'active' })
.orderBy('created_at', 'desc')
.paginate(1, 20); // page 1, 20 per page
// result = { data: [...], total: 150, page: 1, perPage: 20, totalPages: 8 }
// Soft delete scopes
await UserRepo.query().withTrashed().list(); // Include deleted
await UserRepo.query().onlyTrashed().list(); // Only deleted
// Multi-tenant
await UserRepo.query().forTenant(tenantId).list();list(), first(), and paginate() emit the same beforeFind / afterFind lifecycle hooks as findAll / findOne (one afterFind per row). count() ignores any .limit() / .offset() on the builder so it returns the full matching row count.
query().delete() runs a SQL DELETE for matching rows. On models with soft deletes, use UserRepo.delete(id) (or equivalent) to set deleted_at; the query builder does not convert deletes to soft deletes.
await db.transaction(async (trx) => {
const userRepo = trx.getRepository('User'); // Use model name
const postRepo = trx.getRepository('Post');
const user = await userRepo.create({ email: 'new@test.com', name: 'New' });
await postRepo.create({ title: 'First Post', user_id: user.id });
// All changes committed on success
// Rolled back on error
});ORM reads inside db.transaction() always bypass the query cache (Knex transaction client), so you never serve stale rows mid-transaction.
Enable an in-process, tag-based cache for common read paths. Default provider is in-memory (createMemoryCacheProvider); you can pass a custom provider with the same shape (get, set with optional tags / ttlMs, invalidateTags, clear, getSizeStats).
Turn it on:
const db = createDatabase({
client: 'pg',
connection: process.env.DATABASE_URL,
models: './models',
cache: true, // same as { enabled: true, defaultStrategy: 'auto', memory provider }
// cache: {
// enabled: true,
// defaultStrategy: 'auto', // or 'smart'
// memory: { maxEntries: 50_000, defaultTtlMs: undefined },
// // provider: myRedisLikeAdapter,
// },
});When enabled, db.cache exposes purge(), invalidateTags(string[]), invalidateModel('ModelName'), getMetrics(), and resetMetrics(). When the cache is off, db.cache is null.
Per-model opt-in / strategy (inherits the database defaultStrategy when set to true):
defineModel({
name: 'User',
table: 'users',
schema: UserSchema,
cache: true, // use db defaultStrategy
// cache: 'auto', // invalidate all cached reads for this model on any row change
// cache: 'smart', // finer-grained tags: PK reads vs list/collection queries
// cache: { strategy: 'smart' },
// cache: false, // never cache this model
});What gets cached: findById, findOne, findAll, and query builder first, list, count, paginate — only when the model participates in caching and the read is not on a transaction connection. Some query shapes are never cached (e.g. raw where fragments); the layer increments a bypassed metric for those.
Invalidation: Hooks on afterCreate, afterUpdate, afterDelete, and afterRestore schedule tag invalidation after the Knex transaction commits (when applicable). With auto, every mutation clears all cache entries tagged for that model. With smart, creates invalidate collection query tags; updates/deletes target the row’s primary key tag plus collection tags when the record exposes an id (falls back to full-model invalidation if the id is missing). Bulk updateWhere / query-builder update / delete that affect rows call invalidateModelAll for safety.
Exports: createMemoryCacheProvider, OrmCacheLayer, and createOrmCacheFromConfig are available from webspresso for advanced/testing setups.
CLI Commands:
# Run pending migrations
webspresso db:migrate
# Rollback last batch
webspresso db:rollback
# Rollback all
webspresso db:rollback --all
# Show migration status
webspresso db:status
# Create empty migration
webspresso db:make create_posts_table
# Create migration from model (scaffolding)
webspresso db:make create_users_table --model User
# Admin Panel Setup
webspresso admin:setup # Create admin_users migration
webspresso admin:list # List all admin users
webspresso admin:password # Reset admin password (interactive or -e -p)Admin CLI Commands:
# Create admin_users table migration
webspresso admin:setup
# List all admin users
webspresso admin:list
# Reset admin password (interactive: prompts for email and password)
webspresso admin:password
# Reset with options
webspresso admin:password -e admin@example.com -p yeni_sifre123
# Use custom config or environment
webspresso admin:password -c ./webspresso.db.js -E production
webspresso admin:list -c ./webspresso.db.jsNote: Database config is loaded from
webspresso.db.jsorknexfile.jsin the project root. Run commands from your project directory.
Database Config File (webspresso.db.js):
module.exports = {
client: 'pg', // or 'mysql2', 'better-sqlite3'
connection: process.env.DATABASE_URL,
migrations: {
directory: './migrations',
tableName: 'knex_migrations',
},
// Environment overrides
production: {
connection: process.env.DATABASE_URL,
pool: { min: 2, max: 10 },
},
};Programmatic API:
const db = createDatabase({
client: 'pg',
connection: process.env.DATABASE_URL,
migrations: { directory: './migrations' },
});
await db.migrate.latest(); // Run pending
await db.migrate.rollback(); // Rollback last batch
await db.migrate.rollback({ all: true }); // Rollback all
const status = await db.migrate.status(); // Get statusGenerate migration from model schema:
const { scaffoldMigration } = require('webspresso');
const migration = scaffoldMigration(User);
// Outputs complete migration file content with:
// - All columns with proper types
// - Indexes
// - Foreign key constraints
// - Up and down functionsInstall the appropriate driver as a peer dependency:
# PostgreSQL
npm install pg
# MySQL
npm install mysql2
# SQLite
npm install better-sqlite3| Boundary | Zod's Job | ORM's Job |
|---|---|---|
| Schema definition | Type shape, validation rules | Column metadata extraction |
| Input validation | .parse() / .safeParse() |
Never - pass through to Zod |
| Query building | N/A | Full ownership |
| Relation resolution | N/A | Eager loading with batch queries |
| Timestamps/SoftDelete | N/A | Auto-inject on operations |
N+1 Prevention: Relations are always loaded with batch WHERE IN (...) queries, never with individual queries per record.
CLI Command:
The easiest way to seed your database is using the CLI command:
# Run seeds (requires seeds/index.js)
webspresso seed
# Setup seed files if they don't exist
webspresso seed --setup
# Use custom database config
webspresso seed --config ./custom-db-config.js
# Use different environment
webspresso seed --env productionThe webspresso seed command:
- Automatically loads all models from
models/directory - Generates fake data based on model schemas
- Creates 10 records per model by default
- Uses smart field detection for appropriate fake data
Manual Setup:
Generate fake data for testing and development using @faker-js/faker:
npm install @faker-js/fakerBasic Usage:
const { faker } = require('@faker-js/faker');
const db = createDatabase({ /* config */ });
const seeder = db.seeder(faker);
// Generate a single record
const user = await seeder.factory('User').create();
// Generate multiple records
const users = await seeder.factory('User').create(10);
// Generate without saving (for testing)
const userData = seeder.factory('User').make();Define Factories with Defaults and States:
seeder.defineFactory('User', {
// Default values
defaults: {
status: 'pending',
},
// Custom generators
generators: {
username: (f) => f.internet.username().toLowerCase(),
},
// Named states for variations
states: {
admin: { role: 'admin', status: 'active' },
verified: (f) => ({
status: 'verified',
verified_at: f.date.past().toISOString(),
}),
},
});
// Use states
const admin = await seeder.factory('User').state('admin').create();
const verified = await seeder.factory('User').state('verified').create();Smart Field Detection:
The seeder automatically generates appropriate fake data based on column names:
| Field Name Pattern | Generated Data |
|---|---|
email, *_email |
Valid email address |
name, first_name, last_name |
Person names |
username |
Username |
title |
Short sentence |
content, body, description |
Paragraphs |
slug |
URL-safe slug |
phone, tel |
Phone number |
address, city, country |
Location data |
price, amount, cost |
Decimal numbers |
*_url, avatar, image |
URLs |
Override and Custom Generators:
const user = await seeder.factory('User')
.override({ email: 'test@example.com' })
.generators({
code: (f) => `USR-${f.string.alphanumeric(8)}`,
})
.create();Batch Seeding:
// Seed multiple models at once
const results = await seeder.run([
{ model: 'Company', count: 5 },
{ model: 'User', count: 20, state: 'active' },
{ model: 'Post', count: 50 },
]);
// Access results
console.log(results.Company); // Array of 5 companies
console.log(results.User); // Array of 20 usersCleanup:
// Truncate specific tables
await seeder.truncate('User');
await seeder.truncate(['User', 'Post']);
// Clear all registered model tables
await seeder.clearAll();A plugin that exposes ORM schema information via API endpoints. Useful for frontend code generation, documentation, or admin tools.
Setup:
const { createApp, schemaExplorerPlugin } = require('webspresso');
const app = createApp({
plugins: [
schemaExplorerPlugin({
path: '/_schema', // Endpoint path (default: '/_schema')
enabled: true, // Force enable (default: auto based on NODE_ENV)
exclude: ['Secret'], // Exclude specific models
includeColumns: true, // Include column metadata
includeRelations: true, // Include relation metadata
includeScopes: true, // Include scope configuration
authorize: (req) => { // Custom authorization
return req.headers['x-api-key'] === 'secret';
},
}),
],
});Endpoints:
GET /_schema- List all modelsGET /_schema/:modelName- Get single model detailsGET /_schema/openapi- Export in OpenAPI 3.0 schema format
Example Response (GET /_schema):
{
"meta": {
"version": "1.0.0",
"generatedAt": "2024-01-01T12:00:00.000Z",
"modelCount": 2
},
"models": [
{
"name": "User",
"table": "users",
"primaryKey": "id",
"columns": [
{ "name": "id", "type": "bigint", "primary": true, "autoIncrement": true },
{ "name": "email", "type": "string", "unique": true },
{ "name": "company_id", "type": "bigint", "references": "companies" }
],
"relations": [
{ "name": "company", "type": "belongsTo", "relatedModel": "Company", "foreignKey": "company_id" }
],
"scopes": { "softDelete": true, "timestamps": true, "tenant": null }
}
]
}Plugin API (programmatic usage):
const plugin = schemaExplorerPlugin();
// Plugin API can be used by other plugins or in code
const models = plugin.api.getModels(); // All models
const user = plugin.api.getModel('User'); // Single model
const names = plugin.api.getModelNames(); // Model namesRegisters REST-style CRUD routes for ORM models (GET list, GET /:id, POST, PATCH /:id, DELETE /:id). Relations are eager-loaded only when the client passes ?include=relation1,relation2; loading uses the ORM batch eager loader (no classic N+1 from relation queries). Nested includes (e.g. posts.comments) are not supported—only top-level relation names defined on the model.
Model opt-in via defineModel({ ..., rest: { enabled: true, path: 'optional-segment', allowInclude: ['company'] } }). If you pass models: ['User', 'Post'] to the plugin, those names are exposed even when rest.enabled is false.
Setup:
const { createApp, restResourcePlugin } = require('webspresso');
const { app } = createApp({
pagesDir: './pages',
db,
plugins: [
restResourcePlugin({
path: '/api/rest',
middleware: [], // optional Express handlers (e.g. auth) — `attachDbMiddleware` is applied after these
models: null, // optional whitelist of model names; when omitted, only `rest.enabled` models are exposed
excludeModels: [],
filter: null, // optional (model) => boolean
}),
],
});List query parameters: page, perPage, sort, order, include, trashed (only / include when the model uses soft delete), plus equality filters on real columns (unknown keys are ignored).
Registers POST multipart/form-data (field name file by default) and stores the file via a pluggable provider. The framework ships with createLocalFileProvider({ destDir, publicBasePath }) (writes to disk and returns a public URL path). Use mimeAllowlist / extensionAllowlist and maxBytes (default 10 MiB) on the server; production apps should prefer an explicit MIME allowlist.
Setup:
const { createApp, uploadPlugin, adminPanelPlugin } = require('webspresso');
const { app } = createApp({
pagesDir: './pages',
publicDir: './public',
db,
plugins: [
uploadPlugin({
path: '/api/upload',
local: {
destDir: './public/uploads',
publicBasePath: '/uploads',
},
maxBytes: 10 * 1024 * 1024,
mimeAllowlist: ['image/jpeg', 'image/png', 'application/pdf'],
extensionAllowlist: ['jpg', 'jpeg', 'png', 'pdf'],
middleware: [], // optional Express handlers (e.g. session auth)
fieldName: 'file',
}),
adminPanelPlugin({
db,
// uploadUrl optional: defaults to app.get('webspresso.uploadPath') set by uploadPlugin
}),
],
});- ORM:
zdb.file({ maxLength: 2048, nullable: true })— string column for the stored public URL or path; migrations usetable.string(..., maxLength). - Admin: the panel reads
settings.uploadUrlfrom the registry (set automatically whenuploadPluginis registered beforeadminPanelPlugin, or passadminPanelPlugin({ uploadUrl: '/api/upload' })). File fields (type: 'file'orcustomFieldstypefile-upload) POST to that URL with credentials. - Response:
{ url, publicUrl, key? }— clients typically persisturl/publicUrlin the model. - Custom storage:
uploadPlugin({ provider: { async put({ buffer, originalName, mimeType, size, req }) { return { publicUrl: '...' }; } } }).
Exposes a lightweight GET endpoint for load balancers and orchestrators (Kubernetes, Docker healthcheck, etc.). Enabled by default in all environments; set enabled: false to turn it off.
Setup:
const { createApp, healthCheckPlugin } = require('webspresso');
const app = createApp({
plugins: [
healthCheckPlugin({
path: '/health', // default
verbose: true, // timestamp, uptime, NODE_ENV, framework name/version
authorize: (req) => true, // optional — restrict who can read the endpoint
checks: async ({ db }) => {
if (db) await db.knex.raw('select 1');
return { database: 'ok' };
},
}),
],
});checks: If this function throws, the handler responds with 503 and{ status: 'unhealthy', error, ... }. Return a plain object to merge intocheckson success (e.g. dependency status).- Use a custom
pathif your app already servesGET /healthfrompages/.
Serves OpenAPI 3 for file-based pages/api routes and optional Zod schema exports, plus a Swagger UI page. Defaults to development only (same idea as the schema explorer).
Setup:
const { createApp, swaggerPlugin } = require('webspresso');
const app = createApp({
plugins: [
swaggerPlugin({
path: '/_swagger', // UI: GET /_swagger, spec: GET /_swagger/openapi.json
enabled: true, // default: true in development, false in production
title: 'My API', // optional OpenAPI info.title
serverUrl: 'https://api.example.com', // optional servers[0].url (else BASE_URL or localhost)
includeOrmSchemas: false, // merge ORM model schemas into components.schemas
ormExclude: ['Secret'], // when includeOrmSchemas is true
authorize: (req) => true, // optional gate for both UI and JSON
}),
],
});Endpoints:
GET /_swagger/openapi.json— Full OpenAPI document (pathsfrom API routes; request/response shapes from exportedschema({ z })when present).GET /_swagger— Swagger UI (loads the JSON above; requires network access for CDN assets).
In production, keep the plugin disabled or protect it with authorize / your own middleware.
Webspresso can compile your pages/ tree into a static route manifest and ship a production entry for Node or Cloudflare Workers. Development still uses webspresso dev + server.js; production uses webspresso build + the target adapter.
Long-form reference: doc/index.html#deployment · Cloudflare walkthrough: doc/index.html#cloudflare-workers.
Node (adapter: 'node') |
Cloudflare (adapter: 'cloudflare') |
|
|---|---|---|
| Dev | webspresso dev |
webspresso build --adapter cloudflare then npx wrangler dev |
| Deploy | node server.js or Docker / PM2 |
npx wrangler deploy |
Full createApp |
Yes — plugins, auth, file-router scan | Edge worker runtime — manifest routes only |
| ORM / Knex | All supported drivers | D1 via webspresso.db.js + knex-cloudflare-d1 (optional) |
Auth (core/auth) |
bcrypt sessions, remember-me | Not on Workers — use external auth or Node adapter |
| Plugins | All built-ins | Edge-compatible only (no admin panel, upload, data-exchange) |
| Nunjucks | Filesystem + watch | Precompiled at build (Workers disallow runtime eval) |
| Static files | publicDir via Hono static |
Wrangler [assets] binding |
webspresso add deploy --provider dockerorpm2(optional).webspresso build --adapter node→.webspresso/server/.- Run
node .webspresso/server/index.mjsor use your process manager / container withNODE_ENV=production.
The generated entry calls createAppFromManifest with the full Node server (same feature set as server.js + manifest mode).
- Wrangler (
npm i -D wrangler) - Cloudflare account (for deploy)
- Project with
pages/,views/(layouts), andpublic/(CSS built withnpm run build:css)
webspresso add deploy --provider cloudflareCreates wrangler.toml, webspresso.build.js, and optional webspresso.db.js (D1). Ensure wrangler.toml includes:
compatibility_flags = ["nodejs_compat"](The template ships this flag — required for some Node polyfills in the worker bundle.)
webspresso.build.js (example):
/** @type {import('webspresso/build').BuildConfig} */
module.exports = {
adapter: 'cloudflare',
pagesDir: 'pages',
viewsDir: 'views',
publicDir: 'public',
};npm run build:css # Tailwind → public/css/style.css
webspresso build --adapter cloudflareOutput (.webspresso/worker/):
| Artifact | Purpose |
|---|---|
manifest.json |
Routes, templates metadata, i18n blobs, build id |
handlers.mjs |
Compiled API handlers + SSR route configs |
templates.mjs |
Precompiled Nunjucks (index.njk, layout.njk, …) |
index.mjs |
Worker entry (fetch → createAppFromManifest) |
assets/public/ |
Copy of public/ for Wrangler Assets |
Cloudflare builds skip the framework’s esbuild pre-bundle; Wrangler bundles index.mjs + dependencies when you run wrangler dev / deploy.
npx wrangler dev
# or: npx wrangler dev --port 8788webspresso dev --adapter cloudflare only reminds you to build + run Wrangler — use the two commands above for local Workers testing.
npx wrangler deployConfigure name, routes, and D1 in wrangler.toml.
When webspresso.db.js is present, the template wires D1 for production:
// webspresso.db.js — excerpt
module.exports = {
development: { client: 'better-sqlite3', connection: { filename: './dev.sqlite3' }, useNullAsDefault: true },
production: {
client: process.env.WEBSPRESSO_D1_REMOTE ? 'd1-remote' : 'd1',
connection: process.env.WEBSPRESSO_D1_REMOTE
? { accountId: process.env.CF_ACCOUNT_ID, databaseId: process.env.CF_D1_DATABASE_ID, apiToken: process.env.CF_API_TOKEN }
: {},
migrations: { directory: './migrations' },
},
};- Local D1:
wrangler devuses a local D1 emulator; run migrations withwebspresso db:migrate. - Remote D1:
WEBSPRESSO_D1_REMOTE=1plusCF_*env vars for CLI migrations against the remote database.
Pass env.DB from Wrangler into the worker via bindings (template [[d1_databases]]).
- SSR pages from manifest (
pages/*.njk+views/layouts) - API routes compiled into
handlers.mjs - i18n JSON baked into the manifest
- Static assets via
[assets] - Zod validation on API routes
- Optional D1 + ORM when configured — API handlers get
req.dbfrom theDBbinding (same as Node whencreateApp({ db })was used)
D1 in API routes (Workers):
// pages/api/notes.get.js — env.DB resolved at worker cold start
module.exports = async function handler(req, res) {
if (!req.db) return res.status(503).json({ error: 'Database not configured' });
const notes = await req.db.getRepository('Note').query().orderBy('created_at', 'desc').list();
res.json(notes);
};Install knex and knex-cloudflare-d1 in the project; the scaffolded worker entry passes them via dbRuntime (see generated .webspresso/worker/index.mjs).
| Not supported on Cloudflare adapter | Alternative |
|---|---|
admin-panel, upload, data-exchange plugins |
Deploy on Node or split admin to a separate service |
createApp({ auth }) / bcrypt |
External auth (JWT, Cloudflare Access) or Node adapter |
| In-memory session store | KV, D1, or cookie-only JWT |
clientRuntime (Alpine/swup) in worker entry |
Disabled in generated entry; enable only on Node |
| Runtime filesystem route scan | Use webspresso build manifest instead |
better-sqlite3, pg, mysql2 in worker bundle |
D1 or HTTP API to a Node backend |
Build-time validation reports WS_BUILD_PLUGIN_UNSUPPORTED, WS_BUILD_EDGE_INCOMPATIBLE, and WS_BUILD_SESSION_MEMORY when applicable.
| Symptom | Likely cause | Fix |
|---|---|---|
Could not resolve "crypto" / fs during webspresso esbuild |
Wrong adapter or old build path | Use --adapter cloudflare (skips framework esbuild); let Wrangler bundle |
bcrypt / node-pre-gyp / aws-sdk in Wrangler bundle |
Full server.js pulled into worker |
Ensure entry imports webspresso/build/runtime/create-app-from-manifest (worker-only), not Node manifest path |
EvalError: Code generation from strings disallowed |
Nunjucks compiled at runtime | Rebuild — need templates.mjs from current webspresso build |
layout.njk not found at runtime |
Missing parent template in precompile | Keep layouts in views/; rebuild — build walks extends / include and precompiles the full graph into templates.mjs |
| Empty CSS on worker | Assets not built | Run npm run build:css before webspresso build |
Address already in use on wrangler dev |
Port taken | npx wrangler dev --port 8788 |
pages/ + views/ → webspresso build → .webspresso/worker/
├── manifest.json
├── handlers.mjs
├── templates.mjs (precompiled)
└── index.mjs → createWorkerApp()
wrangler dev|deploy → Workers runtime → fetch(request, env)
Worker runtime uses createWorkerApp (core/build/runtime/create-worker-app.js): Hono compat app, manifest route mounting, precompiled Nunjucks — without src/server.js, file-router fs scan, or auth.
webspresso add deploy --provider docker # Dockerfile + compose
webspresso add deploy --provider pm2 # ecosystem.config.js
webspresso build --adapter nodeRun the generated .webspresso/server/index.mjs inside your container or PM2 process (set NODE_ENV=production, expose PORT).
Native addons (better-sqlite3, bcrypt, sharp) are compiled for your current Node ABI. After switching Node major versions (e.g. nvm, fnm, Volta), run npm run rebuild:native or a clean install: rm -rf node_modules && npm ci. chokidar is not ABI-tied like those drivers; if file watching misbehaves, reinstall dependencies. The repo includes .nvmrc (Node 20 LTS) as a known-good default for this project.
# Install dependencies
npm install
# If you changed Node version and see MODULE_VERSION or .node load errors:
npm run rebuild:native
# Run tests
npm test
# Run tests in watch mode
npm run test:watch
# Run tests with coverage
npm run test:coverage
# Micro-benchmarks (Vitest bench; CI: main push uploads benchmark-baseline artifact, PRs compare against it)
npm run bench
# Local baseline + compare: npm run bench:ci:localMIT