Bun + esbuild + React + Express, Full Stack

概要:

React + esbuild + bun 構成の試作的メモとなります。

• SPA構成です。
• esmにしてます。

[ 公開日: 2024/09/25 ]

---

構成

• Bun
• esbuild
• React
• Express.js
• typescript

---

作成したコード

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

---

dev-start

bun run build
bun run dev

---

• src/App.tsx
• https://github.com/kuc-arc-f/bun_33react/blob/main/src/App.tsx

import { Routes, Route } from "react-router-dom";

//
import Home from "./client/home";
import About from "./client/about";
// 
const App = () => {
  return (
  <div className="App">
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </div>
  );
};

export default App;

---

• src/entry-client.tsx
• https://github.com/kuc-arc-f/bun_33react/blob/main/src/entry-client.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
//
console.log("#entry-client");
//
const rootEl = document.getElementById("root");
if (rootEl) {
  const root = ReactDOM.createRoot(rootEl);
  root.render(
    <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>,
  );
}

---

• package.json
• https://github.com/kuc-arc-f/bun_33react/blob/main/package.json

{
  "name": "bun_33",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "nodemon",
    "build": "bun run build:server && bun run build:client",
    "build:test": "",
    "build:server": "bun build --target=node --minify src/index.ts --outfile dist/index.js",
    "build:client": "bunx esbuild  --bundle --format=esm --minify  ./src/entry-client.tsx --outdir=public/static --tsconfig=tsconfig.json",
    "clean": "rimraf dist",
    "start": "bun run dist/index.js"
  },
  "dependencies": {
    "axios": "^1.7.5",
    "cookie-parser": "^1.4.6",
    "express": "^4.19.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.1"
  },
  "devDependencies": {
    "@types/node": "^22.5.4",
    "@types/react": "^18.3.5",
    "@types/react-dom": "^18.3.0",
    "esbuild": "^0.24.0",
    "nodemon": "^3.1.4",
    "rimraf": "^6.0.1",
    "typescript": "^5.5.2"
  }
}