rsbuild + shadcn/ui + React + Express

概要:

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

• Typescript Full Stack 構成です。
• bundler は、rsbuildを使用する例です。

[ 作成日: 2024/09/11 ]

---

構成

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

---

関連

• https://rsbuild.dev/guide/start/quick-start

• https://rsbuild.dev/guide/framework/react

---

作成したコード

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

---

build, dev-start

yarn build
#dev
yarn dev

---

• rsbuild.config.ts
• front側 build

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 : ルーティング設定

const App = () => {
  return (
  <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="/checkbox" element={<CheckBox />} />
      <Route path="/input" element={<Input />} />
      <Route path="/navigation_menu" element={<NavigationMenu />} />
      <Route path="/radio" element={<Radio />} />
      <Route path="/select" element={<Select />} />
      <Route path="/table" element={<Table />} />
      <Route path="/textarea" element={<TextArea />} />
    </Routes>
  </div>
  );
};