Turborepo Guide EP1

#Turborepo#Monorepo#Typescript

CodeSookPublish: 10th March 2025Publish: Monday 10th March 2025

What is Monorepo

Monorepo (Monolithic Repository) เป็นกลยุทธ์ในการจัดการซอร์สโค้ดแบบหนึ่งที่รวมโค้ดทั้งหมดของ project ไว้ในที่เดียว แทนที่จะแยกเป็นหลายๆ repository แยกกัน ลองนึกภาพว่าแทนที่จะมี repository แยกกันสำหรับแต่ละ apps หรือ libraries คุณจะมี repository เดียวที่เก็บโค้ดทั้งหมดไว้ด้วยกัน

องค์กรใหญ่ๆ อย่าง Google, Facebook, Microsoft และอีกหลายบริษัทใช้ Monorepo หรือเปล่าก็ไม่รู้ ผมไม่เคยทำงานที่นั่น ฮ่าๆ 😆😆😆 (แล้วจะยกมาเพื่อ? ฮ่าๆ)

Why do we need Monorepo

ทำไมถึงควรใช้ Monorepo? การใช้ Monorepo มีข้อดีหลายประการที่ช่วยให้การสร้าง software ง่ายขึ้น

Share codes เมื่อทุกอย่างอยู่ในที่เดียวกัน การแชร์โค้ดระหว่างโปรเจกต์ทำได้สะดวกมาก ไม่ต้องผ่านระบบการจัดการแพคเกจที่ซับซ้อน ทีมสามารถสร้าง libraries แล้ว ใช้งานได้ทันทีในทุก apps
Atomic Changes เมื่อต้องแก้ไขโค้ดที่มีผลกระทบต่อหลาย apps Monorepo ช่วยให้คุณทำการเปลี่ยนแปลงทั้งหมดใน commit เดียว ทำให้มั่นใจได้ว่าทุกอย่างยังทำงานร่วมกันได้อย่างถูกต้อง

Before start

ในบทความชุด ชุดนี้ เพื่อนๆจะไม่ได้แค่เรียนรู้การใช้งาน Turborepo เพียงอย่างเดียวนะครับ

สิ่งที่นอกเหนือจากการใช้ Turborepo ในสไตล์ผม ก็เช่น

จะได้รู้วิธีการสร้าง libraries ใช้เอง,
การ bundle libraries,
export files ไปให้ apps หรือ packages อื่นๆเอาไปใช้งาน เราจะใส่ type อย่างไร,
การ bundle แบบครบจบในไฟล์เดียวทำอย่างไร,
การ setup eslint ที่จะใช้กับ Monorepo,
ถ้าไม่อยากใช้ Turborepo ก็ยังจะไปใช้ Moonrepo ที่เป็น Monorepo managment แทนได้เลย ใช้วิธีการเหมือนกันเด๊ะๆ เขาเป็นคู่แข่งกัน (เอาจริงๆผมชอบ Moon มากกว่าด้วย แต่เขายังทำระบบ remote caching ไม่เสร็จ) ก็เลยเลือกใช้ Vercel Turborepo ไปก่อน
การใช้ Dagger แบบนิดหน่อย
การใช้ Github actions แบบนิดหน่อย ผมก็พึ่งเริ่มหัดใช้
รู้จักวิธีใช้งาน rslib library เพื่อ build packages กับ apps ของเรา

บทความจะแบ่งเป็น 3 ep นะครับ

EP1 จะเกี่ยวกับการสร้าง Turborepo ใส่ apps ต่างๆ ใส่ packages ต่างๆ
EP2 จะสร้าง dockerfile สำหรับ apps ต่างๆของเรา โดยใช้ Dagger ดีไหมนะ
EP3 จะสร้างตัวอย่าง pipeline สำหรับ CD ง่ายๆ (อาจจะเป็น Cloudbuild หรีือ Github actions เดี๋ยวดูก่อน ผมยังใหม่กับ Github actions น่ะครับ)

ก่อนจะไปเริ่ม ผมจะเล่าให้ฟังก่อนว่าจะพาทำอะไรบ้างใน blog นี้

ผมจะสร้าง Monorepo โดยใช้ Turborepo นะครับ โดยใช้ Nodejs กับ pnpm นะครับ ถ้าใครใช้ Bun จะยังไม่ support นะครับ ผมเห็นเขาเขียนว่า Beta ถ้าใครจะลองก็จัดไป

จริงๆถ้าเอาแค่ Monorepo จะใช้ pnpm workspace ก็ได้แหละ แต่ที่ผมเลือก Turborepo เพราะจะใช้ Remote caching ด้วยน่ะครับ
แต่ผมจะไม่ได้ใช้ caching server ของ Vercel นะครับ ส่วน caching จะไม่ได้พูดถึงใน blog นี้นะครับ ถ้าใครสนใจก็บอกได้ เดี๋ยวผมเขียน blog ให้

ใน Monorepo ผมจะมี
apps

Backend จะใช้ 🔥 Hono
Frontend จะใช้ 🌴 Tanstack start นะครับ ตรงนี้ต้อง note ไว้นะครับว่า Tanstack start ยังเป็น Beta อยู่ และใน blog นี้ผมเน้นไปที่ Turborepo นะครับ ไม่ใช่ตัวของ Tanstack start

packages

ESLint config เราจะ setup eslint config ไว้ในที่เดียวตรง package นี้ ทำเป็น preset ไว้ เอาไว้ให้ apps กับ packages อื่นๆเรียกใช้ได้ง่ายๆ เพราะทุกๆ apps ทุกๆ packages เราก็มักจะใช้ config เดียวกัน ผมเขียน config เป็น .ts ด้วยนะ
หลายคนอาจจะไม่เคยใช้ .ts กับ eslint config เพราะมันต้องมีขั้นตอนเพิ่มเข้ามา แต่ก็นิดเดียวเองนะ
Rslib config ผมจะใช้ Rslib ในการ build ทั้ง apps และ packages
ทำไมผมถึงเลือก Rslib เพราะว่ามันเร็ว ฮ่าๆ หรือเพื่อนๆจะใช้ตัวอื่นก็ได้นะ เช่น tsup, pkgroll วิธีการเหมือนกันเลย ทีแรกผมจะใช้ unbuild เพราะชอบที่เขาใช้ jiti แต่พึ่งเห็นว่าเขาจะ remove jiti ออกก็เลยเปลี่ยนดีกว่า
Prisma เอา prisma มาสร้าง packages แล้วให้ Hono เรียกใช้ หรือถ้ามี Backend อีกตัวก็จะแชร์ prisma package ร่วมกัน แต่การที่ Backend 2 ตัวแชร์ Database ร่วมกันผมจะไม่พูดถึงนะครับ อย่างที่บอกว่าจะพาทำ Turorepo
UI Components ผมจะเอา Shadcn components มาไว้ที่ Package แทน เผื่อว่ามี Frontend อีกตัวต้องการใช้ Components เหมือนกัน จะได้ไม่ต้องทำใหม่
Hono App จริงๆผมจะเอา Hono app มาไว้ที่ Package นี่แหละ แต่เป็น Hono ที่ไม่ได้ start server เดี๋ยวจะให้ Hono ตัวที่เป็น App เป็นคน start server
ทำไมต้องเอา Hono app มาไว้ที่ Package ด้วย เหตุผลเดียวของผมคือ ผมอยากได้ E2E Type-safe คือจะให้ Frontend ดึง Type ที่ได้จาก Hono app ไปใช้งาน ทำให้ Frontend รู้ได้เลยว่า มี API Routes อะไรบ้าง ต้องส่ง request ยังไง และจะได้รับ Response อะไรบ้าง

global ผมมี setup สำหรับ ใช้กับภาพรวมของ Monorepo ด้วย

Git hooks using Husky จริงอยากใช้ Lefthook มากกว่า แต่มีน้องๆในทีมที่ใช้ Windows แล้วมันไม่ทำงาน ผมก็ไม่รู้จะแก้ยังไง ฮ่าๆ
Gitmoji ก็จะใส่ emoji ใน git commit message ด้วยอะ
Lintstage เราจะไม่ ตรวจสอบ lint กับทุกๆไฟล์ ตรวจเฉพาะไฟล์ที่แก้ไขไปก็พอ

Dockerfile ผมจะเขียน Dockerfile เป็นตัวอย่างให้ด้วย ส่วนนี้จะแยกเป็นอีก Blog นึงเป็น EP2 นะครับ

Dagger มันจะพิเศษตรงที่ผมจะใช้ Dagger นะครับ
Dockerfile หรืออาจจะใช้แค่ Dockerfile

CICD Pipeline ผมจะเขียน CICD Pipeline เป็นตัวอย่างให้ด้วย ส่วนนี้ก็จแยกเป็นอีก Blog นึงเป็น EP3 นะครับ

Github actions ผมยังใหม่กับ Github actions ถ้าผิดพลาดยังไงรบกวนชี้แนะด้วยครับ

Init Turborepo

เริ่มสร้าง Turborepo project กันเลย

pnpm dlx create-turbo@latest

เราจะได้ files & folders มาแบบนี้

.
├── apps
│   ├── docs # Nextjs
│   └── web # Nextjs
├── package.json
├── packages
│   ├── eslint-config
│   ├── typescript-config
│   └── ui
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── README.md
└── turbo.json

จะเห็นว่า ใน folder apps จะมี docs กับ web มาด้วย ซึ่งทั้่งคู่เป็น Nextjs ผมจะไม่ใช้ ดังนั้นผมจะลบมันทิ้งไปเลย

.
├── apps
│   ├── docs
│   └── web
├── package.json
├── packages
│   ├── eslint-config
│   ├── typescript-config
│   └── ui
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── README.md
└── turbo.json

turbo.json

มาดูไฟล์ turbo.json กันก่อนเลย

1
{
2
  "$schema": "https://turbo.build/schema.json",
3
  "ui": "tui",
4
  "tasks": {
5
    "build": {
6
      "dependsOn": ["^build"],
7
      "inputs": ["$TURBO_DEFAULT$", ".env*"],
8
      "outputs": ["dist", ".next/**", "!.next/cache/**"]
9
    },
10
    "lint": {
11
      "dependsOn": ["^lint"]
12
    },
13
    "check-types": {
14
      "dependsOn": ["^check-types"]
15
    },
16
    "dev": {
17
      "cache": false,
18
      "persistent": true
19
    }
20
  }
21
}

ผมเพิ่ม dist เข้าไป และเอา .next/**, !.next/cache/** ออกไป

$schema แค่บอก IDE ว่า ไฟล์ json นี้มี config อะไรบ้าง มันจะมี auto complete มาช่วยเราด้วย
ui มี value ได้ 2 แบบ
- 1. stream ด้วยความที่เราใช้ monorepo เรามักจะรันหลายๆ apps พร้อมๆกัน การใช้ stream จะเป็นการบอกให้ Turborepo เอาสิ่งที่ apps พ่นลง console มากองรวมกันใน Terminal อันเดียว ใครพ่นอะไรมาเวลาไหนมันจะเรียงลำดับให้เลยตามเวลาก่อนหลัง
- 1. tui แทนที่จะพ่นทุกอย่างจากทุก apps มาใน Terminal ตัวเดียวกัน Turborepo จะมีหน้าต่างแยกเป็นราย app เลย เราก็กดลูกศรเลือกเอาว่าอยากดู console ของ app ไหน
tasks อันนี้จะมีรายละเอียดเยอะหน่อย
- build
- lint
- check-types
- dev

ทั้ง 4 ตัว คือชื่อของ tasks เราสามารถตั้งชื่อเองได้เลย มันจะเป็นคำสั่งที่เราจต้องไปใช้คู่กับคำสั่ง pnpm turbo run <task's name>
และชื่อ tasks นี้จะต้องตรงกับชื่อคำสั่ง scripts ที่อยู่ใน package.json ด้วย สมมติเราสั่ง pnpm turbo run dev ตัว Turborepo จะไปไล่ดูว่ามี apps หรือ packages ไหนบ้าง ที่มีคำสั่ง dev อยู่ใน package.json.scripts บ้าง

ถัดมา มาดู properties ของ task แต่ละตัวกัน

dependsOn ตัวอย่างเช่น dependsOn: ["^build"] อันนี้เป็นการบอก turborepo ว่า ถ้าก่อนที่จะทำงาน task build (ชื่อ task นี้) ให้ไปดูว่า packages ไหน apps ไหนต้องรันก่อนหลังแล้ว turbo จะเรียงการทำงานตามลำดับให้ ให้สังเกตว่าจะมีเครื่องหมาย ^ อยู่ด้านหน้าด้วย ส่วนแบบไม่มีเครื่องหมาย หรือเครื่องหมายอื่นๆ ผมไม่ได้ใช้เลย
inputs คือไฟล์และรูปแบบที่ Turborepo จับตาดูเพื่อพิจารณาว่าจำเป็นต้องรัน task ซ้ำหรือไม่ ตัวอย่างเช่น task ชื่อ “build” มี “inputs”: [“$TURBO_DEFAULT$”, “.env*”] นั่นหมายความว่า task “build” จะดูที่ไฟล์ .env* (ชื่อไฟล์ที่ขึ้นต้นด้วย .env ตามด้วยคำว่าอะไรก็ได้) ถ้ามีการเปลี่ยนแปลงก็จะทำ task build ใหม่
outputs บอก Turborepo ว่าให้เก็บ cache ที่ files ไหน folders ไหน สามารถใส่เครื่องหมาย ! เพื่อบอกว่าห้ามเก็บ cache ที่ files นี้ folders นั้น
cache บอกว่าต้องเก็บ cache ไหม เรามักจะใช้กับ task “dev” นี่แหละเพราะว่ามันไม่ได้ generate อะไร แค่ start server แล้วทำงานไปยาวๆ
persistent มักจะใส่ใน task “dev” เพื่อบอก Turborepo ว่า task “dev” จะทำงานไปยาวๆเลย ไม่ต้องรอคำสั่งให้ทำงานเสร็จ ไปทำ task “dev” ของ apps หรือ packages อื่นๆได้เลย

Setup Eslint

การ setup ESLint ใน Turborepo ผมเสียเวลากับมันนานมาก สุดท้ายก็มาเป็นท่าที่พาเพื่อนๆทำนี่แหละ
ตอนนี้ก็ยังไม่แน่ใจว่ามันโอเคจริงๆใช่ไหม แต่มัน Work กับผมละนะ

มาเริ่มกันเลย

Install Eslint at the workspace level

ที่ workspace level นะ install ด้วยคำสั่ง

pnpm add -w -D eslint jiti

ผมใส่ jiti ด้วยเพื่อที่จะได้ใช้ .ts กับ eslint config ได้

ที่ package.json ด้านนอกสุด จะมี devDependencies แบบนี้

1
{
2
  "name": "blog",
3
  "private": true,
4
  "type": "module",
5
  "scripts": {
6
    "build": "turbo run build",
7
    "dev": "turbo run dev",
8
    "lint": "turbo run lint",
9
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
10
    "check-types": "turbo run check-types"
11
  },
12
  "devDependencies": {
13
    "eslint": "^9.20.1",
14
    "jiti": "^2.4.2",
15
    "prettier": "^3.5.0",
16
    "turbo": "^2.4.4",
17
    "typescript": "5.7.3"
18
  },
19
  "packageManager": "[email protected]",
20
  "engines": {
21
    "node": ">=18"
22
  }
23
}

Init via Antfu’s eslint

เราจะสร้าง eslint config ไว้ใน packages แล้ว shared ไปที่ apps และ packages ต่างๆ เผื่อว่าในแต่ละ apps หรือ packages ต้องการ config ไม่เหมือนกัน

เรามี folder packages/eslint-config อยู่แล้ว

.
├── apps
├── eslint.config.mjs
├── mise.toml
├── package.json
├── packages
│   ├── eslint-config
│   │   ├── base.js
│   │   ├── next.js
│   │   ├── package.json
│   │   ├── react-internal.js
│   │   └── README.md
│   ├── typescript-config
│   └── ui
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── README.md
└── turbo.json

ให้ cd เข้ามาที่ folder packages/eslint-config

cd packages/eslint-config
pnpm dlx @antfu/eslint-config@latest

เลือกตามนี้เลย

┌  @antfu/eslint-config v4.3.0
│
◇  There are uncommitted changes in the current repository, are you sure to continue?
│  Yes
│
◇  Select a framework:
│  React
│
◇  Select a extra utils:
│  Formatter
│
◇  Update .vscode/settings.json for better VS Code experience?
│  Yes
│
◇  Bumping @antfu/eslint-config to v4.3.0
│
◇  Added packages ────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                             │
│  eslint-plugin-format, @eslint-react/eslint-plugin, eslint-plugin-react-hooks, eslint-plugin-react-refresh  │
│                                                                                                             │
├─────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
│
◆  Changes wrote to package.json
│
◆  Created eslint.config.mjs
│
◆  Updated .vscode/settings.json
│
◆  Setup completed
│
└  Now you can update the dependencies by run pnpm install and run eslint . --fix

Install ESLint and it’s dependencies

pnpm add -D eslint-plugin-perfectionist eslint-plugin-oxlint jiti -w

ใน package.json จะมี dependencies แบบนี้

eslint-config/package.json

1
{
2
  "name": "@repo/eslint-config",
3
  "version": "0.0.0",
4
  "type": "module",
5
  "private": true,
6
  "exports": {
7
    "./base": "./base.js",
8
    "./next-js": "./next.js",
9
    "./react-internal": "./react-internal.js"
10
  },
11
  "devDependencies": {
12
    "@eslint/js": "^9.21.0",
13
    "@next/eslint-plugin-next": "^15.1.6",
14
    "eslint": "^9.21.0",
15
    "eslint-config-prettier": "^10.0.1",
16
    "eslint-plugin-only-warn": "^1.1.0",
17
    "eslint-plugin-react": "^7.37.4",
18
    "eslint-plugin-react-hooks": "^5.1.0",
19
    "eslint-plugin-turbo": "^2.4.0",
20
    "globals": "^15.15.0",
21
    "typescript": "^5.7.3",
22
    "typescript-eslint": "^8.24.0",
23
    "@antfu/eslint-config": "^4.3.0",
24
    "@eslint-react/eslint-plugin": "^1.26.2",
25
    "eslint-plugin-format": "^1.0.1",
26
    "eslint-plugin-oxlint": "^0.15.12",
27
    "eslint-plugin-perfectionist": "^4.9.0",
28
    "eslint-plugin-react-refresh": "^0.4.19",
29
    "jiti": "^2.4.2"
30
  }
31
}

แล้วก็ set type=module แบบนี้
จริงๆเขา set มาให้แล้ว แต่ก็เผื่อไว้ละกัน

pnpm pkg set type=module

create new eslit config

เราจะสร้าง eslint config แบบของเรา (ของผมคนเดียว เพื่อนๆก็ปรับเอาตามชอบนะครับ)

สร้าง file antfu.ts กับ eslint.config.ts

touch antfu.ts
touch eslint.config.ts

จะได้แบบนี้

.
├── eslint-config
│   ├── antfu.ts
│   ├── base.js
│   ├── eslint.config.ts
│   ├── next.js
│   ├── package.json
│   ├── react-internal.js
│   └── README.md

file antfu.ts จะเป็น file ที่เก็บ config ของเรา
ส่วน eslint.config.ts อันนี้จะเป็น file ที่เอาไว้บอก ESLint lsp ว่าเรา config อะไรบ้าง โดยจะมีผลแค่ใน package eslint-config นี้เท่านั้น

antfu.ts

1
import antfu from "@antfu/eslint-config"
2
import oxlint from "eslint-plugin-oxlint"
3
import perfectionist from "eslint-plugin-perfectionist"
4

5
const antfuConfig = antfu(
6
  {
7
    formatters: true,
8
    react: true,
9
    stylistic: {
10
      indent: 2,
11
      quotes: "double",
12
      semi: false,
13
    },
14
    typescript: true,
15
  },
16
  {
17
    plugins: [
18
      perfectionist.configs["recommended-alphabetical"],
19
      oxlint.configs["flat/all"],
20
    ],
21
    rules: {
22
      "no-console": "warn",
23
      "perfectionist/sort-objects": "error",
24
      "react/no-nested-components": "off",
25
      "ts/consistent-type-definitions": "off",
26
      "unicorn/throw-new-error": "off",
27
      "unused-imports/no-unused-imports": "error",
28
    },
29
  },
30
  {
31
    ignores: [
32
      "**/*.json",
33
    ],
34
  },
35
)
36

37
/** @type {import("eslint").Linter.Config} */
38
export default antfuConfig

ส่วน eslint.config.ts เราก็แค่ import มาจาก antfu.ts

eslint.config.ts

1
import antfu from "./antfu"
2

3
export default antfu

export antfu.ts

เราจะต้อง export antfu.ts ที่เราสร้างไว้ เพื่อให้ apps หรือ packages อื่นๆเอาไปใช้ได้

ตรงนี้ไม่ใช่แค่ keyword export ในไฟล์นะครับ
เป็นการ export แบบที่ npm library จะต้องทำ

ยังอยู่ใน packages/eslint-config นะครับ มาที่ package.json

eslint-config/package.json

1
{
2
  "name": "@repo/eslint-config",
3
  "version": "0.0.0",
4
  "type": "module",
5
  "private": true,
6
  "exports": {
7
    "./base": "./base.js",
8
    "./next-js": "./next.js",
9
    "./react-internal": "./react-internal.js",
10
    "./antfu": {
11
      "default": "./antfu.ts",
12
      "types": "./antfu.ts"
13
    }
14
  },
15
  "devDependencies": {
16
    ...
17
  }
18
}

จะเห็นว่า ผมใช้ .ts กับ eslint config file
ซึ่งต้องบอกว่าไม่จำเป็นเลยสักนิด นะครับ
ผมก็แค่อยากลองเฉยๆ ฮ่าๆ

ทำไมถึงไม่จำเป็น

เพราะว่ามันเป็นแค่ config file พอเราใช้ .ts ที่ต้นทางแล้ว ที่ packages อื่นๆที่นำ config นี้ไปใช้ก็ควรจะต้องใช้ eslint.config.ts ด้วยเช่นเดียวกัน
จะทำให้ IDE Startup time มันช้าลงไปอีกนิดหน่อย คือปกติแล้วการใช้ .ts กับ eslint config จะทำไม่ได้ ถ้าอยากทำจะต้องพึ่งพา lib jiti ด้วย
ซึ่งเจ้า lib jiti จะอ่านไฟล์ eslint.config.ts แล้วแปลงเป็น eslint.config.js ในเบื้องหลังอยู่ดี ทำให้เสียเวลาตรงนี้นิดหน่อย และใช้ Memory เพิ่มนิดหน่อยเช่นกัน

use eslint config from antfu config in another package

setup ESLint ได้แล้ว เราลองเอาไปใช้ใน packages หรือ apps อื่นๆดู
ตอนนี้เรายังไม่ได้สร้าง apps หรือ packages เลย
แต่มี package ui ที่ติดมากับ Turborepo เราจะลองเอาไปใช้ในนี้ละ

แก้ไฟล์ eslint.config.mjs ให้เป็น eslint.config.ts

└── ui
    ├── eslint.config.ts
    ├── eslint.config.mjs
    ├── package.json
    ├── src
    ├── tsconfig.json
    └── turbo

เราก็ต้อง install eslint-config ที่เราสร้างเองด้วย
โดยชื่อที่จะใช้ install จะไม่ใช่ชื่อ folder นะครับ
จะต้องเป็น name ที่อยู่ใน package.json ใน folder ของ eslint-config

ในที่นี้คือ @repo/eslint-config นั่นเอง

eslint-config/package.json

1
{
2
  "name": "@repo/eslint-config",
3 collapsed lines
3
  "version": "0.0.0",
4
  "type": "module",
5
  "private": true,
6
  "exports": {
7
    "./base": "./base.js",
8
    "./next-js": "./next.js",
9
    "./react-internal": "./react-internal.js",
10
    "./antfu": {
11
      "default": "./antfu.ts",
12
      "types": "./antfu.ts"
13
    }
14
  },
17 collapsed lines
15
  "devDependencies": {
16
    "@antfu/eslint-config": "^4.4.0",
17
    "@eslint-react/eslint-plugin": "^1.30.0",
18
    "@eslint/js": "^9.21.0",
19
    "@next/eslint-plugin-next": "^15.2.1",
20
    "eslint": "^9.21.0",
21
    "eslint-config-prettier": "^10.0.2",
22
    "eslint-plugin-format": "^1.0.1",
23
    "eslint-plugin-only-warn": "^1.1.0",
24
    "eslint-plugin-react": "^7.37.4",
25
    "eslint-plugin-react-hooks": "^5.2.0",
26
    "eslint-plugin-react-refresh": "^0.4.19",
27
    "eslint-plugin-turbo": "^2.4.4",
28
    "globals": "^16.0.0",
29
    "typescript": "^5.8.2",
30
    "typescript-eslint": "^8.26.0"
31
  }
32
}

คนที่ใช้ Monorepo มักจะนิยมใช้ @repo/ แล้วตามด้วยชื่อของ package นะครับ ก็เลยกลายเป็น @repo/eslint-config
หรือบางที่ก็จะใช้ชื่อ project แทน เช่น @myproject/eslint-config
หรือจะใช้ชื่อองค์กรก็แล้วแต่เลยครับ

แต่ที่สำคัญคือชื่อทั้งหมดจะต้องห้ามซ้ำกับ packages อื่นๆใน Monorepo เด็ดขาดนะครับ

บางครั้งเราใช้วิธี copy folder package มา แล้วเจอ error เพราะว่า name ใน package.json เรายังไม่ได้แก้ให้ name ไม่ซ้ำ
ผมดักไว้ก่อนเพราะผมเองนี่แหละเจอบ่อย ขนาดว่ารู้อยู่แล้วแต่ก็ยังเจอ 🤣😂😂

มาที่ packages/ui ไฟล์ package.json ให้เพิ่ม internal dependencies แบบนี้

ui/package.json

1
{
2
  "name": "@repo/ui",
3
  "version": "0.0.0",
4
  "private": true,
5
  "exports": {
6
    "./*": "./src/*.tsx"
7
  },
8
  "scripts": {
9
    "lint": "eslint . --max-warnings 0",
10
    "generate:component": "turbo gen react-component",
11
    "check-types": "tsc --noEmit"
12
  },
13
  "dependencies": {
14
    "react": "^19.0.0",
15
    "react-dom": "^19.0.0"
16
  },
17
  "devDependencies": {
18
    "@repo/eslint-config": "workspace:*",
19
    "@repo/typescript-config": "workspace:*",
20
    "@turbo/gen": "^2.4.0",
21
    "@types/node": "^22.13.0",
22
    "@types/react": "19.0.8",
23
    "@types/react-dom": "19.0.3",
24
    "eslint": "^9.21.0",
25
    "typescript": "5.7.3"
26
  }
27
}

เราใส่ "@repo/eslint-config": "workspace:*" เข้าไปที่ devDependencies นะครับ
ด้านหลังที่เป็น workspace:* หมายถึงว่า package นี้อยู่ใน workspace นี้ ไม่ต้องไป download จาก npm registry

เสร็จแล้วก็สั่ง

pnpm i

จากนั้นมาแก้ file eslint.config.ts

ui/eslint.config.ts

1
import config from "@repo/eslint-config/antfu"
2

3
/** @type {import("eslint").Linter.Config} */
4
export default config

เสร็จแล้วผมจะทดสอบที่ useEffect ดูว่ามี eslint เตือนหรือเปล่า

โดยสร้าง useState แล้วเอามาใช้ใน useEffect

ลองที่ component ไหนก็ได้ ผมจะลองที่ file button.tsx

.
├── eslint-config
├── typescript-config
└── ui
    ├── eslint.config.ts
    ├── package.json
    ├── src
    │   ├── button.tsx
    │   ├── card.tsx
    │   └── code.tsx
    ├── tsconfig.json
    └── turbo

จะได้แบบนี้

ต่อไปเราจะเริ่มสร้าง Package ใช้เองกันแล้ว เริ่มที่ Prisma ก่อนเลย

Prisma Package - 1

create prisma package

เราจะมาสร้าง package ของเราเอง เริ่มด้วย Prisma เลย

เราสร้าง folder prisma ใน folder packages

mkdir packages/prisma

จากนั้นให้ cd เข้าไปที่ folder prisma เพื่อความสะดวกในการ install setup package ต่างๆ ในระหว่างที่เราสร้าง prisma package

cd packages/prisma

create package.json

แล้วสั่ง

pnpm init

จะได้ file package.json แบบนี้

prisma/package.json

1
{
2
  "name": "prisma",
3
  "version": "1.0.0",
4
  "description": "",
5
  "main": "index.js",
6
  "scripts": {
7
    "test": "echo \"Error: no test specified\" && exit 1"
8
  },
9
  "keywords": [],
10
  "author": "",
11
  "license": "ISC",
12
  "packageManager": "[email protected]"
13
}

เราจะแก้ name ให้เป็น @repo/prisma ใส่ "type": "module" เอา main ออกไปเลย

ด้วยคำสั่ง

pnpm pkg set type=module
pnpm pkg set name=@repo/prisma
pnpm pkg delete main

หรือถ้าใครจะทำด้วยการแก้ package.json ตรงๆก็ได้เช่นกัน

prisma/package.json

1
{
2
  "name": "prisma",
3
  "name": "@repo/prisma",
4
  "version": "1.0.0",
5
  "description": "",
6
  "type": "module",
7
  "main": "index.js",
8
  "scripts": {
9
    "test": "echo \"Error: no test specified\" && exit 1"
10
  },
11
  "keywords": [],
12
  "author": "",
13
  "license": "ISC",
14
  "packageManager": "[email protected]"
15
}

setup eslint config for prisma

ใส่ eslint config package ของเรา แบบนี้

pnpm pkg set 'devDependencies.@repo/eslint-config=workspace:*'

prisma/package.json

1
{
2
  "name": "@repo/prisma",
3
  "version": "1.0.0",
4
  "description": "",
5
  "main": "index.js",
6
  "scripts": {
7
    "test": "echo \"Error: no test specified\" && exit 1"
8
  },
9
  "keywords": [],
10
  "author": "",
11
  "license": "ISC",
12
  "devDependencies": {
13
    "@repo/eslint-config": "workspace:*"
14
  },
15
  "packageManager": "[email protected]"
16
}

prisma/eslint.config.ts

สร้าง eslint config file

echo 'import antfu from "@repo/eslint-config/antfu"

    export default antfu' > eslint.config.ts

จะได้แบบนี้
หรือเพื่อนๆจะสร้างไฟล์แล้วแล้วก๊อปวางก็ได้ แล้วแต่สะดวกเลยครับ

1
import antfu from "@repo/eslint-config/antfu"
2

3
export default antfu

setup typescript config

ผมจะไม่ได้ใช้ package typescript-config ที่ turborepo เตรียมมาให้นะครับ
ผมจะใช้ lib ของคุณ Matt Pocock นะครับ เขาเตรียม config ที่ควรใช้มาให้เราแล้ว

pnpm add -D @total-typescript/tsconfig

แล้วก็สั่งคำสั่งนี้ เพื่อสร้าง file tsconfig.json แล้วใช้ config ของ total-typescript

echo '{
    "extends": "@total-typescript/tsconfig/bundler/dom/app"
  }
  ' > tsconfig.json

หรือใครจะสร้างไฟล์ tsconfig.json ขึ้นมาแล้วเอา config ไปใส่ ก็ได้ สุดท้ายเราจะได้ tsconfig.json แบบนี้

tsconfig.json

1
{
2
  "extends": "@total-typescript/tsconfig/bundler/dom/app"
3
}

install and init prisma

pnpm add prisma @prisma/client

pnpm prisma init --datasource-provider postgresql

เราก็จะได้ folder prisma เพิ่มมาแบบนี้

.
├── eslint.config.ts
├── package.json
└── prisma
    └── schema.prisma

ที่ไฟล์ schema.prisma
ผมเพิ่ม model user ไปแบบนี้

1
generator client {
2
  provider = "prisma-client-js"
3
}
4

5
datasource db {
6
  provider = "postgresql"
7
  url      = env("DATABASE_URL")
8
}
9

10
model User {
11
  id   Int    @id @default(autoincrement())
12
  name String
13
}

แล้วก็สั่ง

pnpm prisma generate

จะได้ประมาณนี้

❯ pnpm prisma generate
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma

✔ Installed the @prisma/client and prisma packages in your project

✔ Generated Prisma Client (v6.4.1) to ./../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@prisma/client in 40ms

Start by importing your Prisma Client (See: https://pris.ly/d/importing-client)

Tip: Curious about the SQL queries Prisma ORM generates? Optimize helps you enhance your visibility: https://pris.ly/tip-2-optimize

export prisma client

ถัดมาเราจะสร้าง prisma client แล้ว export ไปให้คนอื่นเรียกใช้งาน ผ่าน package prisma ของเราอันนี้

สร้าง file src/index.ts

mkdir src
touch src/index.ts

ในไฟล์มีแค่นี้เลย

src/index.ts

1
import { PrismaClient } from "@prisma/client"
2

3
export const prismaClient = new PrismaClient()

แต่ๆ ถ้าใครจำได้ export แค่ตรงนี้ยังไม่พอที่จะให้ apps หรือ packages อื่นๆใน Turborepo เอาไปใช้งานได้
เราจะต้อง exports ที่ package.json ด้วย แต่ก่อนจะ exports ได้ต้อง compile มันซะก่อน

การสร้าง packages ใน Monorepo สำหรับ มี 3 แบบ ไปอ่านได้ที่ Turborepo docs นะครับ แต่ผมจะอธิบายคร่าวๆ ตรงนี้ก่อน

JIT (Just-in-Time) อันนี้ง่ายสุดคือ exports typescript files ออกจาก packages ไปตรงๆ ไม่ต้องผ่านขั้นตอนการ build อะไรเลย สะดวกสุดๆ แล้วให้ bundler เช่น Tsup, unbuild, rslib ทำการ compile ที่ระดับ application แทน มีข้อเสียหลายอย่างเช่นทำ caching ไม่ได้ แต่ก็แลกมากับความสะดวก ไปอ่านเพิ่มได้ใน docs ของ Turborepo นะครับ
Compiled คือต้อง compile package ก่อนที่จะให้คนอื่นเอาไปใช้งานได้ แต่ก็ต้องมีการ setup compiler เพิ่มเติม (เราใช้วิธีนี้กันในบทความนี้) แต่ก็ไม่ได้ compile ตลอดเพราะ Turborepo ทำ caching ให้ แล้วเรียกใช้ packages กันเฉพาะภายใน Turborepo workspace เท่านั้น
Published คือเราสร้าง packages แล้ว publish ไปที่ npm registry แล้วค่อยให้ apps โหลดมาจาก npm registry อีกทีนึง

compile package using Rslib

เราใช้ typescript เขียน package prisma อันนี้รู้กันอยู่แล้ว
ก่อนที่เราจะให้ apps หรือ packages อื่นๆเรียกใช้ได้ เราต้อง compile ซะก่อน แล้วค่อย export สิ่งที่ได้จากการ compile ออกไป

เราจะต้อง compile prisma package ซะก่อน

เราจะใช้ Rslib ในการ compile นะครับ

การ compile เรามีเงื่อนไขหลายอย่าง Rslib ก็รองรับเงื่อนไขต่างๆหลายรูปแบบเลย การที่จะใช้คำสั่งเดียวยาวๆเพื่อใส่เงื่อนไขของเราทั้งหมดมันก็จะยาวไป
เราจะใช้ config file แทน เพื่อให้ง่ายต่อการ setup เงื่อนไขของเรา รวมถึงลดความผิดพลาดในการพิมพ์คำสั่งด้วยมือแล้วพิมพ์ผิด ตกหล่น

ฉนั้นสำหรับ Prisma package เราจะหยุดไว้ก่อน เราจะไปสร้าง rslib-config package กันก่อน เสร็จแล้วจะกลับมาทำ prisma package กันต่อ

rslib-config package

ใน terminal ใครยังอยู่ที่ package prisma ให้ cd กลับมาที่ workspace ก่อนนะครับ

cd ../..

สร้าง folder rslib-config

mkdir packages/rslib-config

จะได้แบบนี้

packages
├── eslint-config
├── prisma
├── typescript-config
├── ui
└── rslib-config

แล้ว cd เข้าไป

cd packages/rslib-config

create package.json

สร้าง package.json รอบนี้ผมใช้การ echo แทน ใครจะใช้ pnpm init ก็ได้ครับ

pnpm init
pnpm pkg set 'name=@repo/rslib-config'
pnpm pkg set 'type=module'
pnpm pkg delete main
pnpm pkg set 'devDependencies.@repo/eslint-config=workspace:*'
pnpm pkg set 'version=0.0.0'
pnpm pkg set 'description=rslib config package'

 echo '{
    "name": "@repo/rslib-config",
    "version": "0.0.0",
    "description": "rslib config package",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "@repo/eslint-config": "workspace:*"
    }
  }
  ' > package.json

จากนั้นก็สั่ง

pnpm add @rslib/core -D

จะได้แบบนี้

1
{
2
  "name": "@repo/rslib-config",
7 collapsed lines
3
  "version": "0.0.0",
4
  "description": "rslib config package",
5
  "scripts": {
6
    "test": "echo \"Error: no test specified\" && exit 1"
7
  },
8
  "keywords": [],
9
  "author": "",
10
  "license": "ISC",
11
  "devDependencies": {
12
    "@repo/eslint-config": "workspace:*",
13
    "@rslib/core": "^0.5.3"
14
  }
15
}

create rslib config

สร้าง rslib config กัน ผมจะมี config แยกกันระหว่าง packages กับ apps นะครับ
เนื่องจากว่าส่วนของ app อยากให้เล็กที่สุดและส่วนของ lib จะต้องสร้าง typescript declaration file ด้วย

build config for packages

มาสร้าง build config สำหรับ packages กันก่อน

สร้าง file lib.config.ts

lib.config.ts

1
import { defineConfig } from "@rslib/core"
2

3
export default defineConfig({
4
  lib: [
5
    {
6
      bundle: true,
7
      dts: true,
8
      format: "esm",
9
      output: {
10
        distPath: {
11
          root: "./dist/esm",
12
        },
13
        minify: true,
14
        sourceMap: true,
15
        target: "web",
16
      },
17
    },
18
    {
19
      bundle: true,
20
      dts: true,
21
      format: "cjs",
22
      output: {
23
        distPath: {
24
          root: "./dist/cjs",
25
        },
26
        minify: true,
27
        sourceMap: true,
28
        target: "web",
29
      },
30
    },
31
  ],
32
})

มาดูว่าเรา config อะไรไปบ้าง

bundle: true อันนี้เพื่อนๆเลือกเอาได้เลยว่าจะให้ bundle ทุกๆไฟล์ให้มาอยู่ในไฟล์เดียวกันไหม
dts: true คือให้สร้าง declaration typescript file ให้ด้วย คือเราจะได้ไฟล์ .d.ts มาด้วย เพื่อให้ app ที่เอา package ไปใช้รู้ได้ว่า type คืออะไร
format: "esm" หรือ "cjs" คือให้สร้างไฟล์ที่ได้มาใน format อะไร ถ้าเป็น esm ก็เป็น js สมัยใหม่จะใช้ import, export ส่วน cjs ก็จะเป็น js แบบเก่าหน่อย ผมไม่ได้ใช้แบบนี้เท่าไรเลย ไม่ได้ใช้มานานแล้วด้วย
output
- distPath คือจะให้เอาไฟล์ที่ compile มาแล้วไปไว้ที่ไหน
- target: "web" | "node" ก็ขึ้นอยู่ว่าเราจะเอาไฟล์ที่ได้ไปใช้ที่ไหน
- sourcemap เอา sourcemap ด้วย
- minify คือต้องการให้ทำให้ไฟล์ที่ได้มีขนาดเล็กไหม ถ้าต้องการตัวแปรต่างๆขอเราจะถูกเปลี่ยนชื่อให้มันสั้นๆโดยที่การทำงายยังเหมือนเดิม แค่ชื่อตัวแปรมันไม่สื่อว่าคืออะไร

build config for apps

สร้าง file app.config.ts`

app.config.ts

1
import { defineConfig } from "@rslib/core"
2

3
export default defineConfig({
4
  lib: [
5
    {
6
      bundle: true,
7
      dts: false,
8
      format: "esm",
9
      output: {
10
        distPath: {
11
          root: "./dist/esm",
12
        },
13
        minify: true,
14
        sourceMap: true,
15
        target: "web",
16
      },
17
    },
18
  ],
19
})

ในส่วนของ app ผมต้องการแค่ esm และไม่ได้ต้องการ type declaration .d.ts แล้ว

export both configs

เรามา export ทั้งสอง configs ออกไปให้ packages หรือ apps ใช้กัน
เราจะต้อง exports ที่ package.json

pnpm pkg set 'exports[./lib]=./lib.config.ts'
pnpm pkg set 'exports[./app]=./app.config.ts'

จะได้ แบบนี้

rslib-config/package.json

1
{
2
  "name": "@repo/rslib-config",
3
  "version": "0.0.0",
4
  "description": "rslib config package",
5
  "scripts": {
6
    "test": "echo \"Error: no test specified\" && exit 1"
7
  },
8
  "keywords": [],
9
  "author": "",
10
  "license": "ISC",
11
  "devDependencies": {
12
    "@repo/eslint-config": "workspace:*",
13
    "@rslib/core": "^0.5.3"
14
  },
15
  "exports": {
16
    "./lib": "./lib.config.ts",
17
    "./app": "./app.config.ts"
18
  }
19
}

Prisma Package - 2

กลับมาที่ Prisma package กัน รอบนี้เราจะใช้ build config ที่ได้สร้างไว้ใน rslib-config เมื่อกี้นี้

cd into prisma package

cd packages/prisma

install @rslib/core package

ติดตั้ง @rslib/core package กันก่อน

pnpm add -D @rslib/core

add scripts, internal packages and exports in package.json

ต่อมาก็แก้ package.json เพิ่ม @repo/rslib-config เข้าไปแบบนี้

pnpm pkg set 'devDependencies.@repo/rslib-config=workspace:*'
pnpm pkg set 'scripts.build=rslib build'
pnpm pkg set 'scripts.dev=rslib build --watch'
pnpm pkg set 'scripts.check=tsc --noEmit'
pnpm pkg set 'exports[.].import.types=./dist/esm/src/index.d.ts'
pnpm pkg set 'exports[.].import.default=./dist/esm/index.js'
pnpm pkg set 'exports[.].require.types=./dist/cjs/src/index.d.ts'
pnpm pkg set 'exports[.].require.default=./dist/cjs/index.cjs'

เพิ่ม devDependencies ที่ชื่อว่า @repo/rslib-config: workspace:*
เพิ่ม scripts 3 ตัว
1. build ก็สั่ง rslib build เฉยๆ เดี๋ยว rslib มันจะไปอ่าน file rslib.config.ts แล้ว build ให้เราเอง
2. dev สั่ง rslib build --watch ก็สั่งให้ watch ด้วยเมื่อไฟล์มีการเปลี่ยนแปลง rslib ก็จะ build ให้เราใหม่
เพิ่ม exports โดยตรงนี้ก็เหมือนกับที่เราทำใน eslint-config หรือ unbuild-config แต่จะละเอียดกว่า
- import ก็คือ javascript แบบ ESM
- require ก็คือ javascript แบบ Commonjs

prisma/package.json

1
{
2
  "name": "@repo/prisma",
2 collapsed lines
3
  "version": "0.0.0",
4
  "description": "",
5
  "scripts": {
6
    "build": "rslib build",
7
    "dev": "rslib build --watch",
8
    "check": "tsc --noEmit"
4 collapsed lines
9
  },
10
  "keywords": [],
11
  "author": "",
12
  "license": "ISC",
13
  "type": "module",
14
  "devDependencies": {
15
    "@repo/eslint-config": "workspace:*",
16
    "@repo/rslib-config": "workspace:*",
17
    "@rslib/core": "^0.5.3",
18
    "@total-typescript/tsconfig": "^1.0.4"
4 collapsed lines
19
    "typescript": "^5.8.2"
20
  },
21
  "dependencies": {
22
    "@prisma/client": "^6.4.1",
23
    "prisma": "^6.4.1"
24
  },
25
  "exports": {
26
    ".": {
27
      "import": {
28
        "types": "./dist/esm/src/index.d.ts",
29
        "default": "./dist/esm/index.js"
30
      },
31
      "require": {
32
        "types": "./dist/cjs/src/index.d.ts",
33
        "default": "./dist/cjs/index.cjs"
34
      }
35
    }
36
  }
37
}

add more taks to `turbo.json`

พอเรามี app ตอนที่เรานั่งโค้ดเราก็จะสั่ง run dev เป็นปกติกันอยู่แล้วใช่มะ
แต่ว่าตอนนี้เราใช้ Monorepo แยกการทำงานบางอย่างมาไว้ใน packages แล้วแชร์กันในหลายๆ apps ใน packages เราก็ต้องสั่ง run dev เช่นกัน
สุดท้ายตอนที่เรานั่งโค้ดเราก็แค่สั่ง pnpm turbo run dev ก็พอแล้ว

ดังนั้นผมจะเพิ่มคำสั่งนี้ ในไฟล์ turbo.json ด้วย

turbo.json

1
{
2
  "$schema": "https://turbo.build/schema.json",
3
  "ui": "tui",
4
  "tasks": {
23 collapsed lines
5
    "build": {
6
      "dependsOn": [
7
        "^build"
8
      ],
9
      "inputs": [
10
        "$TURBO_DEFAULT$",
11
        ".env*"
12
      ],
13
      "outputs": [
14
        ".next/**",
15
        "!.next/cache/**"
16
      ]
17
    },
18
    "lint": {
19
      "dependsOn": [
20
        "^lint"
21
      ]
22
    },
23
    "check-types": {
24
      "dependsOn": [
25
        "^check-types"
26
      ]
27
    },
28
    "dev": {
29
      "cache": false,
30
      "persistent": true
31
    }
32
  }
33
}

ตรงนี้มี downside นิดนึงนะ
อยากให้เข้าใจสถานการณ์ก่อน
คือเรามี apps ที่เรียกใช้ packages การที่ apps เราจะทำงานได้ มันก็ต้อง build packages ก่อน
ตอนที่เรา run dev ของ apps เราต้อง run dev ของ packages มาก่อน
ตรงนี้แหละที่เป็นปัญหา
ใน Turborepo เราใส่ dependsOn เพื่อบอกว่าก่อนจะทำคำสั่งอะไร ต้องไปรอให้คำสั่งที่ระบุไว้เสร็จก่อน
เราใส่ persistent: true เพื่อบอกว่าการทำงานนั้นๆ จะไม่จบไม่ต้องรอ ไปทำคำสั่งอื่นๆได้เลย
แต่เราไม่สารมารถใส่ทั้ง dependsOn กับ persistent พร้อมกันได้ เพราะว่า ถ้าต้องรอคำสั่งอื่นๆก่อน แต่มันไม่จบ ก็จะรอตลอดไป
ทำให้สั่ง run dev apps กับ packages ก็จะทำ run dev ไปพร้อมๆกัน
หากว่า apps start server ขึ้นมาได้ก่อน พอ packages พร้อม ทำให้ apps มันจะ reload อีกครั้ง หรือ start server อีกครั้ง
ทำให้ apps ทำงานสองรอบโดยไม่จำเป็น

จากนั้นออกมาที่ package.json ของ workspace

cd ../..

เราจะเพิ่ม script dev ใน package.json

pnpm pkg set 'scripts.dev=turbo run dev'

จะได้ แบบนี้

1
{
2
  "name": "blog",
3
  "private": true,
4
  "scripts": {
5
    "build": "turbo run build",
6
    "lint": "turbo run lint",
7
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
8
    "check-types": "turbo run check-types",
9
    "dev": "turbo run dev"
10
  },
11
  "devDependencies": {
12
    "eslint": "^9.21.0",
13
    "eslint-plugin-oxlint": "^0.15.13",
14
    "eslint-plugin-perfectionist": "^4.9.0",
15
    "jiti": "^2.4.2",
16
    "prettier": "^3.5.3",
17
    "turbo": "^2.4.4",
18
    "typescript": "5.8.2"
19
  },
20
  "packageManager": "[email protected]",
21
  "engines": {
22
    "node": ">=18"
23
  }
24
}

create rslib.config.ts

สร้างไฟล์ rslib.config.ts พร้อมกับ import, export config ใน command เดียว ใครสะดวกเขียนเองก็ได้นะครับ

echo 'import config from "@repo/rslib-config/lib"

export default config
' > rslib.config.ts

จะได้ไฟล์ rslib.config.ts แบบนี้

rslib.config.ts

1
import config from "@repo/rslib-config/lib"
2

3
export default config

build prisma package

ลองสั่ง build ดู

pnpm build

น่าจะต้องได้อะไรประมาณนี้

❯ pnpm build

> @repo/[email protected] build /Users/atiwatseenark/Documents/learn/turborepo/blog/packages/prisma

  File (cjs)            Size      Gzip
  dist/cjs/index.cjs    1.2 kB

  -----

  File (esm)           Size       Gzip
  dist/esm/index.js    0.12 kB    0.12 kB

เราจะได้ folder dist เพิ่มมา มีไฟล์แบบนี้

dist
├── cjs
│   ├── eslint.config.d.ts
│   ├── index.cjs
│   ├── index.cjs.map
│   ├── rslib.config.d.ts
│   └── src
└── esm
    ├── eslint.config.d.ts
    ├── index.js
    ├── index.js.map
    ├── rslib.config.d.ts
    └── src

ของด้านใน folder dist นี้แหละ ที่เราใส่ใน exports ที่ package.json

ตอนนี้ Prisma package ของเราพร้อมใช้งานแล้ว เราไปสร้าง Backend แล้วลองเรียใช้ Prisma package กัน

Create Hono app

เข้าไปที่ folder apps

จาก workspace root ก็ให้สั่ง

cd apps

จากนั้นก็สร้าง hono app ด้วยคำสั่งที่ผมไป copy มาจากหน้าเวป hono

pnpm create hono@latest

แล้วก็เลือกตามนี้

❯ pnpm create hono@latest
create-hono version 0.15.3
? Target directory ./api
? Which template do you want to use? nodejs
? Do you want to install project dependencies? yes
? Which package manager do you want to use? pnpm
✔ Cloning the template
✔ Installing project dependencies
🎉 Copied project files
Get started with: cd ./api

เราจะได้ files มาแบบนี้

apps
└── api
    ├── package.json
    ├── README.md
    ├── src
    └── tsconfig.json

add rslib package

จากนั้นก็เพิ่ม package rslib เพื่อเอาไว้ build app แบบนี้

pnpm add -D @rslib/core @total-typescript/tsconfig

update tsconfig.json

ใช้คำสั่งนี้หรือ copy code ด้านล่างก็ได้

echo '{
    "extends": "@total-typescript/tsconfig/bundler/dom/app",
    "compilerOptions": {
      "verbatimModuleSyntax": true,
      "types": [
        "node"
      ],
      "jsx": "react-jsx",
      "jsxImportSource": "hono/jsx",
    }
  }
  ' > tsconfig.json

จะได้ tsconfig แบบนี้

tsconfig.json

1
{
2
  "extends": "@total-typescript/tsconfig/bundler/dom/app",
3
  "compilerOptions": {
4
    "verbatimModuleSyntax": true,
5
    "types": [
6
      "node"
7
    ],
8
    "jsx": "react-jsx",
9
    "jsxImportSource": "hono/jsx",
10
  }
11
}

update package.json

pnpm pkg set type=module
pnpm pkg set 'devDependencies.@repo/eslint-config=workspace:*'
pnpm pkg set 'devDependencies.@repo/rslib-config=workspace:*'
pnpm pkg set 'dependencies.@repo/prisma=workspace:*'
pnpm pkg set 'scripts.build=rslib build'
pnpm pkg set 'scripts.dev=tsx watch --include \'../../packages/*/dist/**/*.js\' src/index.ts'
pnpm pkg set 'scripts.start=node ./dist/esm/index.js'

ที่ script dev ผมจะใส่ option --include ไปที่ tsx ด้วย เพื่อให้ tsx ทำการ reload เมื่อมีอะไรใน packages เปลี่ยนแปลง
ในที่นี้ผมใส่แบบเหมารวม ข้อเสียคือถ้า packages ไหนไม่เกี่ยวกับ api app ของเรา เมื่อ packages นั้นมีการแก้ไข code ด้านใน จะทำให้ apps ของเรา reload ไปด้วย
ถ้าจะให้มีประสิทธิภาพ ควรจะใส่ --include (มันใส่ได้หลายอัน) เฉพาะ packages ที่เกี่ยวข้อง แต่ script ก็จะยาวหน่อยนะ
เช่น ตัวอย่างนี้

pnpm pkg set 'scripts.dev=tsx watch --include \'../../packages/prisma/dist/**/*.ts\' --include \'../../packages/kafka/dist/**/*.ts\' src/index.ts'

เราจะได้ package.json มาแบบนี้

api/package.json

1
{
2
  "name": "api",
3
  "type": "module",
4
  "main": "./dist/esm/index.js",
5
  "scripts": {
6
    "dev": "tsx watch --include '../../packages/*/dist/**/*.js' src/index.ts",
7
    "build": "rslib build",
8
    "start": "node ./dist/esm/index.js"
9
  },
10
  "dependencies": {
11
    "@hono/node-server": "^1.13.8",
12
    "@repo/prisma": "workspace:*",
13
    "hono": "^4.7.4"
14
  },
15
  "devDependencies": {
16
    "@repo/eslint-config": "workspace:*",
17
    "@repo/rslib-config": "workspace:*",
18
    "@rslib/core": "^0.5.3",
19
    "@total-typescript/tsconfig": "^1.0.4",
20
    "@types/node": "^20.11.17",
21
    "tsx": "^4.7.1"
22
  }
23
}

จะเห็นว่า name มี value เป็น api นั่นหมายความว่า Hono backend ของเราอันนี้มีชื่อว่า api นะครับ (ชื่อ folder ไม่ใช่ชื่อของ app เรานะ)

เพิ่ม packages แล้วก็ต้องสั่ง

pnpm i

create build config

เราจะต้องสร้าง rslib.config.ts เพื่อเอาไว้ build api ของเราด้วย

echo '
import config from "@repo/rslib-config/app"

export default config
' > rslib.config.ts

จะได้ไฟล์ rslib.config.ts แบบนี้

rslib.config.ts

1
import config from "@repo/rslib-config/app"
2

3
export default config

use our prisma package

src/index.ts

1
import { serve } from "@hono/node-server"
2
import { prismaClient } from "@repo/prisma"
3
import { Hono } from "hono"
4

5
const app = new Hono()
6

7
app.get("/", (c) => {
8
  return c.text("Hello Hono!")
9
})
10

11
app.get("/users", async (c) => {
12
  const users = await prismaClient.user.findMany()
13

14
  return c.json(users)
15
})
16

17
serve({
18
  fetch: app.fetch,
19
  port: 3000,
20
}, (info) => {
21
  console.log(`Server is running on http://localhost:${info.port}`)
22
})

เราจะเห็นว่ามี autocomplete กับ type บอกให้เราครบถ้วน

มาทดสอบกันหน่อย

pnpm dev

ลองยิง requst

curl http://localhost:3000/users

จะได้ Error ว่าหา Database ไม่เจอ แบบนี้หมายความว่า Prisma ทำงานแล้ว เพราะมันถามหา database แล้ว

Can't reach database server at `localhost:5432`

Please make sure your database server is running at `localhost:5432`.

ใน blog นี้ผมจะไม่ได้ setup data นะครับ เพราะมันจะนอกเรื่อง Turborepo ไปละ

Move Hono app to package

อย่างที่บอกไปว่าผมจะไม่ใช้ Hono เป็น app แต่จะทำเป็น pacakge แทน
วิธีการก็ไม่ยากเลย ย้าย code ทั้งหมดมา แค่ไม่ต้องสั่ง serve()

มาค่อยๆทำไปพร้อมๆกัน

ใน Terminal อยู่ที่ workspace root นะครับ ผม copy folder apps/api มาไว้ที่ pacakges/api ด้วยคำสั่ง

cp -R apps/api packages/api

จะได้

1
packages/api
2
├── dist
3
│   └── esm
4
├── package.json
5
├── README.md
6
├── rslib.config.ts
7
├── src
8
│   └── index.ts
9
└── tsconfig.json

เราจะมาแก้ไข package.json กันก่อน

pnpm pkg set name=@repo/api
pnpm pkg delete 'devDependencies.tsx'
pnpm pkg delete 'main'
pnpm pkg delete 'dependencies.@hono/node-server'

pnpm pkg set 'scripts.dev=rslib build --watch'
pnpm pkg set 'exports[.].import.types=./dist/esm/src/index.d.ts'
pnpm pkg set 'exports[.].import.default=./dist/esm/index.js'
pnpm pkg set 'exports[.].require.types=./dist/cjs/src/index.d.ts'
pnpm pkg set 'exports[.].require.default=./dist/cjs/index.cjs'

ทำอะไรไปบ้าง

ผมแก้ name ให้เป็น @repo/api
ลบ tsx ออกจาก devDependencies
ลบ main
ลบ @hono/node-server ออกจาก dependencies
เพิ่ม exports เหมือนกับที่ทำที่ @repo/prisma เลย

จะได้แบบนี้

1
{
2
  "name": "@repo/api",
3
  "type": "module",
4
  "scripts": {
5
    "dev": "rslib build --watch",
6
    "build": "rslib build",
7
    "start": "node ./dist/esm/index.js"
8
  },
9
  "dependencies": {
10
    "@repo/prisma": "workspace:*",
11
    "hono": "^4.7.4"
12
  },
13
  "devDependencies": {
14
    "@repo/eslint-config": "workspace:*",
15
    "@repo/rslib-config": "workspace:*",
16
    "@rslib/core": "^0.5.3",
17
    "@total-typescript/tsconfig": "^1.0.4",
18
    "@types/node": "^20.11.17"
19
  },
20
  "exports": {
21
    ".": {
22
      "import": {
23
        "types": "./dist/esm/src/index.d.ts",
24
        "default": "./dist/esm/index.js"
25
      },
26
      "require": {
27
        "types": "./dist/cjs/src/index.d.ts",
28
        "default": "./dist/cjs/index.cjs"
29
      }
30
    }
31
  }
32
}

update rslib.config.ts

เราจะต้องแก้ build config ด้วย เพราะเราเปลี่ยนเป็น package แล้ว

rslib.config.ts

1
import config from "@repo/rslib-config/lib"
2

3
export default config

update index.ts

เราจะ export const routes ออกไป ไม่ใช่ app นะ แล้วใช้ method chaining (คือใช้ .get().get().post() ต่อกันไปเรื่อยๆ ไม่ได้ใช้ app.get(), app.get() แล้ว) เพื่อให้ Hono Client มองเห็น type ทั้งหมดได้

ผมเพิ่ม route อีกเส้นนึงด้วย ส่ง json ตรงๆไม่ได้เรียกใช้ prisma เพราะไม่ได้มี database จริงๆ

สร้าง type App แล้ว export ออกไปเช่นกัน

ส่วน serve เราจะไม่ใช้แล้ว เดี๋ยวให้ api ใน apps เป็นคนเรียกใช้

src/index.ts

1
import { serve } from '@hono/node-server'
2
import { Hono } from 'hono'
3
import { prismaClient } from "@repo/prisma"
4

5
const app = new Hono()
6

7
export const routes = app
8
  .get('/', (c) => {
9
    return c.text('Hello Hono!')
10
  })
11
  .get("/users", async (c) => {
12
    const users = await prismaClient.user.findMany()
13
    console.log({ users })
14
    return c.json(users)
15
  })
16
  .get("/cameras", (c) => {
17
    return c.json([
18
      {
19
        brand: "Canon",
20
        model: "R1",
21
      },
22
      {
23
        brand: "Sony",
24
        model: "A9",
25
      },
26
      {
27
        brand: "Nikon",
28
        model: "Z9",
29
      },
30
    ])
31
  })
32

33
export type App = typeof routes
34

35
serve({
36
  fetch: app.fetch,
37
  port: 3000
38
}, (info) => {
39
  console.log(`Server is running on http://localhost:${info.port}`)
40
})

ลอง build ดูซะหน่อย

❯ pnpm build

> @repo/api@ build /Users/atiwatseenark/Documents/learn/turborepo/blog/packages/api
> rslib build

  Rslib v0.5.3

ready   built in 0.10 s (esm)
ready   built in 0.10 s (cjs)
start   Generating DTS... (esm)
start   Generating DTS... (cjs)
ready   DTS generated in 0.93 s (esm)
ready   DTS generated in 0.92 s (cjs)

  File (cjs)            Size      Gzip
  dist/cjs/index.cjs    1.5 kB

  -----

  File (esm)           Size       Gzip
  dist/esm/index.js    0.38 kB    0.27 kB

ก็ผ่านนะ

ต่อไป เราจะกลับมาที่ apps/api กัน

use Hono package in Api App

delete existing api app

ผมจะลบ folder api ออกจาก apps เลย แล้วจะเริ่มสร้างขึ้นมาใหม่เลย

ที่ workspace root ให้สั่ง

rm -rf apps/api

folder apps ก็จะว่างเปล่าละ

ให้สั่ง

create new api app

mkdir apps/api
cd apps/api

สร้าง api app ของเราด้วย scripts แบบนี้
หรือถ้าใครอยาก copy เองก็ด้านล่างเลย

pnpm init

pnpm pkg set name=api
pnpm pkg set type=module
pnpm pkg set 'main=dist/esm/index.js'

pnpm pkg set 'dependencies.@repo/api=workspace:*'
pnpm pkg set 'devDependencies.@repo/eslint-config=workspace:*'
pnpm pkg set 'devDependencies.@repo/prisma=workspace:*'
pnpm pkg set 'devDependencies.@repo/rslib-config=workspace:*'

pnpm pkg set 'scripts.dev=tsx watch --include \'../../packages/*/dist/**/*.js\' src/index.ts'
pnpm pkg set 'scripts.build=rslib build'
pnpm pkg set 'scripts.start=node ./dist/esm/index.js'
pnpm pkg set 'scripts.check=tsc --noEmit'

pnpm pkg delete 'scripts.test'

pnpm add @hono/node-server
pnpm add -D typescript tsx @types/node @rslib/core @total-typescript/tsconfig

package.json

1
{
2
  "name": "api",
3
  "version": "1.0.0",
4
  "description": "",
5
  "main": "index.js",
6
  "scripts": {
7
    "dev": "tsx watch --include '../../packages/*/dist/**/*.js' src/index.ts",
8
    "build": "rslib build",
9
    "start": "node ./dist/esm/index.js"
10
  },
11
  "keywords": [],
12
  "author": "",
13
  "license": "ISC",
14
  "dependencies": {
15
    "@hono/node-server": "^1.13.8",
16
    "@repo/api": "workspace:*"
17
  },
18
  "devDependencies": {
19
    "@repo/eslint-config": "workspace:*",
20
    "@repo/prisma": "workspace:*",
21
    "@repo/rslib-config": "workspace:*",
22
    "@rslib/core": "^0.5.3",
23
    "@types/node": "^22.13.9",
24
    "tsx": "^4.19.3"
25
  }
26
}

add tsconfig file

เพิ่ม tsconfig.json แบบนี้

echo '{
    "extends": "@total-typescript/tsconfig/bundler/dom/app"
  }
  ' > tsconfig.json

จะได้แบบนี้

tsconfig.json

1
{
2
  "extends": "@total-typescript/tsconfig/bundler/dom/app"
3
}

add eslint config file

สร้าง eslint config file

echo '
import config from "@repo/eslint-config/antfu"
export default config
' > eslint.config.ts

จะได้แบบนี้

eslint.config.ts

1
import config from "@repo/eslint-config/antfu"
2

3
export default config

add rslib config file

สร้าง rslib.config.ts

rslib.config.ts

1
import config from "@repo/rslib-config/app"
2

3
export default config

สร้าง folder src กับไฟล์ index.ts

mkdir src
touch src/index.ts

จากนั้นก็มาแก้ไฟล์ src/index.ts

เราจะใช้ app ที่ได้จาก packages/api แทนทั้งหมดเลย
ที่ไฟล์นี้จะเหลือแค่เรียกใช้ serve จาก @hono/node-server เท่านั้น

1
import { serve } from "@hono/node-server"
2
import { routes } from "@repo/api"
3

4
serve({
5
  fetch: routes.fetch,
6
  port: 3000,
7
})
8

9
console.log("server started", 3000)

จะเห็นว่าที่ apps/api ตรงนี้ เราเรียกใช้ serve จาก node-server ฉนั้นถ้าเราอยากเปลี่ยน serve adapter เป็น Deno หรือ Bun ก็ทำได้เลย
โดยที่เราก็ไม่ต้องไปแก้อะไรที่ packages/api เพราะไม่ว่าจะ adapter อะไร Hono ก็ยังเป็น Hono เหมือนเดิม

ลองยิง curl ดู ได้แบบนี้

❯ curl http://localhost:3000/
Hello Hono!⏎

ถือว่าทำงานได้ปกติ

ต่อไป เราจะไปสร้าง Frontend กันก่อน แล้วค่อยให้ Frontend ใช้ Hono client เพื่อทำ E2E Type-safe ภายหลัง

Frontend Tanstack start

จาก workspace root ให้ cd ไปที่ folder app

cd apps

create Tanstack start

npx degit https://github.com/tanstack/router/examples/react/start-basic web

เราจะได้ folder web เพิ่มมา

1
apps
2
├── api
3
└── web
4
    ├── app
5
    ├── app.config.ts
6
    ├── package.json
7
    ├── postcss.config.mjs
8
    ├── public
9
    ├── README.md
10
    ├── tailwind.config.mjs
11
    └── tsconfig.json

cd เข้ามาที่ web

cd web

แก้ name ใน package.json

pnpm pkg set name=web

แบบนี้

1
{
2
  "name": "web",
3
  "private": true,
4
  "sideEffects": false,
5
  "type": "module",
6
  "scripts": {
7
    "dev": "vinxi dev",
8
    "build": "vinxi build",
9
    "start": "vinxi start"
10
  },
11
  "dependencies": {
12
    "@tanstack/react-router": "^1.112.0",
13
    "@tanstack/react-start": "^1.112.3",
14
    "@tanstack/router-devtools": "^1.112.6",
15
    "react": "^19.0.0",
16
    "react-dom": "^19.0.0",
17
    "redaxios": "^0.5.1",
18
    "tailwind-merge": "^2.6.0",
19
    "vinxi": "0.5.3"
20
  },
21
  "devDependencies": {
22
    "@types/node": "^22.5.4",
23
    "@types/react": "^19.0.8",
24
    "@types/react-dom": "^19.0.3",
25
    "autoprefixer": "^10.4.20",
26
    "postcss": "^8.5.1",
27
    "tailwindcss": "^3.4.17",
28
    "typescript": "^5.7.2",
29
    "vite-tsconfig-paths": "^5.1.4"
30
  }
31
}

แล้วก็ install package ได้เลย

pnpm i

เสร็จแล้วลองสั่ง

pnpm run dev

จะมีหน้าเวปง่ายๆแบบนี้

use Hono client to fetch data

เราจะดึง data จาก Hono กันหน่อย

ผมจะย้อนกลับไปที่ api package ก่อน
ผมจะไปเพิ่ม Hono client ตรงนั้น แล้ว export มาให้ frontend เรียกใช้

packages/api/src/index.ts

1
import { Hono } from 'hono'
2
import { prismaClient } from "@repo/prisma"
3
import { hc } from "hono/client"
29 collapsed lines
4

5
const app = new Hono()
6

7
export const routes = app
8
  .get('/', (c) => {
9
    return c.text('Hello Hono!')
10
  })
11
  .get("/users", async (c) => {
12
    const users = await prismaClient.user.findMany()
13
    console.log({ users })
14
    return c.json(users)
15
  })
16
  .get("/cameras", (c) => {
17
    return c.json([
18
      {
19
        brand: "Canon",
20
        model: "R1",
21
      },
22
      {
23
        brand: "Sony",
24
        model: "A9",
25
      },
26
      {
27
        brand: "Nikon",
28
        model: "Z9",
29
      },
30
    ])
31
  })
32

33
export type App = typeof routes
34

35
export const honoClient = (apiUrl: string) => hc<App>(apiUrl)

แล้วก็สร้าง function ที่เอาไว้สร้าง Hono client อีกที เพื่อให้ Frontend แก้ได้ในภายหลังว่า url ของ api จะเป็นอะไร

ทีนี้ก็กลับมาที่ Frontend ของเรา
เราจะติดตั้ง @repo/api package นะครับ

pnpm pkg set 'dependencies.@repo/api=workspace:*'
pnpm pkg set 'dependencies.@repo/eslint-config=workspace:*'
pnpm pkg set 'scripts.dev=vinxi dev --port 3001'
pnpm pkg set 'scripts.lint=eslint --fix .'

โดย default Tanstack start จะใช้ port 3000 ผมเปลี่ยน port ด้วยเนื่องจากว่า hono api ใช้ port 3000 ไปแล้ว

cross check อีกที ใน package.json

1
{
2
  "name": "web",
3 collapsed lines
3
  "private": true,
4
  "sideEffects": false,
5
  "type": "module",
6
  "scripts": {
7
    "dev": "vinxi dev --port 3001",
8
    "build": "vinxi build",
9
    "start": "vinxi start",
10
    "lint": "eslint --fix ."
11
  },
12
  "dependencies": {
13
    "@repo/api": "workspace:*",
14
    "@repo/eslint-config": "workspace:*",
15
    "@tanstack/react-router": "^1.112.18",
16
    "@tanstack/react-start": "^1.112.19",
17
    "@tanstack/router-devtools": "^1.112.18",
18
    "react": "^19.0.0",
19
    "react-dom": "^19.0.0",
20
    "redaxios": "^0.5.1",
21
    "tailwind-merge": "^2.6.0",
22
    "vinxi": "0.5.3"
23
  },
24
  "devDependencies": {
25
    "@types/node": "^22.5.4",
26
    "@types/react": "^19.0.8",
27
    "@types/react-dom": "^19.0.3",
28
    "autoprefixer": "^10.4.20",
29
    "postcss": "^8.5.1",
30
    "tailwindcss": "^3.4.17",
31
    "typescript": "^5.7.2",
32
    "vite-tsconfig-paths": "^5.1.4"
33
  }
34
}

เพิ่ม package แล้วก็อย่าลืมสั่ง

pnpm i

fetch data from Hono app

ถัดมาเราจะมาใช้ hono client ในการดึง data นะครับ

ผมจะเรียกที่ Home page เลย

ไฟล์นี้

app
9 collapsed lines
├── api.ts
├── client.tsx
├── components
│   ├── DefaultCatchBoundary.tsx
│   ├── NotFound.tsx
│   ├── PostError.tsx
│   └── UserError.tsx
├── global-middleware.ts
├── router.tsx
├── routes
5 collapsed lines
│   ├── __root.tsx
│   ├── _pathlessLayout
│   ├── _pathlessLayout.tsx
│   ├── api
│   ├── deferred.tsx
│   ├── index.tsx
17 collapsed lines
│   ├── posts.$postId.tsx
│   ├── posts.index.tsx
│   ├── posts.route.tsx
│   ├── posts_.$postId.deep.tsx
│   ├── redirect.tsx
│   ├── users.$userId.tsx
│   ├── users.index.tsx
│   └── users.route.tsx
├── routeTree.gen.ts
├── ssr.tsx
├── styles
│   └── app.css
└── utils
    ├── loggingMiddleware.tsx
    ├── posts.tsx
    ├── seo.ts
    └── users.tsx

ใน Tanstack start จะใช้ loader ในการดึง data และใช้ useLoaderData() เพื่อเอา data มาใช้งานใน page
สุดท้ายผมก็แปลงเป็น string แล้ว render มันทั้งอย่างนั้นเลย

index.tsx

1
import { createFileRoute } from '@tanstack/react-router'
2
import { honoClient } from "@repo/api"
3

4
export const Route = createFileRoute('/')({
5
  component: Home,
6
  loader: async () => {
7
    const hc = honoClient("http://localhost:3000")
8
    const cameras = await hc.cameras.$get()
9
    return cameras.json()
10
  }
11
})
12

13
function Home() {
14
  const state = Route.useLoaderData()
15
  return (
16
    <div className="p-2">
17
      <h3>Welcome Home!!!</h3>
18
      <h3>Cameras</h3>
19
      <div>
20
        {JSON.stringify(state)}
21
      </div>
22
    </div>
23
  )
24
}

จะเห็นว่ามี type บอกครบเลย

เราใช้ Tanstack start ซึ่งทำ SSR ได้
ตัว loader ก็จะทำงานที่ฝั่ง server นะครับ

พอดูหน้าเวปที่ homepage ก็จะได้

Shadcn package

เราจะมาทำ package สำหรับ Shadcn ui components กัน
อันนี้จะยากที่สุดละ ใน Tutorial นี้
มันจะมี setup เยอะมากๆ บวกกับ Tanstack start ที่ยังเป็น Beta ด้วย
บางอย่างก็ต้อง install ทั้งใน package และ ใน web framework สองที่เลย
ค่อยๆทำตามนะครับ

folders and files

ให้ดูภาพรวมก่อน เดี๋ยวเราจะมี folders กับ files แบบนี้

packages/shadcn
├── src/
│   ├── index.css
│   ├── components/
│   ├── hooks/
│   └── lib/
│       └── utils.ts
├── components.json
├── eslint.config.ts
├── package.json
├── postcss.config.mjs
└── tsconfig.json

remove tailwindcss version3

ผมอยากให้เข้าใจก่อนว่า ตอนนี้ Tanstack start มันยังเป็น Beta อยู่ เราแค่จะลองใช้งาน ตอนที่เราสร้าง project Tanstack start แบบที่เราทำไปนั้นมันแค่การ clone template เค้ามาเท่านั้น
และมันมี tailwindcss ติดมาด้วยอยู่แล้ว แต่มันเป็น version 3
ตอนนี้ tailwindcss มี version 4 ออกมาแล้ว ผมก็เลยจะลบ tailwindcss v3 ที่อยู่ใน Tanstack start ทิ้งไปก่อน แล้วค่อยกลับมาติดตั้งอีกครั้งภายหลัง

cd apps/web
pnpm rm tailwindcss

ที่ workspace root

mkdir packages/shadcn
cd packages/shadcn

create package.json

pnpm init
pnpm pkg set name=@repo/shadcn
pnpm pkg set type=module
pnpm pkg set 'version=0.0.0'
pnpm pkg delete main
pnpm pkg delete scripts.test
pnpm pkg set 'devDependencies.@repo/eslint-config=workspace:*'
pnpm add react react-dom
pnpm add -D typescript @total-typescript/tsconfig @types/node @types/react @types/react-dom

create tsconfig file

สร้างไฟล์ tsconfig.json แล้วใส่ config แบบนี้

tsconfig.json

1
{
2
  "extends": "@total-typescript/tsconfig/bundler/dom/app",
3
  "compilerOptions": {
4
    "jsx": "react-jsx",
5
    "module": "ESNext",
6
    "moduleResolution": "Bundler",
7
    "lib": [
8
      "DOM",
9
      "DOM.Iterable",
10
      "ES2022"
11
    ],
12
    "forceConsistentCasingInFileNames": true,
13
    "baseUrl": ".",
14
    "paths": {
15
      "@repo/shadcn/*": [
16
        "./src/*"
17
      ]
18
    }
19
  },
20
  "include": [
21
    "**/*.ts",
22
    "**/*.tsx"
23
  ],
24
  "exclude": [
25
    "node_modules",
26
    "dist"
27
  ]
28
}

จาก code ด้านบน ในส่วนของ paths ผมใส่ @repo/shadcn/* ซึ่งก็ต้องให้ตรงกับ name ใน package.json นี้นี่แหละ
จะต่างกับใน docs ของ shadcn ที่แนะนำให้ใส่ @/* เพราะว่าแบบ @/* ใช้กับ frontend ที่ไม่ใช่ Monorepo

create eslint config file

สร้างไฟล์ eslint.config.ts

จะใช้คำสั่งหรือ copy code ก็ได้นะ

echo '
import config from "@repo/eslint-config/antfu"

export default config
' > eslint.config.ts

จะได้แบบนี้

eslint.config.ts

1
import config from "@repo/eslint-config/antfu"
2

3
export default config

install tailwindcss v4

ขั้นตอนที่ผมพาทำผมก็ทำตาม docs นี้ครับ
โดยเราจะใช้ postcss นะครับ

install packages

pnpm add tailwindcss @tailwindcss/postcss postcss

create postcss config file

สร้างไฟล์ postcss.config.mjs

สั่ง command หรือ copy code ด้านล่างก็ได้

echo '
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}
' > postcss.config.mjs

postcss.config.mjs

1
export default {
2
  plugins: {
3
    "@tailwindcss/postcss": {},
4
  }
5
}

create css file

สร้างไฟล์ src/index.css ด้วยคำสั่ง

mkdir src
echo '
@import "tailwindcss";
' > src/index.css

จะได้ไฟล์ scr/index.css แบบนี้

1
@import "tailwindcss";

install Shadcn

ก็จะทำตาม shadcn manual installation docs

install packages

pnpm add tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react

add paths to tsconfig.json

อันนี้เราได้ทำกันไปแล้ว

add shadcn css to index.css

ไปที่ไฟล์ src/index.css ที่เราได้สร้างไว้ ใส่ css ของ Shadcn เข้าไปแบบนี้

css ของ Shadcn เราสามารถแก้ได้นะ เอาให้เป็นแบบที่เราชอบได้เลย แก้ได้ทุกจุด

แต่ว่าจะมีส่วนที่แตกต่างจาก docs ของ Shadcn อยู่นิดนึง คือตรงที่ไฮไลท์สีเขียว @source
คือเราต้องบอก Tailwind ด้วยว่า components ของเราที่จะใช้ Tailwindcss อยู่ที่ไหนบ้าง

1
@import "tailwindcss";
2

3
@source "../../../apps/**/*.{ts,tsx}";
4
@source "../../../components/**/*.{ts,tsx}";
5
@source "../**/*.{ts,tsx}";
6

7

8
@plugin 'tailwindcss-animate';
9

10
@custom-variant dark (&:is(.dark *));
11

12
:root {
33 collapsed lines
13
  --background: oklch(1 0 0);
14
  --foreground: oklch(0.145 0 0);
15
  --card: oklch(1 0 0);
16
  --card-foreground: oklch(0.145 0 0);
17
  --popover: oklch(1 0 0);
18
  --popover-foreground: oklch(0.145 0 0);
19
  --primary: oklch(0.205 0 0);
20
  --primary-foreground: oklch(0.985 0 0);
21
  --secondary: oklch(0.97 0 0);
22
  --secondary-foreground: oklch(0.205 0 0);
23
  --muted: oklch(0.97 0 0);
24
  --muted-foreground: oklch(0.556 0 0);
25
  --accent: oklch(0.97 0 0);
26
  --accent-foreground: oklch(0.205 0 0);
27
  --destructive: oklch(0.577 0.245 27.325);
28
  --destructive-foreground: oklch(0.577 0.245 27.325);
29
  --border: oklch(0.922 0 0);
30
  --input: oklch(0.922 0 0);
31
  --ring: oklch(0.708 0 0);
32
  --chart-1: oklch(0.646 0.222 41.116);
33
  --chart-2: oklch(0.6 0.118 184.704);
34
  --chart-3: oklch(0.398 0.07 227.392);
35
  --chart-4: oklch(0.828 0.189 84.429);
36
  --chart-5: oklch(0.769 0.188 70.08);
37
  --radius: 0.625rem;
38
  --sidebar: oklch(0.985 0 0);
39
  --sidebar-foreground: oklch(0.145 0 0);
40
  --sidebar-primary: oklch(0.205 0 0);
41
  --sidebar-primary-foreground: oklch(0.985 0 0);
42
  --sidebar-accent: oklch(0.97 0 0);
43
  --sidebar-accent-foreground: oklch(0.205 0 0);
44
  --sidebar-border: oklch(0.922 0 0);
45
  --sidebar-ring: oklch(0.708 0 0);
46
}
47

48
.dark {
32 collapsed lines
49
  --background: oklch(0.145 0 0);
50
  --foreground: oklch(0.985 0 0);
51
  --card: oklch(0.145 0 0);
52
  --card-foreground: oklch(0.985 0 0);
53
  --popover: oklch(0.145 0 0);
54
  --popover-foreground: oklch(0.985 0 0);
55
  --primary: oklch(0.985 0 0);
56
  --primary-foreground: oklch(0.205 0 0);
57
  --secondary: oklch(0.269 0 0);
58
  --secondary-foreground: oklch(0.985 0 0);
59
  --muted: oklch(0.269 0 0);
60
  --muted-foreground: oklch(0.708 0 0);
61
  --accent: oklch(0.269 0 0);
62
  --accent-foreground: oklch(0.985 0 0);
63
  --destructive: oklch(0.396 0.141 25.723);
64
  --destructive-foreground: oklch(0.637 0.237 25.331);
65
  --border: oklch(0.269 0 0);
66
  --input: oklch(0.269 0 0);
67
  --ring: oklch(0.439 0 0);
68
  --chart-1: oklch(0.488 0.243 264.376);
69
  --chart-2: oklch(0.696 0.17 162.48);
70
  --chart-3: oklch(0.769 0.188 70.08);
71
  --chart-4: oklch(0.627 0.265 303.9);
72
  --chart-5: oklch(0.645 0.246 16.439);
73
  --sidebar: oklch(0.205 0 0);
74
  --sidebar-foreground: oklch(0.985 0 0);
75
  --sidebar-primary: oklch(0.488 0.243 264.376);
76
  --sidebar-primary-foreground: oklch(0.985 0 0);
77
  --sidebar-accent: oklch(0.269 0 0);
78
  --sidebar-accent-foreground: oklch(0.985 0 0);
79
  --sidebar-border: oklch(0.269 0 0);
80
  --sidebar-ring: oklch(0.439 0 0);
81
}
82

83
@theme inline {
36 collapsed lines
84
  --color-background: var(--background);
85
  --color-foreground: var(--foreground);
86
  --color-card: var(--card);
87
  --color-card-foreground: var(--card-foreground);
88
  --color-popover: var(--popover);
89
  --color-popover-foreground: var(--popover-foreground);
90
  --color-primary: var(--primary);
91
  --color-primary-foreground: var(--primary-foreground);
92
  --color-secondary: var(--secondary);
93
  --color-secondary-foreground: var(--secondary-foreground);
94
  --color-muted: var(--muted);
95
  --color-muted-foreground: var(--muted-foreground);
96
  --color-accent: var(--accent);
97
  --color-accent-foreground: var(--accent-foreground);
98
  --color-destructive: var(--destructive);
99
  --color-destructive-foreground: var(--destructive-foreground);
100
  --color-border: var(--border);
101
  --color-input: var(--input);
102
  --color-ring: var(--ring);
103
  --color-chart-1: var(--chart-1);
104
  --color-chart-2: var(--chart-2);
105
  --color-chart-3: var(--chart-3);
106
  --color-chart-4: var(--chart-4);
107
  --color-chart-5: var(--chart-5);
108
  --radius-sm: calc(var(--radius) - 4px);
109
  --radius-md: calc(var(--radius) - 2px);
110
  --radius-lg: var(--radius);
111
  --radius-xl: calc(var(--radius) + 4px);
112
  --color-sidebar: var(--sidebar);
113
  --color-sidebar-foreground: var(--sidebar-foreground);
114
  --color-sidebar-primary: var(--sidebar-primary);
115
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
116
  --color-sidebar-accent: var(--sidebar-accent);
117
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
118
  --color-sidebar-border: var(--sidebar-border);
119
  --color-sidebar-ring: var(--sidebar-ring);
120
}
121

122
@layer base {
6 collapsed lines
123
  * {
124
    @apply border-border outline-ring/50;
125
  }
126
  body {
127
    @apply bg-background text-foreground;
128
  }
129
}

create helper functions

สร้างไฟล์ lib/utils.ts

1
import { clsx, type ClassValue } from "clsx"
2
import { twMerge } from "tailwind-merge"
3

4
export function cn(...inputs: ClassValue[]) {
5
  return twMerge(clsx(inputs))
6
}

create shadcn config file (components.json)

เราจะสร้างไฟล์ components.json ไฟล์นี้เป็นเหมือน config ของ Shadcn น่ะแหละ

สิ่งที่เราต้องใส่ในไฟล์นี้จะมีบางส่วนที่ไม่เหมือนกับใน docs ของ Shadcn นะครับ
ผมจะไฮไลท์สีเขียวไว้

components.json

1
{
2
  "$schema": "https://ui.shadcn.com/schema.json",
3
  "style": "new-york",
4
  "rsc": false,
5
  "tsx": true,
6
  "tailwind": {
7
    "config": "",
8
    "css": "./src/index.css",
9
    "baseColor": "neutral",
10
    "cssVariables": true,
11
    "prefix": ""
12
  },
13
  "aliases": {
14
    "components": "@repo/shadcn/components",
15
    "ui": "@repo/shadcn/components",
16
    "utils": "@repo/shadcn/lib/utils",
17
    "lib": "@repo/shadcn/lib",
18
    "hooks": "@repo/shadcn/hooks"
19
  },
20
  "iconLibrary": "lucide"
21
}

จาก code ด้านบน ผมจะอธิบายเพิ่มแบบนี้

tailwind.config เป็นค่าว่างๆนะ เพราะเราใช้ tailwind v4 ไม่จำเป็นต้องมี tailwind.config.js ก็ได้ แต่ถ้ามีก็เอามาใส่ตรงนี้แหละ
aliases ทุกๆ keys ด้านใน จะ ใส่ aliases ให้ตรงกับ exports ใน package.json นะ (เรายังไม่ได้ทำ เดี๋ยวจะใส่ exports ด้านล่างนี่แหละ)

exports files in package.json

เราจะใส่ exports ใน package.json ด้วยคำสั่ง

pnpm pkg set 'exports[./css]=./src/index.css'
pnpm pkg set 'exports[./postcss.config]=./postcss.config.mjs'
pnpm pkg set 'exports[./lib/*]=./src/lib/*.ts'
pnpm pkg set 'exports[./components/*]=./src/components/*.tsx'
pnpm pkg set 'exports[./hooks/*]=./src/hooks/*.tsx'

ในไฟล์ package.json เราจะมี dependencies กับ devDependencies ต่างๆ ตามนี้

package.json

1
{
2
  "name": "@repo/shadcn",
3
  "version": "0.0.0",
4
  "description": "",
5
  "scripts": {},
6
  "keywords": [],
7
  "author": "",
8
  "license": "ISC",
9
  "type": "module",
10
  "devDependencies": {
11
    "@repo/eslint-config": "workspace:*",
12
    "@total-typescript/tsconfig": "^1.0.4",
13
    "@types/node": "^22.13.9",
14
    "@types/react": "^19.0.10",
15
    "@types/react-dom": "^19.0.4",
16
    "typescript": "^5.8.2"
17
  },
18
  "dependencies": {
19
    "@tailwindcss/postcss": "^4.0.12",
20
    "class-variance-authority": "^0.7.1",
21
    "clsx": "^2.1.1",
22
    "lucide-react": "^0.479.0",
23
    "postcss": "^8.5.1",
24
    "react": "^19.0.0",
25
    "react-day-picker": "8.10.1",
26
    "react-dom": "^19.0.0",
27
    "tailwind-merge": "^2.6.0",
28
    "tailwindcss": "^4.0.6",
29
    "tailwindcss-animate": "^1.0.7"
30
  },
31
  "exports": {
32
    "./css": "./src/index.css",
33
    "./postcss.config": "./postcss.config.mjs",
34
    "./lib/*": "./src/lib/*.ts",
35
    "./components/*": "./src/components/*.tsx",
36
    "./hooks/*": "./src/hooks/*.ts"
37
  }
38
}

install Shadcn Button

เราจะมาลอง install Shadcn Button กัน
ยังอยู่ใน packages/shadcn นะครับ
ให้สั่ง

pnpm dlx shadcn@latest add button

จะได้แบบนี้

❯ pnpm dlx shadcn@latest add button
✔ Checking registry.
✔ Installing dependencies.
✔ Created 1 file:
  - src/components/button.tsx

เราจะได้ไฟล์ button.tsx เพิ่มมาแบบนี้

src
├── components
│   ├── button.tsx
├── hooks/
├── index.css
└── lib/

component Button ที่ได้มาผมจะไม่แก้อะไร จะเอาไปใช้ที่ web เลย

use Shadcn package in Web

เราจะเอา package shadcn มาใช้งานละ

มาที่ apps/web ของเรา

cd apps/web

install package @repo/shadcn

เพิ่ม @repo/shadcn ใน package.json

pnpm pkg set 'dependencies.@repo/shadcn=workspace:*'
pnpm i

create postcss config file

สร้างไฟล์ postcss.config.mjs เราจะเอา postcss config file ที่อยู่ใน @repo/shadcn มาใช้งาน

echo '
import postcssConfig from "@repo/shadcn/postcss.config"
export default postcssConfig
' > postcss.config.mjs

จะได้ไฟล์ postcss.config.mjs แบบนี้

postcss.config.mjs

1
import postcssConfig from "@repo/shadcn/postcss.config"
2
export default postcssConfig

setup tsconfig.json

เราจะต้องเพิ่ม paths ใน tsconfig.json อีก
เพิ่ม @repo/shadcn ตามที่ชื่อของ shadcn package นะ
แล้วให้ชี้ไปที่ src ที่ shadcn package จริงๆผ่าน relative paths เพื่อให้ auto-import ช่วย import components ได้ถูก

tsconfig.json

1
{
23 collapsed lines
2
  "extend": "",
3
  "include": [
4
    "**/*.ts",
5
    "**/*.tsx"
6
  ],
7
  "compilerOptions": {
8
    "strict": true,
9
    "esModuleInterop": true,
10
    "jsx": "react-jsx",
11
    "module": "ESNext",
12
    "moduleResolution": "Bundler",
13
    "lib": [
14
      "DOM",
15
      "DOM.Iterable",
16
      "ES2022"
17
    ],
18
    "isolatedModules": true,
19
    "resolveJsonModule": true,
20
    "skipLibCheck": true,
21
    "target": "ES2022",
22
    "allowJs": true,
23
    "forceConsistentCasingInFileNames": true,
24
    "baseUrl": ".",
25
    "paths": {
3 collapsed lines
26
      "~/*": [
27
        "./app/*",
28
      ],
29
      "@repo/shadcn/*": [
30
        "../../packages/shadcn/src/*"
31
      ]
32
    },
33
    "noEmit": true
34
  }
35
}

ลองใช้ Button component ดูที่ home page

1
import { createFileRoute } from '@tanstack/react-router'
2
import { honoClient } from "@repo/api"
3
import { Button } from '@repo/shadcn/components/button'
4

5
export const Route = createFileRoute('/')({
6
  component: Home,
7
  loader: async () => {
8
    const hc = honoClient("http://localhost:3000")
9
    const cameras = await hc.cameras.$get()
10
    return cameras.json()
11
  }
12
})
13

14
function Home() {
15
  const state = Route.useLoaderData()
16
  return (
17
    <div className="p-2">
18
      <h3>Welcome Home!!!</h3>
19
      <h3>Cameras</h3>
20
      <div>
21
        {JSON.stringify(state)}
22
      </div>
23

24
      <Button className="p-4 bg-red-500 rounded-full" >Test button</Button>
25
    </div>
26
  )
27
}

เปิดหน้าเวปจะได้แบบนี้

ลองอีก component นึง
รอบนี้ลองใช้ Calendar

มาที่ packages/shadcn

cd packages/shadcn
pnpm dlx shadcn@latest add calendar

จะได้แบบนี้

❯ cd packages/shadcn
  pnpm dlx shadcn@latest add calendar
✔ Checking registry.
✔ Installing dependencies.
✔ Created 1 file:
  - src/components/calendar.tsx
ℹ Skipped 1 files: (files might be identical, use --overwrite to overwrite)
  - src/components/button.tsx

เหมือนเดิม ผมจะไม่แก้อะไรใน Calendar component เลย
ไปลองใช้งานกันเลย

ลองใช้ Calendar component ดูที่ home page

1
import { createFileRoute } from '@tanstack/react-router'
2
import { honoClient } from "@repo/api"
3
import { Button } from '@repo/shadcn/components/button'
4
import { Calendar } from '@repo/shadcn/components/calendar'
5
import { useState } from 'react'
6

7
export const Route = createFileRoute('/')({
8
  component: Home,
9
  loader: async () => {
10
    const hc = honoClient("http://localhost:3000")
11
    const cameras = await hc.cameras.$get()
12
    return cameras.json()
13
  }
14
})
15

16
function Home() {
17
  const state = Route.useLoaderData()
18
  const [date, setDate] = useState<Date | undefined>(new Date())
19
  return (
20
    <div className="p-2">
21
      <h3>Welcome Home!!!</h3>
22
      <h3>Cameras</h3>
23
      <div>
24
        {JSON.stringify(state)}
25
      </div>
26

27
      <Button className="p-4 bg-red-500 rounded-full" >Test button</Button>
28
      <Calendar
29
        mode="single"
30
        selected={date}
31
        onSelect={setDate}
32
        className="w-full rounded-md border shadow"
33
      />
34
    </div>
35
  )
36
}

ถึงตรงนี้เพื่อนๆน่าจะใช้ Shadcn ใน Turborepo ได้แล้ว

Husky + Gitmoji

กลับมาที่ workspace ของเรา

install husky

ติดตั้ง husky ด้วยคำสั่ง

pnpm add --save-dev husky -w && pnpm exec husky init

ผมจะสร้างไฟล์ install สำหรับ husky ใหม่ เพราะผมชอบลืมใส่ env HUSKY=0 เพื่อ disable husky ที่ CI pipeline ก็เลยใช้วิธีนี้แทน
สร้างไฟล์ .husky/install.mjs

echo '
// Skip Husky install in production and CI
if (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {
  process.exit(0)
}
const husky = (await import('husky')).default
console.log(husky());
' > .husky/install.mjs

แก้ script prepare เพื่อให้เรียกใช้ script install ที่เราสร้าง

pnpm pkg set \
      'scripts.prepare=node .husky/install.mjs'

ที่ package.json ของ workspace จะได้แบบนี้

package.json

1
{
2
  "name": "blog",
3
  "private": true,
4
  "scripts": {
5
    "build": "turbo run build",
6
    "lint": "turbo run lint",
7
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
8
    "check-types": "turbo run check-types",
9
    "dev": "turbo run dev",
10
    "prepare": "node .husky/install.mjs"
11
  },
12
  "devDependencies": {
13
    "eslint": "^9.21.0",
14
    "eslint-plugin-oxlint": "^0.15.13",
15
    "eslint-plugin-perfectionist": "^4.9.0",
16
    "husky": "^9.1.7",
17
    "jiti": "^2.4.2",
18
    "prettier": "^3.5.3",
19
    "turbo": "^2.4.4",
20
    "typescript": "5.8.2"
21
  },
22
  "packageManager": "[email protected]",
23
  "engines": {
24
    "node": ">=18"
25
  }
26
}

install commitlint and gitmoji

pnpm i -D commitlint-config-gitmoji commitlint -w

สร้าง commitlint config file

echo 'module.exports = {
  extends: ["gitmoji"],
};
' > commitlint.config.cjs

จะได้ commitlint.config.cjs แบบนี้

commitlint.config.cjs

1
module.exports = {
2
  extends: ["gitmoji"],
3
};

จากนั้นไป set ให้ husky เรียกใช้ commitlint แบบนี้

echo '
pnpm dlx commitlint --edit "$1"
' > .husky/commit-msg

จะได้ไฟล์ .husky/commit-msg แบบนี้

pnpm dlx commitlint --edit "$1"

ติดตั้ง commitizen

pnpm add -D commitizen cz-customizable -w
pnpm pkg set config.commitizen.path="node_modules/cz-customizable"
pnpm pkg set config.cz-customizable.config="./cz.config.cjs"

เพิ่ม script ที่เอาไว้เรียกใช้แทน git commit

pnpm pkg set \
      'scripts.commit=cz'

จะได้ package.json ของ workspace แบบนี้

1
{
2
  "name": "blog",
3
  "private": true,
4
  "scripts": {
6 collapsed lines
5
    "build": "turbo run build",
6
    "lint": "turbo run lint",
7
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
8
    "check-types": "turbo run check-types",
9
    "dev": "turbo run dev",
10
    "prepare": "node .husky/install.mjs",
11
    "commit": "cz"
12
  },
13
  "devDependencies": {
14
    "commitizen": "^4.3.1",
15
    "commitlint": "^19.8.0",
16
    "commitlint-config-gitmoji": "^2.3.1",
17
    "cz-customizable": "^7.4.0",
8 collapsed lines
18
    "eslint": "^9.21.0",
19
    "eslint-plugin-oxlint": "^0.15.13",
20
    "eslint-plugin-perfectionist": "^4.9.0",
21
    "husky": "^9.1.7",
22
    "jiti": "^2.4.2",
23
    "prettier": "^3.5.3",
24
    "turbo": "^2.4.4",
25
    "typescript": "5.8.2"
26
  },
4 collapsed lines
27
  "packageManager": "[email protected]",
28
  "engines": {
29
    "node": ">=18"
30
  },
31
  "config": {
32
    "commitizen": {
33
      "path": "node_modules/cz-customizable"
34
    },
35
    "cz-customizable": {
36
      "config": "./cz.config.cjs"
37
    }
38
  }
39
}

สร้าง cz config file

touch cz.config.cjs

ใส่ code template แบบนี้
ตรงนี้เพื่อนๆก็แก้เอาตามชอบนะครับ

cz.config.cjs

1
module.exports = {
2
  types: [
3
    { value: ':sparkles: feat', name: '✨ feat:\tAdding a new feature' },
4
    { value: ':bug: fix', name: '🐛 fix:\tFixing a bug' },
5
    { value: ':memo: docs', name: '📝 docs:\tAdd or update documentation' },
6
    {
7
      value: ':lipstick: style',
8
      name: '💄 style:\tAdd or update styles, ui or ux',
9
    },
10
    {
11
      value: ':recycle: refactor',
12
      name: '♻️ refactor:\tCode change that neither fixes a bug nor adds a feature',
13
    },
14
    {
15
      value: ':zap: perf',
16
      name: '⚡️ perf:\tCode change that improves performance',
17
    },
18
    {
19
      value: ':white_check_mark: test',
20
      name: '✅ test:\tAdding tests cases',
21
    },
22
    {
23
      value: ':truck: chore',
24
      name: '🚚 chore:\tChanges to the build process or auxiliary tools\n\t\tand libraries such as documentation generation',
25
    },
26
    { value: ':rewind: revert', name: '⏪️ revert:\tRevert to a commit' },
27
    { value: ':construction: wip', name: '🚧 wip:\tWork in progress' },
28
    {
29
      value: ':construction_worker: build',
30
      name: '👷 build:\tAdd or update regards to build process',
31
    },
32
    {
33
      value: ':green_heart: ci',
34
      name: '💚 ci:\tAdd or update regards to build process',
35
    },
36
  ],
37

38
  scopes: [
39
    { name: 'apps/api' },
40
    { name: 'apps/web' },
41
    { name: 'pkg/api' },
42
    { name: "pkg/eslint" },
43
    { name: "pkg/rslib" },
44
    { name: "pkg/shadcn" },
45
    { name: "pkg/prisma" },
46
    { name: "docker" },
47
    { name: "pipeline" },
48
    { name: "general" },
49
  ],
50

51
  usePreparedCommit: false, // to re-use commit from ./.git/COMMIT_EDITMSG
52
  allowTicketNumber: false,
53
  isTicketNumberRequired: false,
54
  ticketNumberPrefix: 'TICKET-',
55
  ticketNumberRegExp: '\\d{1,5}',
56

57
  // override the messages, defaults are as follows
58
  messages: {
59
    type: "Select the type of change that you're committing:",
60
    scope: '\nDenote the SCOPE of this change (optional):',
61
    // used if allowCustomScopes is true
62
    customScope: 'Denote the SCOPE of this change:',
63
    subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
64
    body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
65
    breaking: 'List any BREAKING CHANGES (optional):\n',
66
    footer: 'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n',
67
    confirmCommit: 'Are you sure you want to proceed with the commit above?',
68
  },
69

70
  allowCustomScopes: true,
71
  allowBreakingChanges: ['feat', 'fix'],
72
  // skip any questions you want
73
  // skipQuestions: ['scope', 'body'],
74

75
  // limit subject length
76
  subjectLimit: 100,
77
  // breaklineChar: '|', // It is supported for fields body and footer.
78
  // footerPrefix : 'ISSUES CLOSED:'
79
  // askForBreakingChangeFirst : true, // default is false
80
};

Setup lint-staged

การใช้ lint-staged ก็ไม่ยาก
เราแค่ติดตั้ง lint-staged ไว้ใน workspace level

pnpm add -D lint-staged -w

จากนั้น
เราจะต้องสร้าง lint staged config file (.lintstagedrc.json ) ในทุกๆ apps ในทุกๆ packages ที่เราต้องการจะสั่ง eslint

ในที่นี้ผมต้องการจะสั่ง eslint ในทุกๆ apps แต่ไม่ใช่ในทุกๆ packages
ตามนี้

apps/api
apps/web
packages/prisma
pacakges/api
packages/shadcn

ฉนั้น lint-staged config จะต้องมีอยู่ในทุกๆ apps และ packages เหล่านั้น

ไฟล์ lint-staged config ของผมเหมือนกันหมดในทุกๆที่เลย แบบนี้

.lintstagedrc.json

1
{
2
  "*.{js,ts,jsx,tsx}": "eslint --max-warnings 0"
3
}

จากนี้ก็แค่ใส่ไฟล์นี้เข้าไปในทุกๆ apps ทุกๆ packages

1
.
6 collapsed lines
2
├── .gitignore
3
├── .husky
4
│   ├── commit-msg
5
│   ├── install.mjs
6
│   └── pre-commit
7
├── .npmrc
8
├── apps
9
│   ├── api
10
│   │   ├── .lintstagedrc.json
6 collapsed lines
11
│   │   ├── dist
12
│   │   ├── eslint.config.ts
13
│   │   ├── package.json
14
│   │   ├── rslib.config.ts
15
│   │   ├── src
16
│   │   └── tsconfig.json
17
│   └── web
18
│       ├── .lintstagedrc.json
15 collapsed lines
19
│       ├── .gitignore
20
│       ├── .prettierignore
21
│       ├── .turbo
22
│       ├── .vscode
23
│       ├── app
24
│       ├── app.config.ts
25
│       ├── package.json
26
│       ├── postcss.config.mjs
27
│       ├── public
28
│       ├── README.md
29
│       └── tsconfig.json
30
├── commitlint.config.cjs
31
├── cz.config.cjs
32
├── package.json
33
├── packages
34
│   ├── api
35
│   │   ├── .lintstagedrc.json
15 collapsed lines
36
│   │   ├── .gitignore
37
│   │   ├── dist
38
│   │   ├── package.json
39
│   │   ├── README.md
40
│   │   ├── rslib.config.ts
41
│   │   ├── src
42
│   │   └── tsconfig.json
43
│   ├── eslint-config
44
│   │   ├── antfu.ts
45
│   │   ├── base.js
46
│   │   ├── eslint.config.ts
47
│   │   ├── next.js
48
│   │   ├── package.json
49
│   │   ├── react-internal.js
50
│   │   └── README.md
51
│   ├── prisma
52
│   │   ├── .lintstagedrc.json
14 collapsed lines
53
│   │   ├── .env
54
│   │   ├── .gitignore
55
│   │   ├── dist
56
│   │   ├── eslint.config.ts
57
│   │   ├── package.json
58
│   │   ├── prisma
59
│   │   ├── rslib.config.ts
60
│   │   ├── src
61
│   │   └── tsconfig.json
62
│   ├── rslib-config
63
│   │   ├── app.config.ts
64
│   │   ├── eslint.config.ts
65
│   │   ├── lib.config.ts
66
│   │   └── package.json
67
│   ├── shadcn
68
│   │   ├── .lintstagedrc.json
23 collapsed lines
69
│   │   ├── .turbo
70
│   │   ├── components.json
71
│   │   ├── eslint.config.ts
72
│   │   ├── package.json
73
│   │   ├── postcss.config.mjs
74
│   │   ├── src
75
│   │   └── tsconfig.json
76
│   ├── typescript-config
77
│   │   ├── base.json
78
│   │   ├── nextjs.json
79
│   │   ├── package.json
80
│   │   └── react-library.json
81
│   └── ui
82
│       ├── .turbo
83
│       ├── eslint.config.ts
84
│       ├── package.json
85
│       ├── src
86
│       ├── tsconfig.json
87
│       └── turbo
88
├── pnpm-lock.yaml
89
├── pnpm-workspace.yaml
90
├── README.md
91
└── turbo.json

ทดลองใช้ lint-staged ดู

git add .
pnpm lint-staged

ผมได้ commit ไปก่อนที่จะติดตั้ง lint-staged
ในส่วนของผมจะได้แบบนี้

❯ pnpm lint-staged
✔ Backed up original state in git stash (58f0e79)
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...

Conclusion

เราได้ทำอะไรกันไปบ้าง

สร้าง Turborepo เปล่าๆ แต่ก็ไม่ได้เปล่าๆเท่าไร มี Nextjs ติดมาด้วย 2 apps แต่ว่าลบทิ้งไป
สร้าง configs ต่างๆที่สามารถใช้งานร่วมกันได้ทั้งใน apps และ packages เช่น eslint-config, rslib-config
สร้าง package Hono api แล้วให้ logic ของ API มาอยู่ตรงนี้ให้หมด แล้วค่อยเอาไป run server ที่ apps/api อีกครั้งนึง
ทำให้เราสามารถใช้ Hono client ดึง data ที่ Frontend โดยมี Type support ทั้งหมด เป็น E2E type-safe
สร้าง apps/api แล้วเรียกใช้ package api อีกที เท่านี้เลย ง่ายมากๆตรงนี้
สร้าง prisma package
สร้าง apps/web โดยใช้ Tanstack start framework
สร้าง shadcn package เพื่อทำ UI ให้ Web นำไปใช้อีกที ซึ่งในอนาคตถ้ามี Web ที่ 2 แล้วอยากใช้ UI ตรงนี้ด้วยก็ดึงไปใช้ได้เลย สะดวกมากๆ
ตรงนี้ผมแนะนำว่าถ้าเป็นไปให้ควรสร้าง pure components ไว้ในนี้จะดีกว่านะครับ เพื่อให้ง่ายตอนที่เอา components ไปใช้ในหลายๆที่

tutorial นี้มันยาวมากๆๆๆ ผมอยากให้เห็นภาพให้ได้มากที่สุด เลยพยายามยกตัวอย่างพร้อมพาทำทีละขั้นตอน
อยากให้คนที่ follow ตาม step-by-step ใช้งาน Turborepo ได้เข้าใจ

ยังไงถ้าตกหล่นตรงไหน DM มาบอกกันได้นะครับ ผมจะรีบแก้
ผมพยายามทำให้ละเอียดแล้ว ใช้เวลานานมากกว่าจะเขียนเสร็จ แต่ผมว่ามันน่าจะมีจุดที่พลาดอยู่หลายจุดแน่ๆ ต้องขออภัยด้วยนะครับ

ยังเหลืออีก 2 EPs นะครับ ผมจะพยายามหาเวลามาเขียนให้จบ

EP2 จะเขียนคำสั่งเพื่อเอา apps ของเราทั้ง api ทั้ง web มาทำเป็น Docker image นะครับ
EP3 จะเขียน pipeline ให้ build docker image ของ api และ web แล้ว push เข้า google registry นะครับ

Thank you 🙏🫰

ขอบคุณทุกคนที่อ่านมาถึงตรงนี้

ใน tutorial นี้ยังขาดการ setup Test ถ้าผมมีเวลาจะมาเขียนแยกเป็นอีก blog นึงละกันครับ นี่ก็เยอะมากเลย

ตัวอย่าง repo ที่เสร็จแล้ว อยู่ที่ my github

ขอให้มีความสุขกับการ coding นะครับ

Crafted with care 📝❤️ ✨ by

CodeSook

Turborepo Guide EP1

What is Monorepo

Why do we need Monorepo

Before start

Init Turborepo

turbo.json

Setup Eslint

Install Eslint at the workspace level

Init via Antfu’s eslint

Install ESLint and it’s dependencies

eslint-config/package.json

create new eslit config

antfu.ts

eslint.config.ts

export antfu.ts

eslint-config/package.json

use eslint config from antfu config in another package

eslint-config/package.json

ui/package.json

ui/eslint.config.ts

Prisma Package - 1

create prisma package

create package.json

prisma/package.json

prisma/package.json

setup eslint config for prisma

prisma/package.json

prisma/eslint.config.ts

setup typescript config

tsconfig.json

install and init prisma

export prisma client

src/index.ts

compile package using Rslib

rslib-config package

create package.json

create rslib config

build config for packages

lib.config.ts

build config for apps

app.config.ts

export both configs

rslib-config/package.json

Prisma Package - 2

cd into prisma package

install @rslib/core package

add scripts, internal packages and exports in package.json

prisma/package.json

add more taks to turbo.json

turbo.json

create rslib.config.ts

rslib.config.ts

build prisma package

Create Hono app

add rslib package

update tsconfig.json

tsconfig.json

update package.json

api/package.json

create build config

rslib.config.ts

use our prisma package

src/index.ts

Move Hono app to package

update rslib.config.ts

rslib.config.ts

update index.ts

src/index.ts

use Hono package in Api App

delete existing api app

create new api app

package.json

add tsconfig file

tsconfig.json

add eslint config file

eslint.config.ts

add rslib config file

rslib.config.ts

Frontend Tanstack start

create Tanstack start

add more taks to `turbo.json`