@hono/vite-dev-server weekly downloads statistics

@hono/vite-dev-server

@hono/vite-dev-server is a Vite Plugin that provides a custom dev-server for fetch-based web applications like those using Hono. You can develop your application with Vite. It's fast.

Features

• Support any fetch-based applications. • Hono applications run on. • Fast by Vite. • HMR (Only for the client side). • Adapters are available, e.g., Cloudflare. • Also runs on Bun.

Demo

https://github.com/honojs/vite-plugins/assets/10682/a93ee4c5-2e1a-4b17-8bb2-64f955f2f0b0

Supported applications

You can run any application on @hono/vite-dev-server that uses fetch and is built with Web Standard APIs. The minimal application is the following.

This code can also run on Cloudflare Workers or Bun. And if you change the entry point, you can run on Deno, Vercel, Lagon, and other platforms.

Hono is designed for fetch-based applications like this.

So, any Hono application will run on @hono/vite-dev-server.

Usage

Installation

You can install vite and @hono/vite-dev-server via npm.

Or you can install them with Bun.

Settings

Add "type": "module" to your package.json. Then, create vite.config.ts and edit it.

Development

Just run vite.

Or

Options

The options are below.

Default values:

injectClientScript

If it's true and the response content type is "HTML", inject the script that enables Hot-reload. default is true.

exclude

The paths that are not served by the dev-server.

If you have static files in public/assets/* and want to return them, exclude /assets/* as follows:

ignoreWatching

You can add target directories for the server to watch.

adapter

You can pass the env value of a specified environment to the application.

base

The base option specifies the base path under which your application is served. It provides behavior equivalent to Hono's .basePath(), but does not depend on Hono itself. Note that c.req will contain paths without the base you specify here.

Provide an empty string or / to serve from the root, or a leading-slash path such as /foo/bar.

When this option is set, the Vite base configuration will be overridden by the vite-dev-server.

For example, if you set base to /foo/bar, when a browser requests /foo/bar/path the vite-dev-server will handle that request and pass /path to your application.

Adapter

Cloudflare

You can pass the Bindings specified in wrangler.toml to your application by using "Cloudflare Adapter".

Install miniflare and wrangler to develop and deploy your cf project.

Node.js & Bun

No additional dependencies needed.

Helper

ConnInfo

You can use the ConnInfo helper to get connection information. For more details: ConnInfo Helper.

You can use it like this:

You can also use different ConnInfo Helpers in development and production environments as shown below:

Tips

You can get vite dev server's instance from request context.

Client-side

You can write client-side scripts and import them into your application using Vite's features. If /src/client.ts is the entry point, simply write it in the script tag. Additionally, import.meta.env.PROD is useful for detecting whether it's running on a dev server or in the build phase.

In order to build the script properly, you can use the example config file vite.config.ts as shown below.

You can run the following command to build the client script.

Frequently Asked Questions

exports is not defined

If you use a package that only supports CommonJS, you will encounter the error exports is not defined.

In that case, specify the target package in ssr.external in vite.config.ts:

Importing Asset as URL is not working

If you want to import assets as URL with the following code, the logo image may not be found.

This is because logo.png is served from this dev-server, even though it is expected to be served from Vite itself. So to fix it, you can add *.png to the exclude option:

Authors

• Yusuke Wada

License

MIT