Chakra UI + Bun + rsbuild , example

概要:

Chakra UI + Bun + rsbuild + express.js例になります。

• 前のrsbuild + React環境ベースにしてます。
• Typescript フルスタック構成です。
• tailwindcssを追加してますので。ビルドは遅くなってます。

[ 作成日: 2024/09/17 ]

---

構成

• Bun
• @rsbuild/core: 1.0.1
• Chakra UI
• React
• express.js
• tailwindcss

---

関連

• https://v2.chakra-ui.com/getting-started

---

作成したコード

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

---

• src/entry-client.tsx
• ChakraBaseProviderを使うと、componentが表示できました。

....
const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
  },
}

const theme = extendTheme({ colors })
//
console.log("#entry-client");
//
const rootEl = document.getElementById("root");
if (rootEl) {
  const root = ReactDOM.createRoot(rootEl);
  root.render(
    <React.StrictMode>
      <BrowserRouter>
        <ChakraBaseProvider theme={theme}>
          <App />
        </ChakraBaseProvider>
      </BrowserRouter>
    </React.StrictMode>,
  );
}

---

• Button

....
import { Button } from "@chakra-ui/react";
//
function Page() {
  return (
  <div className="container mx-auto my-2 px-8 bg-white">
    <h1 className="text-4xl font-bold"
    >Button</h1>
    <hr className="my-2" />
    <Button colorScheme="teal" variant="solid">
      Click Me
    </Button>
  </div>
  )
}

---

• package.json

{
  "name": "bun_29",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "dev": "nodemon",
    "dev:test": "rsbuild dev --open",
    "build": "rsbuild build && bun run build:server",
    "build:server": "bun build --target=node --minify src/index.ts --outfile dist/index.js",
    "build:serverTest": "bun rsbuild build --config custom.config.ts",
    "build:test": "",
    "clean": "rimraf dist",
    "preview:test": "rsbuild preview",
    "start": "bun run dist/index.js"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "axios": "^1.7.5",
    "cookie-parser": "^1.4.6",
    "express": "^4.19.2",
    "framer-motion": "^11.5.4",
    "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",
    "autoprefixer": "^10.4.20",
    "nodemon": "^3.1.4",
    "postcss": "^8.4.47",
    "rimraf": "^6.0.1",
    "tailwindcss": "^3.4.12",
    "typescript": "^5.5.2"
  }
}