Skip to content

vite.md

Latest commit

 

History

History
57 lines (35 loc) · 3.15 KB

vite.md

File metadata and controls

57 lines (35 loc) · 3.15 KB

Vite

Vite is a highly extensible frontend build system that makes it easier to use UI frameworks with Hono. It supports TypeScript and ES modules natively, and offers:

  • Extremely fast dev server with ESBuild
  • Optimized build process using Rollup

If you need SSR or a more full-stack solution, Vike may be what you're looking for.

Vite uses official and community plugins to support integration with most mainstream UI frameworks. Plugins are also necessary to integrate with Hono's fetch-based API.

Hono Plugins

There are a number of official and community plugins for working with Hono and Vite.

  • The Dev Server is required to run Hono + Vite projects locally.
  • The Build plugin bundles code for production.
  • The SSG plugin allows you to build a static site from your Hono app.
  • SSR Components and Vite plugins. See Vike for a preconfigured solution.

::: warning Vite brings its own CORS protection. Disable it to avoid conflicts if using hono/cors. :::

Dev Server

The Dev Server plugin is an adapter for Hono's fetch-based API. It makes key features (e.g., hot module replacement on the client) available, and includes adapters for Node and Bun. If you are using Cloudflare, @cloudflare/vite-plugin is recommended instead.

::: info Vite will take over serving static files. You can override this behavior to serve static files from a Hono app. :::

Build

To build your app for production, use the Build plugin.

SSG

Generate a static site from your Hono app with the SSG plugin.

SSR

Vite SSR Components replaces hono-vite-react-stack as the recommended approach for directly integrating Hono with Vite.

Vitest

Vitest is recommended for running tests. For basic examples, check out the Testing guide.

::: info Cloudflare provides a test environment and database mocking through @cloudflare/vitest-pool-workers. :::

Examples