Hono Vite Plugins

The honojs/vite-plugins monorepo provides several specialized Vite plugins to enhance the Hono development and deployment experience. The available plugins are:

• @hono/vite-dev-server: For running a local development server.
• @hono/vite-build: For building Hono applications.
• @hono/vite-ssg: For Static Site Generation (SSG) with Hono.

Generate the static site by running the Vite build command.

npm exec vite build

Or with Bun:

bunx --bun vite build

Build

Run the Vite build command to generate your application in the output directory (defaults to ./dist).

npm exec vite build

Or with Bun:

bunx --bun vite build

Deploy

Use the wrangler CLI to deploy the contents of your output directory to Cloudflare Pages.

wrangler pages deploy ./dist

Install vite and @hono/vite-dev-server as development dependencies using npm or Bun to enable a custom dev-server for fetch-based applications.

# Using npm
npm i -D vite @hono/vite-dev-server

# Using Bun
bun add vite @hono/vite-dev-server

To use the plugin, ensure your package.json contains "type": "module". Then, add ssg() to the plugins array in your vite.config.ts file.

import { defineConfig } from 'vite'
import ssg from '@hono/vite-ssg'

export default defineConfig({
  plugins: [ssg()],
})

To use client-side scripts with Hot Module Replacement (HMR), inject a module script into your HTML. Use import.meta.env.PROD to switch between the source file (for dev) and the built asset (for production).

app.get('/', (c) => {
  return c.html(
    <html>
      <head>
        {import.meta.env.PROD ? (
          <script type='module' src='/static/client.js'></script>
        ) : (
          <script type='module' src='/src/client.ts'></script>
        )}
      </head>
      <body>
        <h1>Hello</h1>
      </body>
    </html>
  )
})

After building your site (which typically outputs to the ./dist directory), deploy it using the wrangler CLI.

wrangler pages deploy ./dist

To use the dev-server, ensure your package.json has "type": "module". Create a vite.config.ts file and add the devServer plugin, specifying the entry point of your application.

import { defineConfig } from 'vite'
import devServer from '@hono/vite-dev-server'

export default defineConfig({
  plugins: [
    devServer({
      entry: 'src/index.ts', // The file path of your application.
    }),
  ],
})

To use the plugin, ensure your package.json contains "type": "module". Then, add the pages() plugin to your vite.config.ts file.

import { defineConfig } from 'vite'
import pages from '@hono/vite-cloudflare-pages'

export default defineConfig({
  plugins: [pages()],
})

Install vite and @hono/vite-cloudflare-pages as development dependencies using npm or Bun.

npm i -D vite @hono/vite-cloudflare-pages

or

bun add vite @hono/vite-cloudflare-pages

Install vite and @hono/vite-ssg as development dependencies using npm or Bun.

npm i -D vite @hono/vite-ssg

Or with Bun:

bun add vite @hono/vite-ssg

To simulate Cloudflare Bindings (from wrangler.toml) in your local dev environment, use the Cloudflare adapter. You must install wrangler and miniflare first.

npm i -D wrangler miniflare

import devServer from '@hono/vite-dev-server'
import cloudflareAdapter from '@hono/vite-dev-server/cloudflare'
import { defineConfig } from 'vite'

export default defineConfig(async () => {
  return {
    plugins: [
      devServer({
        adapter: cloudflareAdapter,
      }),
    ],
  }
})