Bun + rsbuild + React MPA (multi page)

id: 155, 2024-09-14

概要:

Bun + rsbuild + React MPA (multi page) の構成例になります。

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

[ 作成日: 2024/09/13 ]

構成

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

作成したコード

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

build, dev-start

bun run build
bun run dev

custom.config.ts
https://github.com/kuc-arc-f/bun_28react/blob/main/custom.config.ts

...

export default defineConfig(async ({ env, command }) => {
  const entryFiles = await buildCommon.getEntryItems(directoryPath);
  //
  return {
    plugins: [pluginReact()],
    source: {
      entry: entryFiles,
    },
    output: {
      distPath: {
        root: "dist",
      },
      filename: {
        js: `[name].js`,
      },
    },
  }
});

src/client/home.tsx
https://github.com/kuc-arc-f/bun_28react/blob/main/src/client/home.tsx

function Page() {
  return (
    <>
    <div className="main_body_wrap container mx-auto my-2 px-8 bg-white">
      {/* navi */}
      <Head />
      {/* items */}
      <h1 className="text-4xl font-bold">home!</h1>
      <hr className="my-2" />
    </div>
    
  </>
  )
}
ReactDOM.createRoot(document.getElementById("root")!).render(
  <Page />
)

src/index.ts: ルーティング、express
https://github.com/kuc-arc-f/bun_28react/blob/main/src/index.ts

app.get("/", async(req, res) => {
  let htm = await fs.readFile("./dist/home.html", "utf-8")
  res.send(htm);
});