Chakra UI + esbuild + Bun , example

id: 164, 2024-09-28

概要:

Chakra UI + Bun + esbuild例になります。

前のesbuild + React環境ベースにしてます。
Typescript フルスタック構成です。

[ 作成日: 2024/09/28 ]

構成

Bun
esbuild
Chakra UI
React
express.js
tailwindcss

作成したコード

https://github.com/kuc-arc-f/bun_33react/tree/main/example/chakra

dev-start

bun run build
bun run dev

example/chakra/src/client/Button.tsx
https://github.com/kuc-arc-f/bun_33react/blob/main/example/chakra/src/client/Button.tsx

import Head from "../components/Head"
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>
  )
}

export default Page;

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

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import { extendTheme } from "@chakra-ui/react"
import {
  ChakraBaseProvider,
  extendBaseTheme,
  theme as chakraTheme,
} from "@chakra-ui/react"
//import "./style.css";

// 2. Extend the theme to include custom colors, fonts, etc
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>,
  );
}

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": {
    "@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.9.0",
    "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"
  }
}

Chakra UI + esbuild + Bun , example

概要:

構成

関連

作成したコード

dev-start