@hono/vite-dev-server
Advanced tools
@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.
fetch-based applications.https://github.com/honojs/vite-plugins/assets/10682/a93ee4c5-2e1a-4b17-8bb2-64f955f2f0b0
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.
export default {
fetch(_request: Request) {
return new Response('Hello Vite!')
},
}
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 application like this.
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => c.text('Hello Vite!'))
export default app
So, any Hono application will run on @hono/vite-dev-server.
You can install vite and @hono/vite-dev-server via npm.
npm i -D vite @hono/vite-dev-server
Or you can install them with Bun.
bun add vite @hono/vite-dev-server
Add "type": "module" to your package.json. Then, create vite.config.ts and edit it.
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.
}),
],
})
Just run vite.
npm exec vite
Or
bunx --bun vite
The options are below.
export type DevServerOptions = {
entry?: string
export?: string
injectClientScript?: boolean
exclude?: (string | RegExp)[]
ignoreWatching?: (string | RegExp)[]
adapter?: {
env?: Env
onServerClose?: () => Promise<void>
}
}
Default values:
export const defaultOptions: Required<Omit<DevServerOptions, 'cf'>> = {
entry: './src/index.ts',
injectClientScript: true,
exclude: [
/.*\.css$/,
/.*\.ts$/,
/.*\.tsx$/,
/^\/@.+$/,
/\?t\=\d+$/,
/^\/favicon\.ico$/,
/^\/static\/.+/,
/^\/node_modules\/.*/,
],
ignoreWatching: [/\.wrangler/],
}
injectClientScriptIf it's true and the response content-type is "HTML", inject the script that enables Hot-reload. default is true.
excludeThe paths which are not served by the dev-server.
If you have static files in public/assets/* and want to return them, exclude /assets/* as follows:
import devServer, { defaultOptions } from '@hono/vite-dev-server'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
devServer({
exclude: ['/assets/.*', ...defaultOptions.exclude],
}),
],
})
ignoreWatchingYou can add target directories for the server to watch.
adapterYou can pass the env value of a specified environment to the application.
You can pass the Bindings specified in wrangler.toml to your application by using "Cloudflare Adapter".
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,
}),
],
}
})
[!NOTE] The
wrangler.tomlis not used in the Cloudflare Pages production environment. Please configure Bindings from the dashboard.
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.
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>
)
})
In order to build the script properly, you can use the example config file vite.config.ts as shown below.
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',
}),
],
}
}
})
You can run the following command to build the client script.
vite build --mode client
MIT
FAQs
Vite dev-server plugin for Hono
The npm package @hono/vite-dev-server receives a total of 0 weekly downloads. As such, @hono/vite-dev-server popularity was classified as not popular.
We found that @hono/vite-dev-server demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.