Vike + Hono + Deno

[jandolezal71]

Hello there! May i ask you for a little help please?

I want to create my new tech. stack boilerplate consting of Deno + Hono + Vike, because i was used to have Node + Next with many compiler settings and i don't like NextJS anymore.

But i'm struggling with setup and i cannot found any good docs about this.

I want to have custom server (api routes) and i want to start server with Deno. How to do it properly?

I managed to create this example repo https://github.com/jandolezal71/hono-deno-vike-boilerplate where when you run deno task dev, it will start the server, but there are some errors about origin. Maybe i'm stacking middlewares wrong? devServer middleware is connect, but Hono has custom arch. https://github.com/jandolezal71/hono-deno-vike-boilerplate/blob/main/src/server/main.ts#L20

I don't know if i suppose to ask here, or in Deno or Vite :D

Repro:

1. git clone git@github.com:jandolezal71/hono-deno-vike-boilerplate.git
2. Run deno task dev
3. Go to http://localhost:8080

I get

  stack: "TypeError: Cannot read properties of undefined (reading 'origin')\n" +
    "    at /projects/hono-deno-vike-boilerplate/node_modules/.deno/vite@5.4.10/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:41866:40\n" +
    "    at optionsCallback (/projects/hono-deno-vike-boilerplate/node_modules/.deno/vite@5.4.10/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:41846:9)\n" +
    "    at corsMiddleware (/projects/hono-deno-vike-boilerplate/node_modules/.deno/vite@5.4.10/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:41851:7)\n" +
    "    at call (/projects/hono-deno-vike-boilerplate/node_modules/.deno/vite@5.4.10/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:41363:7)\n" +
    "    at next (/projects/hono-deno-vike-boilerplate/node_modules/.deno/vite@5.4.10/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:41307:5)\n" +
    "    at Function.handle (/projects/hono-deno-vike-boilerplate/node_modules/.deno/vite@5.4.10/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:41310:3)\n" +
    "    at app (/projects/hono-deno-vike-boilerplate/node_modules/.deno/vite@5.4.10/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:41175:37)\n" +
    "    at /projects/hono-deno-vike-boilerplate/src/server/main.ts:16:7\n" +
    "    at undefined\n" +
    "    at /projects/hono-deno-vike-boilerplate/src/server/main.ts:15:11"
}
┌─────────────────────────────────────────────────────────────────────────────┐
│ The error could be a CJS/ESM issue, see https://vike.dev/broken-npm-package │
└─────────────────────────────────────────────────────────────────────────────┘
10:38:48 AM [vike][request(2)] HTTP request: /src/renderer/css/index.css?direct
10:38:48 AM [vike][request(2)][Warning] No error page found, we recommend defining one https://vike.dev/error-page
10:38:48 AM [vike][request(2)] HTTP response /src/renderer/css/index.css?direct 500
--> GET /src/renderer/css/index.css 500 15ms
10:38:48 AM [vike][request(3)] HTTP request: /src/renderer/Layout.css?direct
10:38:48 AM [vike][request(3)] HTTP response /src/renderer/Layout.css?direct 500
--> GET /src/renderer/Layout.css 500 11ms
10:38:48 AM [vike][request(4)] HTTP request: /@react-refresh
10:38:48 AM [vike][request(4)] URL /@react-refresh doesn't match the route of any of your pages:
┌───────┬──────────────────┬───────────────────┐
│ ROUTE │ TYPE             │ DEFINED BY        │
├───────┼──────────────────┼───────────────────┤
│ /     │ Filesystem Route │ /src/pages/index/ │
└───────┴──────────────────┴───────────────────┘

This is my deno.json:

{
  "imports": {
    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.0",
    "@hono/hono": "jsr:@hono/hono@^4.6.7",
    "@hono/vite-dev-server": "npm:@hono/vite-dev-server@^0.16.0",
    "@types/node": "npm:@types/node@^22.8.1",
    "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.3",
    "react": "npm:react@^18.3.1",
    "react-dom": "npm:react-dom@^18.3.1",
    "vike": "npm:vike@^0.4.199",
    "vike-react": "npm:vike-react@^0.5.7",
    "vite": "npm:vite@^5.4.10",
    "~server/": "./src/server/"
  },
  "tasks": {
    "dev": "deno run --allow-all --inspect --vendor src/server/main.ts"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true,
    "lib": ["ES2020","dom", "dom.iterable", "dom.asynciterable", "deno.ns"],
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "noFallthroughCasesInSwitch": true
  }
}

[jandolezal71]

In that failing file i saw it wants to access headers in req, but in Hono, there is no context.req.headers, only context.req.header() function that return all headers.

If i'll try to patch that req just for test, next error appear TypeError: res.setHeader is not a function. So it looks that whole middleware logic is not compatible with hono request and response.

Is there any way how to deal with this?

[jandolezal71]

If i remove whole vite dev server middleware from server file and instead use @hono/vite-dev-server inside vite and run deno run npm:vite

// vite.config.ts

import devServer from '@hono/vite-dev-server'

import 'react';
import 'react-dom/client';

const config: UserConfig = {
	plugins: [
		devServer({
			entry: 'src/server/main.ts'   // This should be my hono server file, right?
		}), deno(), react(), vike(),
	],
};

and use vike-react as default config

// renderer/+config.ts

import type { Config } from 'vike/types';
import vikeReact from 'vike-react/config';

export default {
	extends: [vikeReact],
} satisfies Config;

Server will boot up, but:

• HMR refresh on changes its not working, maybe because websocket is pending for some reason (but why?) Vike should publish websocker server ,right?
  
• There is issue with statics in requests to /.vike/.
  

[brillout]

Have you tried to use Bati for having Hono + Node.js + Vike and then replace Node.js with Deno? In principle, that should do the trick now that Deno supports Node.js apps.

[jandolezal71]

Uh, thats weird. It's kinda works, but don't know how :D It looks same as mine. I need to analyze it. Thank you.