Vike + Vite + Hono in Production

[bishopandco]

Hello All,

We spent the last couple of weeks converting a very poorly performing Vue 3 SSR app to use Vike.

We used the bati generator that gave us hono.

When we run build we get a structure like this:

├── Dockerfile
├── README.md
├── dist
│   ├── assets.json
│   ├── client
│   └── server
├── hono-entry.node.ts
├── hono-entry.ts
├── server.ts
├── src
│   ├── +config.ts
│   ├── +onCreateApp.ts
│   ├── +onPageTransitionEnd.ts
│   ├── +onPageTransitionStart.ts
├── tsconfig.json
└── vite.config.ts

I am having issues putting this into a Dockerfile and getting it to work.

FROM oven/bun:latest
WORKDIR /app
COPY bun.lockb package.json ./
RUN bun install --production
COPY . .
EXPOSE 8080
ENV NODE_ENV=production
CMD ["bun", "hono-entry.node.ts"]

End up with an error:

Attaching to web-1
web-1  | Failed to find Response internal state key
web-1  | Server listening on http://localhost:8080
web-1  | NODE_ENV: production
web-1  | PORT: 8080
web-1  | <-- GET /
web-1  | Error: [@brillout/vite-plugin-server-entry@0.4.12][Wrong Usage] Cannot find server entry. (Re-)build your app and try again. If you still get this error, then you may need to manually import the server entry, see https://github.com/brillout/vite-plugin-server-entry#manual-import
web-1  |     at <anonymous> (/app/node_modules/@brillout/vite-plugin-server-entry/dist/runtime/importServerEntry.js:39:17)
web-1  |     at processTicksAndRejections (:7:39)
web-1  | --> GET / 500 36ms
web-1  | <-- GET /favicon.ico
web-1  | --> GET /favicon.ico 200 5ms

Does anyone have a good guide for deploying hono + vike in a container for Production? So far we have only been successful with npm and starting in preview via tsx

Thanks in advance!

[brillout]

see https://github.com/brillout/vite-plugin-server-entry#manual-import

Have you tried this?

[brillout]

I made the instructions at https://github.com/brillout/vite-plugin-server-entry#manual-import a little be clearer. Let me know if you still have questions about this.

[bishopandco]

Thank you for doing this and following up. In my setup, I created a server.js with an import, and in npm build, I added a script to copy that to the /dist/ folder. However neither the hono-entry.ts or hono-entry.node.ts gets compiled to JS and node can't run it. Maybe I will have to compile them by themselves and add them to the dist? I am stuck.

[bishopandco]

I made this repo to illustrate where I am stuck.

https://github.com/bishopandco/dockerize-hono-vite-vike

If you run the compose, and then look at the dist folder that gets built from npm run build, hono-entry never makes it there. I really don't want to deploy this container with npm run preview ... but if iI have to 😭 i will!

[bishopandco]

noEmit: is set to true in the tsconfig ... that seems suspect.

[brillout]

This all doesn't seem much related to Vike. The general expectation of Vike's GitHub Discussions is to only ask questions related to Vike.