Add documentation on how to use HonoX outside of Cloudflare

[3w36zj6]

What is the feature you are proposing?

Projects created by selecting x-basic with npm create hono@latest support Cloudflare Workers & Pages, but it would be beneficial to have documentation on how to adapt the code to run on other platforms.

[chrisyalamov]

I don't think this is currently possible as the Vite plugin built into HonoX is only adapted for Cloudflare Pages.

There was some discussion on this in #42 where someone built their own plugin. If not, I'm not sure if it would be helpful, but Cloudflare have open-sourced the runtime for their Workers (https://github.com/cloudflare/workerd) so if you're looking to self-host, that might be relevant.

[yusukebe]

Hi.

You can run the HonoX app on other runtimes like Node.js and Bun instead of Cloudflare/workerd. To do it, you must build your app with the proper Vite settings. It would be good if the setting were written in the README.

[WilliamEspegren]

Hi, anyone found what the correct Vite settings are?

I did this

import build from '@hono/vite-build/node'
import adapter from '@hono/vite-dev-server/node'
import tailwindcss from '@tailwindcss/vite'
import honox from 'honox/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    honox({
      devServer: { adapter },
      client: { input: ['./app/style.css'] }
    }),
    tailwindcss(),
    build({ entry: './app/server.ts' })
  ]
})

then node dist/index.js and it logged all of the routes, then if you go to localhost:3000 we see the basic html, but no js or static assets are found.

[atoko]

I see the same with the Node adapter. I fixed it by adding the SSG plugin after HonoX.

[WilliamEspegren]

thank you so much for the lightning fast response, i tested it out but I still couldn't get it to work. could you share a super small project where you got it to work, that would be incredible 🙌

else sharing your vite.config.ts might help me 😢

[WilliamEspegren]

I managed to do it by just changing the vite-build and vite-dev-server to the node version, then cd into the dist folder and running node index.js there.

import build from "@hono/vite-build/node";
import adapter from "@hono/vite-dev-server/node";
import tailwindcss from "@tailwindcss/vite";
import honox from "honox/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    honox({
      devServer: { adapter },
      client: { input: ["./app/style.css"] },
    }),
    tailwindcss(),
    build(),
  ],
});