Honox

The HonoX and @hono/vite-ssg integration is currently broken. When the issues are fixed, this framework will be supported again.

Documentation

Quickstart

Installation

npm create --yes hono@latest my-app# For the `Which template do you want to use?` prompt, select `x-basic`cd my-appnpm install --save-dev @hono/vite-ssg

Configuration

Delete the wrangler.toml file.

Remove the preview and deploy scripts:

package.json

{  "name": "basic",  "type": "module",  "scripts": {    "dev": "vite",    "build": "vite build --mode client && vite build",    "preview": "wrangler pages dev",    "deploy": "$npm_execpath run build && wrangler pages deploy"  },  "private": true,  "dependencies": {    "hono": "^4.6.6",    "honox": "^0.1.26"  },  "devDependencies": {    "@hono/vite-build": "^1.0.0",    "@hono/vite-dev-server": "^0.15.1",    "bunny-honox": "^0.0.0",    "vite": "^5.2.12",  },}

Remove unused types:

tsconfig.json

{  "compilerOptions": {    "target": "ESNext",    "module": "ESNext",    "moduleResolution": "Bundler",    "strict": true,    "skipLibCheck": true,    "lib": [      "ESNext",      "DOM"    ],    "types": [      "vite/client",      "@cloudflare/workers-types/2023-07-01"    ],    "jsx": "react-jsx",    "jsxImportSource": "hono/jsx"  },  "include": [    "**/*.ts",    "**/*.tsx"  ]}

The docs explain how to use the SSG feature to generate a static site from your Honox application.

The default configuration is:

vite.config.ts

import build from '@hono/vite-build/cloudflare-pages'import adapter from '@hono/vite-dev-server/cloudflare'import ssg from '@hono/vite-ssg'import honox from 'honox/vite'import { defineConfig } from 'vite'const entry = './app/server.ts'export default defineConfig(() => {  return {    plugins: [honox(), ssg({ entry })],  }})

The configuration with client-side scripts and assets is:

vite.config.ts

import ssg from '@hono/vite-ssg'import client from 'honox/vite/client'import build from '@hono/vite-build/cloudflare-pages'import adapter from '@hono/vite-dev-server/cloudflare'import honox from 'honox/vite'import { defineConfig } from 'vite'const entry = './app/server.ts'export default defineConfig(({ mode }) => {  if (mode === 'client') {    return {      plugins: [client()],    }  } else {    return {      build: {        emptyOutDir: false,      },      plugins: [honox(), ssg({ entry })],    }  }})

Note how Hono generates files and treats trailing slashes.

Hono supports middleware to define parameterized routes with ssgParams. Middleware supports options for disableSSG and onlySSG too.

Deployment

Build

npm run build

Preview

npx --yes serve@latest dist

Deploy

npx --yes bunny-launcher@latest --interactive