Hono 4 + MUI 6 + React + bun , example

id: 157, 2024-09-16

概要:

Hono 4 + MUI の実装例になります。

hono + React構成ベースです。
Typescript フルスタック構成です。
bundler は、viteを使用する例です。

[ 作成日: 2024/09/15 ]

構成

MUI 6
hono 4.6
Bun
React
typescript

作成したコード

https://github.com/kuc-arc-f/hono_65mui

build, dev-start

bun run build
bun run dev

src/client.tsx
https://github.com/kuc-arc-f/hono_65mui/blob/main/src/client.tsx
フロント側

....

ReactDOM.createRoot(document.getElementById("app")).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

package.json

{
  "name": "hono_65",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build --mode client && vite build",
    "preview": "wrangler pages dev",
    "deploy": "$npm_execpath run build && wrangler pages deploy"
  },
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@fontsource/roboto": "^5.1.0",
    "@mui/icons-material": "^6.1.0",
    "@mui/material": "^6.1.0",
    "hono": "^4.6.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.2"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20240529.0",
    "@hono/vite-build": "^1.0.0",
    "@hono/vite-dev-server": "^0.15.1",
    "@types/node": "^22.5.4",
    "@types/react": "^18.3.5",
    "@types/react-dom": "^18.3.0",
    "vite": "^5.2.12",
    "wrangler": "^3.57.2"
  }
}

tree: src/下

tree .
.
├── App.tsx
├── client
│   ├── Button.tsx
│   ├── Checkbox.tsx
│   ├── Dialog.tsx
│   ├── Home.tsx
│   ├── RadioButtonsGroup.tsx
│   ├── Select.tsx
│   ├── TextField.tsx
│   └── lib
│       ├── HttpCommon.ts
│       └── LibConfig.ts
├── client.tsx
├── components
│   └── Head.tsx
├── index.tsx
└── renderer.tsx

3 directories, 14 files

Hono 4 + MUI 6 + React + bun , example

概要:

構成

関連

作成したコード

build, dev-start