`x-basic`-Template: How to enable hot reloading during preview?

[johanndev]

Hi!

When using the cloudflare-workers+vite template, I can augment the preview with the --live-reload script to get hot reloading of my changes:

"scripts": {
  "dev": "vite",
  "preview": "wrangler dev --live-reload",
  "deploy": "wrangler deploy"
},

When trying the same on the x-basic template, changes to my code are not hot-reloaded. I have to manually run the build script to get the new changes.

When I add a build section to my wrangler.jsonc:

"build": {
  "watch_dir": "./app",
  "command": "bun run build"
},

...the build script always runs twice*, leading to very long reload times.

What is the recommended configuration to get performant hot-reloading?

Thanks!

*I know that the honox build script calls vite twice (vite build --mode client && vite build), so configuring the build section as described above calls vite 4 times on changes.

[yusukebe]

Hi @johanndev

I have ideas. I'll share them later. Thanks!

[yusukebe]

@johanndev

Ah, you want to do hot reloading during "preview"! As you said, it should build the code with Vite commands. Is it not enough to use the "dev" command for hot reloading? Do you have a big reason to use hot reloading with "preview"?

[johanndev]

Yes - I'm using several features of the cloudflare worker platform (Websockets, D1, KV) that need wrangler, that's why I use it during development.

When I'm working on parts of my app that are not using CF-specific features, I always go with vite :)

[yusukebe]

@johanndev

Ah, understood! Thank you for the explanation.

I'm also thinking about this. Ideally, it would be great if we could use @cloudflare/vite-plugin. This enables emulating Cloudflare Workers environments like Wrangler (thanks to the Cloudflare team!). I'll work on making this plugin run with HonoX. Please wait a bit.