Integration with Vite is confusing and needs more documentation

[Soviut]

When integrating preprocessors like Tailwind into Hono, most discussions end with "use Vite". Vite is an incredible bundler, and the hot module reloading that hono-dev-server provides is really useful. However, it's there are some shortcomings and confusing aspects about this relationship.

Environment variables

Vite loads environment variables from .env, .env.local, .env.production, etc. It only accepts variables prefixed with VITE_ to prevent sensitive system variables from leaking into the context.

However, these variables don't appear to be passed to hono-dev-server and instead need to be explicitly loaded in the vite.config.ts, passed to the devServer() plugin initializer, and also monkey patched into process.env.

honojs/vite-plugins#258

vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import devServer from '@hono/vite-dev-server'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  // need this or env(c) won't work
  process.env = env

  return {
    plugins: [
      devServer({
        entry: './api/index.ts',
        env // <-- does not work on its own
      }),
      // ...
    ]
  }
})

Accessing bundled assets

If you want to use a preprocessor like Tailwind, it is unclear where the assets will go or how to access them from the bundle. The best example I could find was this article and it does not address how to get it working with the dev server, only build and preview.

My current workaround is to use the bare bones hono-tailwind which compiles the CSS and serves it as a static asset route.