shadcn/ui + esbuild + bun + Express.js, example

id: 162, 2024-09-25

### 概要:

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

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

[ 作成日: 2024/09/23 ]

### 構成

shadcn/ui
Bun
esbuild
React
express.js
typescript

### 作成したコード

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

### dev-start

bun run build
bun run dev

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

import React from "react"
//import {Link } from "react-router-dom";
import Head from "../components/Head"
// 
import { Button } from "@/components/ui/button"
//
export default function Page(){
  return(
  <div className="container mx-auto my-2 px-8 bg-white">
    <Head />
    <h1 className="text-4xl font-bold">Button!</h1>
    <hr className="my-2" />
    <Button>Click me</Button>
  </div>
  );
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["DOM", "ES2020"],
    "module": "ESNext",
    "jsx": "react-jsx",
    "noEmit": true,
    "strict": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "resolveJsonModule": true,
    "moduleResolution": "bundler",
    "useDefineForClassFields": true,
    "allowImportingTsExtensions": true,
    /* shadcn */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

package.json

{
  "name": "bun_32",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "nodemon",
    "dev:test": "",
    "build": "bun run build:server && bun run build:client && bun run build:css",
    "build:prod": "NODE_ENV=production bun run build",
    "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",
    "build:css": "bunx tailwindcss -i ./src/style.css -o ./public/static/style.css",
    "clean": "rimraf dist",
    "preview": "",
    "start": "bun run dist/index.js"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.0",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-navigation-menu": "^1.2.0",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
    "@tanstack/react-table": "^8.20.5",
    "axios": "^1.7.5",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cookie-parser": "^1.4.6",
    "date-fns": "^3.6.0",
    "express": "^4.19.2",
    "lucide-react": "^0.439.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.1",
    "react-day-picker": "8.10.1",
    "react-hook-form": "^7.53.0",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/node": "^22.5.4",
    "@types/react": "^18.3.5",
    "@types/react-dom": "^18.3.0",
    "autoprefixer": "^10.4.20",
    "esbuild": "^0.24.0",
    "nodemon": "^3.1.4",
    "postcss": "^8.4.47",
    "rimraf": "^6.0.1",
    "tailwindcss": "^3.4.13",
    "typescript": "^5.5.2"
  }
}