Bun + rsbuild + MUI + React

id: 154, 2024-09-14

概要:

Bun + rsbuild + MUI + React の構成例になります。

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

[ 作成日: 2024/09/14 ]

構成

Bun
@rsbuild/core: 1.0.1
MUI 6
React
express.js
typescript

作成したコード

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

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 参考画面

....
<Head />
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/button" element={<Button />} />
  <Route path="/checkbox" element={<Checkbox />} />
  <Route path="/dialog" element={<Dialog />} />
  <Route path="/radio" element={<RadioButtonsGroup />} />
  <Route path="/select" element={<Select />} />
  <Route path="/textfield" element={<TextField />} />
</Routes>