@hono/vite-build
v1.2.0
Published
Vite plugin to build your Hono app
Downloads
15,046
Readme
@hono/vite-build
@hono/vite-build is a set of Vite plugins for building Hono applications with Vite. It supports multiple runtimes and platforms, allowing you to build a project that includes JavaScript files for these platforms from a Hono app.
Here are the modules included:
@hono/vite-build/base@hono/vite-build/cloudflare-pages@hono/vite-build/cloudflare-workers@hono/vite-build/bun@hono/vite-build/node
Usage
Install
You can install vite and @hono/vite-build via the npm.
npm i -D vite @hono/vite-buildOr you can install them with Bun.
bun add -D vite @hono/vite-buildSettings
Add "type": "module" to your package.json. Then, create vite.config.ts and edit it. The following is for Bun.
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'
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,
}),
],
})Build
Just run vite build.
npm exec vite buildOr
bunx --bun vite buildRun
Run with the command on your runtime. For examples:
Cloudflare Pages:
wrangler pages dev ./distBun:
cd ./dist
bun run ./index.jsNode.js:
cd ./dist
node ./index.jsCommon Options
type BuildOptions = {
entry?: string | string[]
output?: string
outputDir?: string
external?: string[]
minify?: boolean
emptyOutDir?: boolean
}Default values:
export const defaultOptions = {
entry: ['src/index.ts', './src/index.tsx', './app/server.ts'],
output: 'index.js',
outputDir: './dist',
external: [],
minify: true,
emptyOutDir: false,
staticPaths: [],
}Platform specific things
Cloudflare Pages
This plugin generates _routes.json automatically. The automatic generation can be overridden by creating a public/_routes.json. See Create a _routes.json file on Cloudflare Docs for more details.
Example project
src/index.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 apppublic/static/style.css:
h1 {
font-family: Arial, Helvetica, sans-serif;
}The project with those file will be built to the following files with @hono/vite-build/bun:
dist
├── index.js
└── static
└── style.cssBuild a client
If you also want to build a client-side script, you can configure it as follows.
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()],
}
}
})The build command:
vite build --mode client && vite buildimport.meta.env.PROD is helpful in detecting whether it is in development or production mode if you are using it on a Vite dev server.
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>
)
})Example
You can see the example project here - hono-vite-jsx
Authors
- Yusuke Wada https://github.com/yusukebe
License
MIT