Bun + rsbuild + shadcn/ui + React

概要:

Bun + rsbuild + shadcn/ui + React の構成例になります。

• Typescript フルスタック構成です。
• bundler は、rsbuild, bunを使用する例です。

[ 作成日: 2024/09/14 ]

---

構成

• Bun
• @rsbuild/core: 1.0.1
• shadcn/ui
• React
• express.js
• typescript

---

作成したコード

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

---

build, dev-start

bun run build
bun run dev

---

• rsbuild.config.ts

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import path from "path"
//
export default defineConfig({
  plugins: [pluginReact()],
  source: {
    entry: {
      index: "./src/entry-client.tsx",
    },
  },
});

---

• src/App.tsx: ルーティング components 参考画面

....
<div className="App">
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/alert_dialog" element={<AlertDialog />} />
    <Route path="/button" element={<Button />} />
    <Route path="/card" element={<Card />} />
    <Route path="/calendar" element={<Calendar />} />
    <Route path="/checkbox" element={<CheckBox />} />
    <Route path="/datepicker" element={<DatePicker />} />
    <Route path="/dialog" element={<Dialog />} />
    <Route path="/form" element={<Form />} />
    <Route path="/input" element={<Input />} />
    <Route path="/navigation_menu" element={<NavigationMenu />} />
    <Route path="/progress" element={<Progress />} />
    <Route path="/radio" element={<Radio />} />
    <Route path="/select" element={<Select />} />
    <Route path="/sheet" element={<Sheet />} />
    <Route path="/switch" element={<Switch />} />
    <Route path="/table" element={<Table />} />
    <Route path="/textarea" element={<TextArea />} />
    
  </Routes>
</div>