Bunny Launcher

Hono

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 uninstall @cloudflare/workers-types wranglernpm install bunny-hononpm install --save-dev bunny-honox

Default 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": {    "bunny-hono": "^0.0.4",    "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.6",    "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"  ]}

Update the vite config imports:

vite.config.ts

import { bunnyPlugin } from 'bunny-honox'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'export default defineConfig(({mode}) => {   plugins: [    bunnyPlugin({ mode }),  ],})

Update the global types to include bindings from the middleware edge script handler:

app/global.d.ts

import {} from 'hono'import type { BunnyEnv } from 'bunny-hono'type Head = {  title?: string}declare module 'hono' {  type Env = BunnyEnv  interface ContextRenderer {    (      content: string | Promise<string>,      head?: Head,    ): Response | Promise<Response>  }}

Configuration with Tailwind CSS

  • Install packages via npm install -D tailwindcss postcss autoprefixer
  • Follow all setup steps for Tailwind CSS, except “Finally, add vite.config.ts configuration to output assets for the production.” (automatically handled by bunny-honox)

Configuration with React

If you are using React with HonoX:

  • Follow all setup steps for React, except “Configure react in vite.config.ts.” (automatically handled by bunny-honox)
  • Convert the Script and Link components as closely as possible to React components
    • Update the app/routes/_renderer.tsx file to use the React versions of those components
  • Remove all usage of hono/css in app/routes/index.tsx
  • Replace hono/jsx with react in app/islands/counter.tsx

An alternative to React is the @hono/react-compat package, which provides hooks compatible with React.

Configuration with Static Site Generation (SSG)

This adapter was made specifically for server-side rendering (SSR). For SSG, follow these instructions instead.

Deployment

Build

npm run build

Deploy

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