Node.js: NPM Workspaces (Frontend + Backend )

my-monorepo/
├── package.json <-- &#x5B;Root] จุดควบคุมหลักของทุกโปรเจกต์
├── package-lock.json <-- &#x5B;Root] มีตัวเดียวควบคุมทั้งระบบ
├── node_modules/ <-- &#x5B;Root] ที่เก็บ Library ทั้งหมด (แชร์ร่วมกัน) │
├── frontend/ <-- โฟลเดอร์ Frontend (เช่น Vue 3 + Vite) │ ├── package.json │ ├── vite.config.ts
│ └── src/
│
└── backend/ <-- โฟลเดอร์ Backend (เช่น Node.js + Express) ├── package.json └── src/

{ "name": "my-monorepo", "version": "1.0.0", "private": true, "workspaces": [ "frontend", "backend" ], "scripts": { "dev:frontend": "npm run dev -w frontend", "dev:backend": "npm run dev -w backend", "build:all": "npm run build --workspaces" }
}

{ "name": "frontend", "version": "0.1.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc -b && vite build" }, "dependencies": { "vue": "^3.5.13", "axios": "^1.8.4" }
}

{ "name": "backend", "version": "0.1.0", "scripts": { "dev": "nodemon src/index.js", "start": "node src/index.js" }, "dependencies": { "express": "^4.19.2" }
}

ลบของเก่าแล้วคลีนระบบ

หากก่อนหน้านี้คุณเคยรัน npm install แยกในโฟลเดอร์ frontend หรือ backend ไปแล้ว ให้ทำการลบโฟลเดอร์ node_modules และ package-lock.json ในโปรเจกต์ลูกออกให้หมด

จากนั้นกลับมาที่โฟลเดอร์นอกสุด แล้วรันคำสั่ง
npm install

NPM จะทำการสแกนดู package.json ของตัวลูกทุกตัว แล้วดึงเอา Dependency ทั้งหมดมารวมกันและติดตั้งไว้ที่ node_modules ของ Root ตัวบนสุดเพียงที่เดียว!

🚀 วิธีการรัน Frontend และ Backend พร้อมกัน

เมื่อเปลี่ยนมาใช้ระบบ Workspaces เราไม่จำเป็นต้องเปิด Terminal หลาย ๆ หน้าต่างแล้วคอย cd เข้าโฟลเดอร์นู้นโฟลเดอร์นี้อีกต่อไป เราสามารถควบคุมทุกอย่างจากโฟลเดอร์นอกสุดได้ทันที

วิธีที่ 1: รันพร้อมกันด้วยคำสั่งเดียว

หากต้องการเปิด Terminal อันเดียวแล้วให้มันรันทั้ง Frontend และ Backend ขึ้นมาพร้อมกันในหน้าจอเดียว เราจะใช้เครื่องมือที่ชื่อว่า concurrently เข้ามาช่วย

1. ติดตั้ง concurrently ไว้ที่โฟลเดอร์ Root
   npm install concurrently --save-dev
2. ไปเพิ่ม Script ใน package.json ตัวนอกสุด

   Plain Text

   "scripts": { "dev:frontend": "npm run dev -w frontend", "dev:backend": "npm run dev -w backend", "dev": "concurrently \"npm run dev:frontend\" \"npm run dev:backend\""
   }