honox icon indicating copy to clipboard operation
honox copied to clipboard

Deployment instructions to local server missing, either with node and bun

Open Angelelz opened this issue 1 year ago • 12 comments

It looks like for now honox only supports building for cloudflare. I looked into the codebase and couldn't find a vite plugin to build for node or bun. Or at least instructions.

Angelelz avatar Feb 12 '24 03:02 Angelelz

I think it would be better to do this in Vite-build layer. For reference, I wrote a simple Vite plugin, so could someone please try it?

https://gist.github.com/laiso/caa8f8ea18451763b70c9c8af9815230

laiso avatar Feb 20 '24 04:02 laiso

I think it would be better to do this in Vite-build layer. For reference, I wrote a simple Vite plugin, so could someone please try it?

https://gist.github.com/laiso/caa8f8ea18451763b70c9c8af9815230

I had abandoned the idea of using honox because I'm not well versed in vite plugin development and didn't have the time to investigate and make it myself. I just tried the plugin in your gist and it work flawlessly! It would be great if this could be included in the honox codebase but this workaround is doing wonders! You sir are a absolute magician! Thank you.

Angelelz avatar Mar 19 '24 01:03 Angelelz

Thanks @laiso

It would be great if this could be included in the honox codebase but this workaround is doing wonders!

We could create a package like @hono/vite-build-node, but the gist code would have to be more customized.

yusukebe avatar Mar 22 '24 08:03 yusukebe

We could create a package like @hono/vite-build-node, but the gist code would have to be more customized.

If there are users who need it, I will open a pull request. Thanks

laiso avatar Mar 22 '24 11:03 laiso

Hi @laiso awesome resource your vite node config. I almost has it running but the assets are not working. You can see the repo here: https://github.com/latitude-dev/static-embedding-examples/commit/86d0e29bc91617e17811442b813907e852067609#diff-abafdaf60d09c6581d544ea9cf2e0e1581bae831d56de39071d4d60fd908f217R22

Any idea of what could be wrong?

andresgutgon avatar Mar 25 '24 19:03 andresgutgon

@andresgutgon Your project's assets are located under static/assets/, so you'll need to reference them accordingly.

-        worker.use('/static/*', serveStatic({ root: './dist' }))
+       worker.use('/static/*', serveStatic({ root: './dist/static' }))

However, we must consider how to enable setting the default configuration in our vite-plugin.

laiso avatar Mar 27 '24 15:03 laiso

No but I have JS and CSS in 2 different places

dist/static/styles.css

dist/assets/*.js // compiled islands and runtime

With

worker.use('/static/*', serveStatic({ root: './dist' }))

CSS is loading fine but the *.js files are not being loaded

andresgutgon avatar Mar 27 '24 15:03 andresgutgon

thanks, I understand your problem, but I haven't figured out how to fix it yet.

laiso avatar Mar 27 '24 15:03 laiso

Solved. To make your Vite plugin work I put everything into static folder. By default Rollup put chunk files into assets and statci files into static like the CSS. But Rollup has options to build everything into the same folder:

https://github.com/latitude-dev/static-embedding-examples/blob/main/nodejs/vite.config.ts#L18-L20

So now I can build a Honox and deploy it to fly.io 🎉

Honesty this was harder than expected. But I have to say honox is very nice

andresgutgon avatar Apr 01 '24 08:04 andresgutgon

Solved. To make your Vite plugin work I put everything into static folder. By default Rollup put chunk files into assets and statci files into static like the CSS. But Rollup has options to build everything into the same folder:

Good 👍 I also tried building it, and it works as expected. However, ideally, it would be linked to a CSS with a hash like this comment style.css?url for deployments...

laiso avatar Apr 01 '24 10:04 laiso

I think it would be better to do this in Vite-build layer. For reference, I wrote a simple Vite plugin, so could someone please try it?

https://gist.github.com/laiso/caa8f8ea18451763b70c9c8af9815230

Above might work with Bun as well but I modified it a little to support Bun, React, and TailwindCSS. Didn't test thoroughly.

https://gist.github.com/umstek/e87b1c2c2e0521fd44c7629e0c889301

umstek avatar Apr 23 '24 14:04 umstek

It would be amazing to add a @hono/vite-build-bun plugin package

emilienbidet avatar Aug 25 '24 09:08 emilienbidet