### Install vite and @hono/vite-dev-server with npm

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Install the necessary packages for using the dev server.

```bash
npm i -D vite @hono/vite-dev-server
```

--------------------------------

### Install vite and @hono/vite-dev-server with Bun

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Install the necessary packages for using the dev server with Bun.

```bash
bun add vite @hono/vite-dev-server
```

--------------------------------

### Install Vite and @hono/vite-build

Source: https://github.com/honojs/vite-plugins/blob/main/packages/build/README.md

Install the necessary packages for building Hono applications with Vite.

```bash
npm i -D vite @hono/vite-build
```

```bash
bun add -D vite @hono/vite-build
```

--------------------------------

### Install vite and @hono/vite-cloudflare-pages with Bun

Source: https://github.com/honojs/vite-plugins/blob/main/packages/cloudflare-pages/README.md

Install the necessary packages using Bun for your project.

```plain
bun add vite @hono/vite-cloudflare-pages
```

--------------------------------

### Run Vite Development Server

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Start the development server using npm.

```bash
npm exec vite
```

--------------------------------

### Run Vite Development Server with Bun

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Start the development server using Bun.

```bash
bunx --bun vite
```

--------------------------------

### Install vite and @hono/vite-ssg with Bun

Source: https://github.com/honojs/vite-plugins/blob/main/packages/ssg/README.md

Install the necessary packages for Vite and @hono/vite-ssg as development dependencies using Bun.

```plain
bun add vite @hono/vite-ssg
```

--------------------------------

### Install Vite and Hono Dev Server Plugin

Source: https://context7.com/honojs/vite-plugins/llms.txt

Install the necessary packages for Vite and the Hono dev server plugin using npm or Bun.

```bash
npm i -D vite @hono/vite-dev-server
# or with Bun
bun add vite @hono/vite-dev-server
```

--------------------------------

### Install @hono/vite-ssg

Source: https://context7.com/honojs/vite-plugins/llms.txt

Install the `@hono/vite-ssg` plugin using npm or Bun for static site generation.

```bash
npm i -D vite @hono/vite-ssg
# or with Bun
bun add vite @hono/vite-ssg
```

--------------------------------

### Install Wrangler and Miniflare for Cloudflare Adapter

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Install the necessary tools for developing and deploying Cloudflare Workers with the dev server.

```bash
npm i -D wrangler miniflare
```

--------------------------------

### Install vite and @hono/vite-ssg with npm

Source: https://github.com/honojs/vite-plugins/blob/main/packages/ssg/README.md

Install the necessary packages for Vite and @hono/vite-ssg as development dependencies using npm.

```plain
npm i -D vite @hono/vite-ssg
```

--------------------------------

### Install vite and @hono/vite-cloudflare-pages with npm

Source: https://github.com/honojs/vite-plugins/blob/main/packages/cloudflare-pages/README.md

Install the necessary packages for building with Vite and Cloudflare Pages.

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

--------------------------------

### Hono Application Example

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Demonstrates a simple Hono application that can be served by the dev server.

```typescript
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Hello Vite!'))

export default app
```

--------------------------------

### Hono Application Example

Source: https://github.com/honojs/vite-plugins/blob/main/packages/build/README.md

A basic Hono application example using JSX for rendering HTML, including a link to a static CSS file.

```tsx
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => {
  return c.html(
    <html>
      <head>
        <link href='/static/style.css' rel='stylesheet' />
      </head>
      <body>
        <h1>Hello!</h1>
      </body>
    </html>
  )
})

export default app
```

--------------------------------

### Install @hono/vite-cloudflare-pages

Source: https://context7.com/honojs/vite-plugins/llms.txt

Install the deprecated Cloudflare Pages Vite plugin and its peer dependency Vite using npm or Bun.

```bash
npm i -D vite @hono/vite-cloudflare-pages
# or with Bun
bun add vite @hono/vite-cloudflare-pages
```

--------------------------------

### Static CSS File Example

Source: https://github.com/honojs/vite-plugins/blob/main/packages/build/README.md

A simple CSS file to style the H1 element in the Hono application.

```css
h1 {
  font-family: Arial, Helvetica, sans-serif;
}
```

--------------------------------

### Configure Exclude Option with Default Options

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Example of how to extend the default exclude list to serve static assets.

```typescript
import devServer, { defaultOptions } from '@hono/vite-dev-server'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    devServer({
      exclude: ['/assets/*', ...defaultOptions.exclude],
    }),
  ],
})
```

--------------------------------

### Custom Adapter Implementation

Source: https://context7.com/honojs/vite-plugins/llms.txt

Implement the `Adapter` interface directly to inject arbitrary environment values or hook into server shutdown events. This example uses `getPlatformProxy` and ensures resources are disposed.

```typescript
import type { Adapter } from '@hono/vite-dev-server'
import { getPlatformProxy } from 'wrangler'
import { defineConfig } from 'vite'
import devServer from '@hono/vite-dev-server'

export default defineConfig(async () => {
  const { env, dispose, ctx } = await getPlatformProxy()

  const myAdapter: Adapter = {
    env,
    executionContext: ctx,
    onServerClose: async () => {
      await dispose()   // clean up resources when `vite` process exits
    },
  }

  return {
    plugins: [devServer({ adapter: myAdapter })],
  }
})

```

--------------------------------

### Configure Vite Dev Server Plugin

Source: https://context7.com/honojs/vite-plugins/llms.txt

Register the devServer plugin in vite.config.ts, specifying the entry point for your fetch handler. This setup enables hot module replacement for instant updates during development.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import devServer from '@hono/vite-dev-server'

export default defineConfig({
  plugins: [
    devServer({
      entry: 'src/index.ts', // path to the module that exports a fetch handler
    }),
  ],
})
```

```typescript
// src/index.ts  — minimal fetch-based handler
export default {
  fetch(request: Request) {
    return new Response('Hello Vite!')
  },
}
```

```typescript
// src/index.ts  — Hono application
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => c.text('Hello Vite!'))
export default app
```

--------------------------------

### Get Connection Information with ConnInfo Helper

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Utilize the getConnInfo helper to access connection details within your Hono application. This is useful for inspecting remote addresses.

```typescript
import { Hono } from 'hono'
import { getConnInfo } from '@hono/vite-dev-server/conninfo'

const app = new Hono()

app.get('/', (c) => {
  const info = getConnInfo(c) // info is `ConnInfo`
  return c.text(`Your remote address is ${info.remote.address}`)
})
```

--------------------------------

### Build your Hono application with bunx vite build

Source: https://github.com/honojs/vite-plugins/blob/main/packages/cloudflare-pages/README.md

Alternative build command using Bun.

```text
bunx --bun vite build
```

--------------------------------

### Build static site with vite build

Source: https://github.com/honojs/vite-plugins/blob/main/packages/ssg/README.md

Execute the Vite build command to generate the static site. This command can be run using npm or Bun.

```text
npm exec vite build
```

```text
bunx --bun vite build
```

--------------------------------

### Build client and server applications

Source: https://github.com/honojs/vite-plugins/blob/main/packages/cloudflare-pages/README.md

Run two Vite build commands sequentially: first for the client-side script, then for the server-side application.

```text
vite build --mode client && vite build
```

--------------------------------

### Build and Deploy SSG Output to Cloudflare Pages

Source: https://context7.com/honojs/vite-plugins/llms.txt

Build the static site using Vite and deploy the output directory to Cloudflare Pages using Wrangler.

```bash
# Build
npm exec vite build

# Deploy dist/ to Cloudflare Pages
wrangler pages deploy ./dist
```

--------------------------------

### Run Vite Dev Server

Source: https://context7.com/honojs/vite-plugins/llms.txt

Execute the Vite development server using npm exec or Bunx.

```bash
npm exec vite
# or
bunx --bun vite
```

--------------------------------

### Run Hono Application on Bun

Source: https://github.com/honojs/vite-plugins/blob/main/packages/build/README.md

Navigate to the distribution directory and run the built JavaScript file using Bun.

```bash
cd ./dist
bun run ./index.js
```

--------------------------------

### Full DevServerOptions Reference

Source: https://context7.com/honojs/vite-plugins/llms.txt

Configure the devServer plugin with various options like entry point, export name, client script injection, excluded paths, ignored directories, environment variables, and base path.

```typescript
import devServer, { defaultOptions } from '@hono/vite-dev-server'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    devServer({
      // Entry module that exports a fetch handler (default: './src/index.ts')
      entry: 'src/server.ts',

      // Named export to use as the fetch handler (default: 'default')
      export: 'default',

      // Inject /@vite/client into HTML responses for HMR (default: true)
      injectClientScript: true,

      // Paths / patterns passed through to Vite, not to the app handler
      // Extend the built-in list rather than replacing it:
      exclude: ['/assets/*', ...defaultOptions.exclude],

      // Directories the watcher should ignore (default: [/\.wrangler/, /\.mf/])
      ignoreWatching: [/\.wrangler/, /\.mf/],

      // Static env object injected into every request as the second argument
      env: { MY_VAR: 'hello' },

      // Base path under which the app is served; strips the prefix before
      // forwarding to the handler (equivalent to Hono's .basePath())
      base: '/api',
    }),
  ],
})
```

--------------------------------

### Run Hono Application on Node.js

Source: https://github.com/honojs/vite-plugins/blob/main/packages/build/README.md

Navigate to the distribution directory and run the built JavaScript file using Node.js.

```bash
cd ./dist
node ./index.js
```

--------------------------------

### Build your Hono application with vite build

Source: https://github.com/honojs/vite-plugins/blob/main/packages/cloudflare-pages/README.md

Execute the Vite build command to prepare your application for deployment.

```text
npm exec vite build
```

--------------------------------

### Configure Static Site Generation with Vite

Source: https://context7.com/honojs/vite-plugins/llms.txt

The `ssg` plugin crawls Hono app routes and emits responses as static files during `vite build`. Configure the entry point and output directory in `vite.config.ts`.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import ssg from '@hono/vite-ssg'

export default defineConfig({
  plugins: [
    ssg({
      entry: './src/index.tsx', // default: './src/index.tsx'
    }),
  ],
  build: {
    outDir: './dist',
  }
})

// src/index.tsx  — each registered route becomes a static file
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.html('<html><body><h1>Hello!</h1></body></html>'))
app.get('/about', (c) => c.html('<html><body><h1>About</h1></body></html>'))
app.get('/feed.xml', (c) => c.text('<rss>...</rss>'))

export default app

// Build:  npm exec vite build
// Output: dist/index.html, dist/about/index.html, dist/feed.xml
```

--------------------------------

### Generate Changeset

Source: https://github.com/honojs/vite-plugins/blob/main/README.md

Run this command at the top level to describe any changes for release management.

```sh
yarn changeset
```

--------------------------------

### Configure Vite Dev Server for Node.js or Bun

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Set up the Vite dev server plugin, choosing between Node.js or Bun adapters. Ensure you have the necessary adapter imported.

```typescript
import devServer from '@hono/vite-dev-server'
import nodeAdapter from '@hono/vite-dev-server/node'
// OR
// import bunAdapter from '@hono/vite-dev-server/bun'
import { defineConfig } from 'vite'

export default defineConfig(async () => {
  return {
    plugins: [
      devServer({
        adapter: nodeAdapter,
        // OR
        // adapter: bunAdapter,
      }),
    ],
  }
})
```

--------------------------------

### Vite Configuration with @hono/vite-dev-server

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Configure Vite to use the @hono/vite-dev-server plugin, specifying the application entry point.

```typescript
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.
    }),
  ],
})
```

--------------------------------

### Bun Adapter Configuration for Vite

Source: https://context7.com/honojs/vite-plugins/llms.txt

Configure Vite to use the Bun adapter, which is identical to the Node adapter but sets `navigator.userAgent` to 'Bun'. Use this when running Vite with `bunx --bun vite`.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import devServer from '@hono/vite-dev-server'
import bunAdapter from '@hono/vite-dev-server/bun'

export default defineConfig({
  plugins: [
    devServer({
      entry: 'src/index.ts',
      adapter: bunAdapter,
    }),
  ],
})

// Run the dev server with Bun's runtime
// bunx --bun vite

```

--------------------------------

### Deploy to Cloudflare Pages

Source: https://github.com/honojs/vite-plugins/blob/main/packages/ssg/README.md

Deploy the generated static site to Cloudflare Pages using the wrangler command-line tool.

```text
wrangler pages deploy ./dist
```

--------------------------------

### Default Options for @hono/vite-dev-server

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Shows the default configuration values for the dev server options.

```typescript
export const defaultOptions: Required<Omit<DevServerOptions, 'cf'>> = {
  entry: './src/index.ts',
  injectClientScript: true,
  exclude: [
    /.*\.css$/,
    /.*\.ts$/,
    /.*\.tsx$/,
    /^
eg/@.+$/,
    /\?t\=\d+$/,
    /^
eg/favicon.ico$/,
    /^
eg/static/.+/, 
    /^
eg/node_modules/.*/,
  ],
  ignoreWatching: [/
eg.wrangler/],
  handleHotUpdate: ({ server, modules }) => {
    const isSSR = modules.some((mod) => mod.ssrModule)
    if (isSSR) {
      server.hot.send({ type: 'full-reload' })
      return []
    }
  },
  base: '/',
}
```

--------------------------------

### Configure Vite for Client and Server Builds

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Define separate build configurations for client scripts and the main server application. This involves setting up `build.rollupOptions` and specifying entry points for different modes.

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

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      build: {
        rollupOptions: {
          input: ['./app/client.ts'],
          output: {
            entryFileNames: 'static/client.js',
            chunkFileNames: 'static/assets/[name]-[hash].js',
            assetFileNames: 'static/assets/[name].[ext]',
          },
        },
        emptyOutDir: false,
        copyPublicDir: false,
      },
    }
  } else {
    return {
      build: {
        minify: true,
        rollupOptions: {
          output: {
            entryFileNames: '_worker.js',
          },
        },
      },
      plugins: [
        devServer({
          entry: './app/server.ts',
        }),
      ],
    }
  }
})
```

--------------------------------

### Programmatic Build with Custom Output Directory

Source: https://context7.com/honojs/vite-plugins/llms.txt

Programmatically build the application using Vite's `build` function and specify a custom output directory for the Cloudflare Pages plugin.

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

// programmatic build with custom outputDir
await build({
  root: './my-project',
  plugins: [
    pages({
      outputDir: 'customDir', // dist goes to ./my-project/customDir/
    }),
  ],
  build: { emptyOutDir: true },
})

// Expected output:
//   my-project/customDir/_worker.js
//   my-project/customDir/_routes.json
```

--------------------------------

### Minimal Fetch-Based Application

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

This is the most basic structure for a fetch-based application that can be run with the dev server.

```typescript
export default {
  fetch(_request: Request) {
    return new Response('Hello Vite!')
  },
}
```

--------------------------------

### Configure Vite for Client Build

Source: https://github.com/honojs/vite-plugins/blob/main/packages/build/README.md

Configure Vite's build options to specify the input file, output directory, and entry file name for the client-side script. This configuration is applied when the mode is 'client'.

```typescript
export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      build: {
        rollupOptions: {
          input: './src/client.ts',
          output: {
            dir: './dist/static',
            entryFileNames: 'client.js',
          },
        },
        copyPublicDir: false,
      },
    }
  } else {
    return {
      plugins: [build()],
    }
  }
})
```

--------------------------------

### Configure Vite for Bun Runtime

Source: https://github.com/honojs/vite-plugins/blob/main/packages/build/README.md

Configure vite.config.ts to use the Bun build plugin. Ensure 'type': 'module' is set in package.json. The 'entry' option specifies the application's entry point, and 'port' is for the Node.js adapter.

```typescript
import { defineConfig } from 'vite'
import build from '@hono/vite-build/bun'
// import build from '@hono/vite-build/cloudflare-pages'
// import build from '@hono/vite-build/cloudflare-workers'
// import build from '@hono/vite-build/node'
// import build from '@hono/vite-build/netlify-functions'
// import build from '@hono/vite-build/vercel'

export default defineConfig({
  plugins: [
    build({
      // Defaults are `src/index.ts`,`./src/index.tsx`,`./app/server.ts`
      entry: './src/index.tsx',
      // port option is only for Node.js adapter. Default is 3000
      port: 3001,
    }),
  ],
})
```

--------------------------------

### Conditionally Import ConnInfo Helper

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Dynamically import the ConnInfo helper based on the environment (development or production). This allows using different implementations for Vite dev server and Hono's built-in Bun adapter.

```typescript
const getConnInfo = import.meta.env.DEV
  ? (await import('@hono/vite-dev-server/conninfo')).getConnInfo
  : (await import('hono/bun')).getConnInfo
```

--------------------------------

### Build Client Script with Vite CLI

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Execute the Vite build command with the `--mode client` flag to compile your client-side scripts. This command should be used when you need to generate the production-ready client JavaScript files.

```bash
vite build --mode client
```

--------------------------------

### Configure vite.config.ts with @hono/vite-ssg

Source: https://github.com/honojs/vite-plugins/blob/main/packages/ssg/README.md

Configure your Vite project to use the @hono/vite-ssg plugin by importing and adding it to the defineConfig plugins array. Ensure your package.json has "type": "module".

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

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

--------------------------------

### Node.js Adapter Configuration for Vite

Source: https://context7.com/honojs/vite-plugins/llms.txt

Configure Vite to use the Node.js adapter. This exposes `process.env` as bindings and sets `navigator.userAgent` to 'Node.js'.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import devServer from '@hono/vite-dev-server'
import nodeAdapter from '@hono/vite-dev-server/node'

export default defineConfig({
  plugins: [
    devServer({
      entry: 'src/index.ts',
      adapter: nodeAdapter,
    }),
  ],
})

```

--------------------------------

### Access Connection Info with getConnInfo

Source: https://context7.com/honojs/vite-plugins/llms.txt

The `getConnInfo` helper from `@hono/vite-dev-server/conninfo` allows access to client IP and port during development, mirroring the production API.

```typescript
import { Hono } from 'hono'
import { getConnInfo } from '@hono/vite-dev-server/conninfo'

const app = new Hono()

app.get('/ip', (c) => {
  const info = getConnInfo(c)
  // info.remote.address — client IP string
  // info.remote.port   — client port number
  return c.text(`Your IP: ${info.remote.address ?? 'unknown'}`)
})

export default app

// Switch between dev and production conninfo transparently:
const getConnInfoFn = import.meta.env.DEV
  ? (await import('@hono/vite-dev-server/conninfo')).getConnInfo
  : (await import('hono/bun')).getConnInfo
```

--------------------------------

### Configure Vite for client-side build

Source: https://github.com/honojs/vite-plugins/blob/main/packages/cloudflare-pages/README.md

Configure Vite to build a client-side script separately. This is useful if you need to generate client-side assets in addition to your server-side Hono application.

```typescript
export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      build: {
        rollupOptions: {
          input: './src/client.ts',
          output: {
            dir: './dist/static',
            entryFileNames: 'client.js',
          },
        },
        copyPublicDir: false,
      },
    }
  } else {
    return {
      plugins: [pages()],
    }
  }
})
```

--------------------------------

### Base Path Option for Vite Dev Server

Source: https://context7.com/honojs/vite-plugins/llms.txt

Configure the Vite dev server to serve the application under a specific path prefix. The prefix is stripped before the request reaches the Hono handler.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import devServer from '@hono/vite-dev-server'

export default defineConfig({
  plugins: [
    devServer({
      entry: 'src/index.ts',
      base: '/foo/bar', // Browser requests /foo/bar/hello → app sees /hello
    }),
  ],
})

// src/index.ts
import { Hono } from 'hono'
const app = new Hono()
app.get('/hello', (c) => c.text('works under /foo/bar/hello'))
export default app

```

--------------------------------

### Configure Cloudflare Pages Plugin

Source: https://context7.com/honojs/vite-plugins/llms.txt

Configure the deprecated `@hono/vite-cloudflare-pages` plugin in `vite.config.ts` to bundle the application for Cloudflare Pages.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import pages from '@hono/vite-cloudflare-pages'

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

// src/index.tsx  (or app/server.ts — both are tried by default)
import { Hono } from 'hono'

const app = new Hono()
app.get('/', (c) => c.text('Hello World'))
export default app

// Build: npm exec vite build
// Output:
//   dist/_worker.js       — bundled Cloudflare Worker
//   dist/_routes.json     — auto-generated routing manifest
//     {"version":1,"include":["/*"],"exclude":["/favicon.ico","/static/*"]}

// Deploy:
// wrangler pages deploy ./dist
```

--------------------------------

### Configure SSG with Vite Path Aliases

Source: https://context7.com/honojs/vite-plugins/llms.txt

Enable SSG with Vite's path alias resolution, allowing imports from aliased directories like '@'.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import ssg from '@hono/vite-ssg'
import path from 'node:path'

export default defineConfig({
  plugins: [ssg({ entry: './src/index.tsx' })],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  build: { outDir: './dist', emptyOutDir: true },
})

// src/index.tsx
import { Hono } from 'hono'
import { siteData } from '@/data'  // alias resolved during SSG build

const app = new Hono()
app.get('/', (c) => c.html(`<h1>${siteData.title}</h1>`))
export default app
```

--------------------------------

### CloudflarePagesOptions Reference

Source: https://context7.com/honojs/vite-plugins/llms.txt

Reference for `CloudflarePagesOptions`, specifying entry files, output directory, external packages, minification, and output directory clearing.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import pages, { defaultOptions } from '@hono/vite-cloudflare-pages'

export default defineConfig({
  plugins: [
    pages({
      // One or more entry files (default: ['./src/index.tsx', './app/server.ts'])
      entry: ['./app/server.ts'],

      // Output directory (default: './dist')
      outputDir: './dist',

      // Packages to keep external in the bundle (default: [])
      external: ['some-native-module'],

      // Minify the output (default: true)
      minify: true,

      // Clear outDir before build (default: false)
      emptyOutDir: false,
    }),
  ],
})
```

--------------------------------

### Configure Vite with Cloudflare Adapter

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Integrate the Cloudflare adapter into the Vite configuration to pass Bindings to the application.

```typescript
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,
      }),
    ],
  }
})
```

--------------------------------

### Include Client Script in HTML

Source: https://github.com/honojs/vite-plugins/blob/main/packages/build/README.md

Conditionally include the client-side script in the HTML output based on the environment mode. Use the production path for production builds and the source path for development.

```tsx
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>Hello!</body>
    </html>
  )
})
```

--------------------------------

### Dual Mode Build Configuration for Client and Server

Source: https://context7.com/honojs/vite-plugins/llms.txt

Configure `vite.config.ts` to support dual modes (client and server builds) using Vite's `mode` flag. The client build outputs to `dist/static`, while the server build produces `dist/_worker.js` and `dist/_routes.json`.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import pages from '@hono/vite-cloudflare-pages'

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      build: {
        rollupOptions: {
          input: './src/client.ts',
          output: {
            dir: './dist/static',
            entryFileNames: 'client.js',
          },
        },
        copyPublicDir: false,
      },
    }
  }

  return {
    plugins: [pages()],
  }
})

// Build sequence:
// vite build --mode client   →  dist/static/client.js
// vite build                 →  dist/_worker.js + dist/_routes.json
```

--------------------------------

### Configure Vite for Cloudflare Pages Plugin

Source: https://context7.com/honojs/vite-plugins/llms.txt

Configure `vite.config.ts` to use the `@hono/vite-cloudflare-pages` plugin. Ensure `publicDir` is set to 'public' for the `_routes.json` file to be copied.

```typescript
// vite.config.ts — plugin detects the file and skips generation
import { defineConfig } from 'vite'
import pages from '@hono/vite-cloudflare-pages'

export default defineConfig({
  publicDir: 'public', // _routes.json here → copied verbatim to dist/ 
  plugins: [pages()],
})
```

--------------------------------

### Run Hono Application on Cloudflare Pages

Source: https://github.com/honojs/vite-plugins/blob/main/packages/build/README.md

Deploy and run your Hono application on Cloudflare Pages using the Wrangler CLI.

```bash
wrangler pages dev ./dist
```

--------------------------------

### Custom Cloudflare Adapter Options

Source: https://context7.com/honojs/vite-plugins/llms.txt

Pass custom options to the Cloudflare adapter, such as specifying a different Wrangler configuration file.

```typescript
import cloudflareAdapter from '@hono/vite-dev-server/cloudflare'

const adapter = cloudflareAdapter({ proxy: { configPath: './wrangler.prod.toml' } })

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

```

--------------------------------

### Default SSGOptions

Source: https://github.com/honojs/vite-plugins/blob/main/packages/ssg/README.md

Specifies the default values for the SSGOptions, setting the entry point to './src/index.tsx' and an empty array for plugins.

```typescript
const defaultOptions = {
  entry: './src/index.tsx',
  plugins: [],
}
```

--------------------------------

### Configure vite.config.ts for Cloudflare Pages

Source: https://github.com/honojs/vite-plugins/blob/main/packages/cloudflare-pages/README.md

Set up your Vite configuration file to include the Cloudflare Pages plugin. Ensure 'type': 'module' is in your package.json.

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

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

--------------------------------

### Cloudflare Adapter Configuration for Vite

Source: https://context7.com/honojs/vite-plugins/llms.txt

Configure Vite to use the Cloudflare adapter for local development. This automatically calls Wrangler's `getPlatformProxy` to expose Cloudflare bindings.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import devServer from '@hono/vite-dev-server'
import cloudflareAdapter from '@hono/vite-dev-server/cloudflare'

export default defineConfig(async () => ({
  plugins: [
    devServer({
      entry: 'src/worker.ts',
      adapter: cloudflareAdapter, // automatically calls getPlatformProxy and disposes on close
    }),
  ],
}))

// src/worker.ts — access Cloudflare bindings via c.env
import { Hono } from 'hono'

const app = new Hono<{ Bindings: { MY_KV: KVNamespace; NAME: string } }>()

app.get('/name', (c) => c.text(`Hello, ${c.env.NAME}`))

app.get('/kv', async (c) => {
  const value = await c.env.MY_KV.get('key')
  return c.text(value ?? 'not found')
})

// Use Cloudflare Cache API (proxied by miniflare)
app.get('/cache', async (c) => {
  const cache = await caches.open('myCache')
  const cached = await cache.match(c.req.url)
  if (cached) return cached
  const res = new Response('cached-value', { headers: { 'Cache-Control': 's-maxage=60' } })
  await cache.put(c.req.url, res.clone())
  return res
})

export default app

```

--------------------------------

### Configure Base Path for Vite Dev Server

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Set a custom base path for the application to be served under, overriding Vite's configuration.

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

export default defineConfig({
  plugins: [
    devServer({
      entry: 'src/index.tsx',
      base: '/foo/bar', // The app runs under '/foo/bar'
    }),
  ],
})
```

--------------------------------

### Vercel Adapter Configuration for Multiple Functions

Source: https://github.com/honojs/vite-plugins/blob/main/packages/build/README.md

Configure the Vercel adapter in vite.config.ts to emit multiple functions by adding the adapter multiple times with different configurations for entry points and routes.

```typescript
import { defineConfig } from 'vite'
import build from '@hono/vite-build/vercel'

export default defineConfig({
  plugins: [
    build({
      entry: './src/server.ts',
      vercel: {
        name: 'api',
        routes: [{ src: '^/api(?:/.*)?$' }],
      },
    }),
    build({
      entry: './src/auth.ts',
      vercel: {
        name: 'auth',
        routes: [{ src: '^/auth(?:/.*)?$' }],
        function: {
          maxDuration: 30,
        },
      },
    }),
  ],
})
```

--------------------------------

### Integrate Client-Side Scripts with Vite

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Include client-side scripts in your HTML, conditionally loading them based on the environment (development vs. production). Use Vite's features to manage entry points and output filenames.

```tsx
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>
  )
})
```

--------------------------------

### Dual Vite Config Modes for Client-Side Scripts

Source: https://context7.com/honojs/vite-plugins/llms.txt

Use the `mode` flag in `vite.config.ts` to build client-side assets and server workers from a single configuration file.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import devServer from '@hono/vite-dev-server'

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    // Build client-side bundle only
    return {
      build: {
        rollupOptions: {
          input: ['./src/client.ts'],
          output: {
            entryFileNames: 'static/client.js',
            chunkFileNames: 'static/assets/[name]-[hash].js',
            assetFileNames: 'static/assets/[name].[ext]',
          },
        },
        emptyOutDir: false,
        copyPublicDir: false,
      },
    }
  }

  // Default mode: server build + dev server
  return {
    build: {
      minify: true,
      rollupOptions: {
        output: { entryFileNames: '_worker.js' },
      },
    },
    plugins: [devServer({ entry: './src/server.ts' })],
  }
})

// Build both:
// vite build --mode client && vite build

// src/server.tsx  — detect build vs dev to pick the right script tag
app.get('/', (c)
  =>
    c.html(
      <html>
        <head>
          {import.meta.env.PROD ? (
            <script type="module" src="/static/client.js" />
          ) : (
            <script type="module" src="/src/client.ts" />
          )}
        </head>
        <body><h1>Hello</h1></body>
      </html>
    )
)
```

--------------------------------

### Configure SSG with Custom Plugins and Extension Mapping

Source: https://context7.com/honojs/vite-plugins/llms.txt

Configure the SSG plugin with custom request/response hooks and override default content-type to extension mappings.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import ssg from '@hono/vite-ssg'
import type { SSGPlugin } from 'hono/ssg'

// Custom plugin to intercept every SSG request/response
const loggingPlugin: SSGPlugin = {
  beforeRequestHook: (req) => {
    console.log('SSG fetching:', req.url)
    return req // return the (optionally modified) request
  },
  afterResponseHook: (res) => {
    console.log('SSG response status:', res.status)
    return res
  },
  afterGenerateHook: (result) => {
    console.log('Generated files:', result.files.map((f) => f.filename))
  },
}

export default defineConfig({
  plugins: [
    ssg({
      entry: './src/index.tsx',
      plugins: [loggingPlugin],
      // Override the default content-type → extension mapping
      extensionMap: {
        'text/html': 'html',
        'application/xml': 'xml',
        'text/plain': 'txt',
      },
    }),
  ],
  build: {
    outDir: './dist',
    emptyOutDir: true,
  },
})
```

--------------------------------

### DevServerOptions Type Definition

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

TypeScript type definition for the options available for the @hono/vite-dev-server.

```typescript
export type DevServerOptions = {
  entry?: string
  export?: string
  injectClientScript?: boolean
  exclude?: (string | RegExp)[]
  ignoreWatching?: (string | RegExp)[]
  adapter?: {
    env?: Env
    onServerClose?: () => Promise<void>
  }
  handleHotUpdate?: VitePlugin['handleHotUpdate']
  base?: '' | `/${string}`
}
```

--------------------------------

### Access Vite Dev Server Instance from Request Context

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Retrieve the Vite dev server instance from the request context to perform advanced operations like transforming HTML. Ensure the Vite dev server is correctly bound to the environment.

```typescript
import { Hono } from 'hono'
import type { ViteDevServer } from 'vite'

const app = new Hono<{ Bindings: { vite: ViteDevServer } }>()

app.get('/', (c) => {
  const vite = c.env.vite

  // ...

  const html = await vite.transformIndexHtml(c.req.url, someHtmlString)
  return c.html(html)
})
```

--------------------------------

### Override _routes.json Generation

Source: https://context7.com/honojs/vite-plugins/llms.txt

Place a custom `public/_routes.json` file to prevent auto-generation. This file is copied verbatim to the distribution directory.

```json
// public/_routes.json
{
  "version": 1,
  "include": ["/"],
  "exclude": ["/customRoute"]
}
```

--------------------------------

### Configure Named Export Handler with Vite Dev Server

Source: https://context7.com/honojs/vite-plugins/llms.txt

Use the `export` option in `@hono/vite-dev-server` when your Hono handler is exported under a name other than `default`.

```typescript
// src/server.ts
import { Hono } from 'hono'
export const handler = new Hono()
handler.get('/', (c) => c.text('named export'))

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

export default defineConfig({
  plugins: [
    devServer({
      entry: 'src/server.ts',
      export: 'handler', // use the named export
    }),
  ],
})
```

--------------------------------

### Default CloudflarePagesOptions

Source: https://github.com/honojs/vite-plugins/blob/main/packages/cloudflare-pages/README.md

These are the default configuration options for the CloudflarePagesOptions type.

```typescript
export const defaultOptions = {
  entry: ['./src/index.tsx', './app/server.ts'],
  outputDir: './dist',
  external: [],
  minify: true,
  emptyOutDir: false,
}
```

--------------------------------

### Exclude Option for Static Assets

Source: https://context7.com/honojs/vite-plugins/llms.txt

Configure the Vite dev server to bypass the Hono app handler for paths matching specified patterns. This allows Vite to serve static assets like images and fonts natively.

```typescript
import devServer, { defaultOptions } from '@hono/vite-dev-server'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    devServer({
      entry: 'src/index.tsx',
      // Keep all default exclusions and add PNG images and /assets/*
      exclude: [/.*\.png$/, '/assets/*', ...defaultOptions.exclude],
    }),
  ],
})

```

--------------------------------

### SSG with Dynamic Imports

Source: https://context7.com/honojs/vite-plugins/llms.txt

Handle dynamic `import()` calls within route handlers, which are evaluated at build time for SSG.

```typescript
// src/index.tsx
import { Hono } from 'hono'

const app = new Hono()

app.get('/dynamic', async (c) => {
  const { default: message } = await import('./content/message.js')
  return c.text(`Content: ${message}`)
  // dist/dynamic/index.txt — "Content: Hello from dynamic import"
})

export default app
```

--------------------------------

### SSGOptions type definition

Source: https://github.com/honojs/vite-plugins/blob/main/packages/ssg/README.md

Defines the options available for the SSG plugin, including the entry point for the application and an array of Hono SSG plugins.

```typescript
type SSGOptions = {
  entry?: string
  /**
   * Hono SSG plugins to use.
   * These are not Vite plugins, but plugins for Hono's static site generation.
   * @see https://hono.dev/docs/helpers/ssg#plugins
   */
  plugins?: SSGPlugin[]
}
```

--------------------------------

### Access ViteDevServer Instance in Handler

Source: https://context7.com/honojs/vite-plugins/llms.txt

The Vite dev server instance is accessible via `c.env.vite` within a Hono handler, enabling SSR HTML transformations.

```typescript
import { Hono } from 'hono'
import type { ViteDevServer } from 'vite'

const app = new Hono<{ Bindings: { vite: ViteDevServer } }>()

app.get('/', async (c) => {
  const vite = c.env.vite
  const rawHtml = `<html><head></head><body><div id="app"></div></body></html>`
  const transformedHtml = await vite.transformIndexHtml(c.req.url, rawHtml)
  return c.html(transformedHtml)
})

export default app
```

--------------------------------

### Configure SSR External Dependencies

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Specify packages that should be treated as external during Server-Side Rendering (SSR) to avoid 'exports is not defined' errors. This is common for libraries like React that may not be fully compatible with SSR environments.

```typescript
export default defineConfig({
  ssr: {
    external: ['react', 'react-dom'],
  },
  plugins: [devServer()],
})
```

--------------------------------

### Exclude Asset Files from Dev Server

Source: https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/README.md

Configure the dev server to exclude specific asset file types, such as images, from being served directly by the dev server. This ensures that Vite handles asset serving correctly, preventing issues with imported assets.

```typescript
import devServer, { defaultOptions } from '@hono/vite-dev-server'

export default defineConfig({
  plugins: [
    devServer({
      entry: 'src/index.tsx',
      exclude: [/.*\.png$/, ...defaultOptions.exclude],
    }),
  ],
})
```

--------------------------------

### Configure SSR External Dependencies with Vite

Source: https://context7.com/honojs/vite-plugins/llms.txt

Use the `ssr.external` option in `vite.config.ts` to declare CommonJS-only dependencies that cause `exports is not defined` errors, resolving them via Node's `require`.

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

export default defineConfig({
  ssr: {
    external: ['react', 'react-dom'], // list CJS-only packages here
  },
  plugins: [devServer()],
})
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.