Hono 4 + shadcn/ui + React + bun , example

概要:

Hono 4 + shadcn/ui の構成例になります。

• hono + React構成ベースで、shadcn/ui追加してます。
• Typescript フルスタック構成です。
• bundler は、viteを使用する例です。

[ 作成日: 2024/09/15 ]

---

構成

• hono 4.6
• shadcn/ui
• Bun
• React
• typescript

---

関連

• shadcn/ui、公式参考にしました。
• https://ui.shadcn.com/docs/installation/vite

---

作成したコード

• https://github.com/kuc-arc-f/hono_64shadcn

---

build, dev-start

bun run build
bun run dev

---

• vite.config.ts
• https://github.com/kuc-arc-f/hono_64shadcn/blob/main/vite.config.ts
• pathの設定を、追加しました。

import build from "@hono/vite-build/cloudflare-pages"
import devServer from "@hono/vite-dev-server"
import adapter from "@hono/vite-dev-server/cloudflare"
import { defineConfig } from "vite"
import path from "path"

export default defineConfig(({ mode }) => {
  if (mode === "client") {
    return {
      build: {
        rollupOptions: {
          input: "./src/client.tsx",
          output: {
            entryFileNames: "static/client.js"
          }
        }
      },
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src"),
        },
      },
    }
  } else {
    return {
      ssr: {
        external: ["react", "react-dom"]
      },
      plugins: [
        build(),
        devServer({
          adapter,
          entry: "src/index.tsx"
        })
      ],
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src"),
        },
      },
    }
  }
})

---

• tsconfig.json
• https://github.com/kuc-arc-f/hono_64shadcn/blob/main/tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "skipLibCheck": true,
    "lib": [
      "ESNext"
    ],
    "types": [
      "@cloudflare/workers-types/2023-07-01",
      "vite/client"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    /* shadcn */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

---

• src/client.tsx
• フロント側

import ReactDOM from "react-dom/client"
import React from "react"

import { BrowserRouter } from "react-router-dom"
import { App } from "./App";
import "./style.css";
//
ReactDOM.createRoot(document.getElementById("app")).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)
console.log("createRoot")

---

• package.json
• https://github.com/kuc-arc-f/hono_64shadcn/blob/main/package.json