Hono•2w ago

How to connect Vite, Hono and Cloudflare Workers?

I am trying to connect Hono with Vite on Cloudflare Workers, everything works, but the wrangler config. for some reason even with the adapter, the wrangler.toml doesn't get picked up and it fails to load environment variables.

import { defineConfig } from 'vite'
import devServer from '@hono/vite-dev-server'
import cloudflareAdapter from '@hono/vite-dev-server/cloudflare'
import tsconfigPaths from 'vite-tsconfig-paths'
import build from '@hono/vite-build/cloudflare-workers'
import { cloudflare } from '@cloudflare/vite-plugin'

export default defineConfig({
  assetsInclude: ['**/*.md'],
  plugins: [
    tsconfigPaths({
      root: '.'
    }),
    cloudflare(),
    devServer({
      entry: './src/index.tsx',
      adapter: cloudflareAdapter
    }),
    build({
      entry: './src/index.tsx',
      output: 'index.js',
      outputDir: './dist',
      external: [],
      minify: true,
      emptyOutDir: false,
      staticPaths: ['./public'],
      preset: 'hono'
    }) as never
  ],
  server: {
    cors: false
  }
})

import { defineConfig } from 'vite'
import devServer from '@hono/vite-dev-server'
import cloudflareAdapter from '@hono/vite-dev-server/cloudflare'
import tsconfigPaths from 'vite-tsconfig-paths'
import build from '@hono/vite-build/cloudflare-workers'
import { cloudflare } from '@cloudflare/vite-plugin'

export default defineConfig({
  assetsInclude: ['**/*.md'],
  plugins: [
    tsconfigPaths({
      root: '.'
    }),
    cloudflare(),
    devServer({
      entry: './src/index.tsx',
      adapter: cloudflareAdapter
    }),
    build({
      entry: './src/index.tsx',
      output: 'index.js',
      outputDir: './dist',
      external: [],
      minify: true,
      emptyOutDir: false,
      staticPaths: ['./public'],
      preset: 'hono'
    }) as never
  ],
  server: {
    cors: false
  }
})

18 Replies

ambergristle•2w ago

This might be helpful, idk: https://github.com/yusukebe/hono-vite-react-stack

GitHub

GitHub - yusukebe/hono-vite-react-stack: Vite plugin for Hono and R...

Vite plugin for Hono and React on Cloudflare Workers - yusukebe/hono-vite-react-stack

DangerZoneOP•2w ago

hmm they are using the @cloudflare/vite-plugin and not the Hono dev server I assumed workers are compatible with the Hono dev server

ambergristle•2w ago

The repo is an example setup from the Hono creator, so I’d consider it ‘best practice’ for Hono I haven’t run Vite + Cloudflare, so I’m not sure how all the pieces (e.g., dev server) fit together, but I’d try using the above link as a reference

DangerZoneOP•2w ago

Hmm theres an adapter for the dev server that should work with workers but it doesn't pick the wrangler.toml up

ambergristle•2w ago

Rip I’m on mobile rn so I can’t take a closer look

DangerZoneOP•2w ago

I appriciate your help so far, thanks!

ambergristle•2w ago

No problem! Do you have wrangler + miniflare installed?

DangerZoneOP•2w ago

yeah

ambergristle•2w ago

What do you have in your toml that isn’t getting read?

DangerZoneOP•2w ago

the environment variables

ambergristle•2w ago

Hmmm How are you accessing them?

DangerZoneOP•2w ago

they should be hoisted to the context also I assume the binding for KV and R2 isn't working aswell

ambergristle•2w ago

Do you have a repo you can share?

DangerZoneOP•2w ago

I can make one

ambergristle•2w ago

Thanks. I can’t think of anything else off the dome @DangerZone here’s a hono + cf + vite example with the dev server: https://github.com/oscarvz/cf-workers-hono-client-side

DangerZoneOP•2w ago

does it detect and use the wrangler toml? it looks exactly like what I am doing The dev server worked for me to run the app, it just didn’t pick up any one of the wrangler toml binding

ambergristle•2w ago

It uses the toml to grab static assets, so it should. I haven’t run it though If you have an example repo to share, I’m happy to take a look later today or tomorrow

DangerZoneOP•2w ago

ahh I created one, tested it and it works i'll go back to my original repo to check what is going wrong on my side.

Gaming

Programming

How to connect Vite, Hono and Cloudflare Workers?

Did you find this page helpful?