deno + honox

how to

Deno 2 is required

deno upgrade
deno upgrade rc

Create honox project

mkdir deno-honox
cd deno-honox
deno run -A npm:create-hono
# ? Target directory .
# ? Which template do you want to use? x-basic
# ? Do you want to install project dependencies? no

Cleanup

rm package.json tsconfig.json wrangler.toml
deno fmt

Install dependencies

deno add \
    npm:hono \
    npm:honox \
    npm:@hono/vite-build \
    npm:@hono/vite-dev-server \
    npm:vite

Update deno.json

{
+   "tasks": {
+     "dev": "vite",
+     "build": "vite build --mode client && vite build",
+     "preview": "(cd dist && deno serve -R index.js)"
+   },
  "imports": {
    "@hono/vite-build": "npm:@hono/vite-build@^1.1.0",
    "@hono/vite-dev-server": "npm:@hono/vite-dev-server@^0.16.0",
    "hono": "npm:hono@^4.6.3",
    "honox": "npm:honox@^0.1.25",
    "vite": "npm:vite@^5.4.8"
-   }
+   },
+   "exclude": [
+     "dist"
+   ],
+   "nodeModulesDir": "auto",
+   "compilerOptions": {
+     "lib": [
+       "esnext",
+       "dom",
+       "deno.ns",
+       "deno.unstable"
+     ],
+     "jsx": "react-jsx",
+     "jsxImportSource": "hono/jsx"
+   }
}

Update vite.config.ts

- import build from "@hono/vite-build/cloudflare-pages";
+ import build from "@hono/vite-build/deno";
- import adapter from "@hono/vite-dev-server/cloudflare";
+ import adapter from "@hono/vite-dev-server/node";
import honox from "honox/vite";
import { defineConfig } from "vite";

export default defineConfig({
+   cacheDir: "node_modules/.vite",
+   esbuild: {
+     jsx: "automatic",
+     jsxImportSource: "hono/jsx",
+   },
  plugins: [honox({ devServer: { adapter } }), build()],
});

Update demo (app/routes/index.tsx)

import { css } from "hono/css";
import { createRoute } from "honox/factory";
- import Counter from "../islands/counter";
+ import Counter from "../islands/counter.tsx";

optional

Add tailwindcss

deno add \
  npm:tailwindcss \
  npm:postcss \
  npm:autoprefixer
deno run -A npm:tailwindcss init -p --esm --ts

Update tailwind.config.ts

import type { Config } from "tailwindcss";

export default {
-  content: [],
+  content: ["./app/**/*.{ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

Add app/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Update app/client.ts

import { createClient } from "honox/client";
+ import "./app.css"

createClient();

Update app/routes/index.tsx

- import { css } from "hono/css";
import { createRoute } from "honox/factory";
import Counter from "../islands/counter.tsx";

- const className = css`
-   font-family: sans-serif;
- `;

export default createRoute((c) => {
  const name = c.req.query("name") ?? "Hono";
  return c.render(
-     <div class={className}>
+     <div>
-       <h1>Hello, {name}!</h1>
+       <h1 class="text-2xl font-bold">Hello, {name}!</h1>
      <Counter />
    </div>,
    { title: name },
  );
});

Update app/routes/_renderer.tsx

- import { Link } from "honox/server";
+ import { Link, Script } from "honox/server";
...
<link rel="icon" href="/favicon.ico" />
+ <Link href="/app/app.css" rel="stylesheet" />
<Script src="/app/client.ts" async />

Update vite.config.ts

- plugins: [honox({ devServer: { adapter } }), build()],
+ plugins: [
+   honox({
+     client: {
+       input: ["/app/app.css"],
+     },
+     devServer: { adapter },
+   }),
+   build(),
+ ],

dev

Install dependencies

deno install

Dev

deno task dev

Build

deno task build

Preview

deno task preview