rsbuild + React + Express, Full Stack example

概要:

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

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

[ 作成日: 2024/09/11 ]

---

構成

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

---

関連

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

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

---

作成したコード

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

---

build, dev-start

yarn build
yarn dev

---

• rsbuild.config.ts
• front側：entry-client.tsx 読み込む例です。

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",
    },
  },
});

---

• package.json

{
  "name": "rsbuild_5",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "dev": "nodemon",
    "dev:test": "rsbuild dev --open",
    "build": "rsbuild build && npm run build:server",
    "build:server": "npx rsbuild build --config custom.config.ts",
    "build:test": "rsbuild build",
    "build:copy": "mkdir public && cp -pr dist/static public",
    "clean": "rimraf dist",
    "preview:test": "rsbuild preview",
    "start": "node dist/server/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": {
    "@rsbuild/core": "^1.0.1",
    "@rsbuild/plugin-react": "^1.0.1",
    "@types/node": "^22.5.4",
    "@types/react": "^18.3.5",
    "@types/react-dom": "^18.3.0",
    "nodemon": "^3.1.4",
    "rimraf": "^6.0.1",
    "typescript": "^5.5.2"
  }
}