Dev Environment Setup Guide

← cd ..

// guides

Dev Environment Setup Guide

คู่มือเซ็ตเครื่องสำหรับ Web Dev ตั้งแต่ศูนย์ — เลือก OS แล้วทำตามลำดับ

Terminal & Shell

Terminal App

Windows → Windows Terminal (หน้าตาดี, multi-tab, WSL support). macOS → iTerm2 หรือ Ghostty

$brew install --cask iterm2

# หรือ Ghostty (เร็วกว่า, GPU-accelerated)

$brew install --cask ghostty

WSL 2 (Windows เท่านั้น)

Linux shell จริงๆ บน Windows — จำเป็นสำหรับ Docker, nvm, และ dev tools ส่วนใหญ่

# ไม่จำเป็น — macOS มี Unix shell อยู่แล้ว

หลังจาก WSL พร้อม ให้รัน command ทุกอย่างใน WSL terminal ไม่ใช่ PowerShell

Zsh + Oh My Zsh

Shell ที่ทันสมัยกว่า bash — plugins, autocomplete, theming ครบ

# macOS มี zsh เป็น default แล้ว ติดแค่ Oh My Zsh

$sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Plugin ที่แนะนำใน ~/.zshrc: plugins=(git zsh-autosuggestions zsh-syntax-highlighting)

Starship Prompt

Prompt สวยงามและเร็ว — แสดง git branch, node version, language ปัจจุบันอัตโนมัติ

$brew install starship

# เพิ่มบรรทัดนี้ท้าย ~/.zshrc

$eval "$(starship init zsh)"

Package Manager & Runtime

Homebrew (macOS)

Package manager หลักของ macOS — ติดตั้งเกือบทุกอย่างผ่าน brew ได้

$/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# เพิ่ม brew เข้า PATH (Apple Silicon)

$eval "$(/opt/homebrew/bin/brew shellenv)"

Node.js via nvm

ใช้ nvm แทนการติดตั้ง Node ตรงๆ เพื่อสลับ version ต่อโปรเจกต์ได้

$brew install nvm

# เพิ่มใน ~/.zshrc ตาม brew info nvm

$nvm install --lts && nvm use --lts

เช็คด้วย: node -v && npm -v

pnpm

Package manager ที่เร็วกว่าและประหยัด disk กว่า npm — แนะนำสำหรับ monorepo

$brew install pnpm

pnpm i แทน npm install, pnpm dlx แทน npx

Bun

Runtime + package manager ทางเลือกที่เร็วมาก — รัน TypeScript ได้ตรงๆ โดยไม่ต้อง transpile

$brew install bun

bun run index.ts — ไม่ต้อง tsc, bun install เร็วกว่า npm ~25x

Editor & Extensions

VS Code

Editor หลัก — ecosystem extension กว้างที่สุด, remote development, integrated terminal

$brew install --cask visual-studio-code

Extensions แนะนำ: ESLint, Prettier, GitLens, Tailwind IntelliSense, Prisma, Error Lens

Cursor

VS Code fork ที่มี AI built-in (GPT-4o / Claude) — Tab completion + chat ใน editor เดียว

$brew install --cask cursor

Import settings จาก VS Code ได้ทันที: Cursor → Migrate from VS Code

Claude Code (CLI)

AI coding agent ที่รันใน terminal — อ่านไฟล์, แก้โค้ด, รัน command ในโปรเจกต์ได้

$npm install -g @anthropic-ai/claude-code

$claude

ต้องมี Anthropic API key หรือ login ผ่าน claude.ai ครั้งแรก

Git & Version Control

Git

Version control พื้นฐาน — ต้องมีก่อนอย่างอื่นทั้งหมด

$brew install git

git config --global user.name "ชื่อ" && git config --global user.email "อีเมล"

GitHub CLI

จัดการ PR / Issue / Repo จาก terminal — ไม่ต้องสลับไปเว็บ

$brew install gh

$gh auth login

gh pr create, gh pr list, gh issue view — ใช้ใน repo ได้เลย

SSH Key Setup

ผูก SSH key กับ GitHub เพื่อ push โดยไม่ต้องพิมพ์ password ทุกครั้ง

$ssh-keygen -t ed25519 -C "your@email.com"

$pbcopy < ~/.ssh/id_ed25519.pub

# วางใน GitHub → Settings → SSH Keys

เช็คด้วย: ssh -T git@github.com

Database & Docker

Docker Desktop

รัน Database / Service เป็น container — ไม่เปื้อนเครื่อง ลบทิ้งง่าย

$brew install --cask docker

# เปิด Docker.app ครั้งแรกเพื่อ initialize

MySQL (Docker)

สำหรับ Local development — แยก port ต่อโปรเจกต์ได้ไม่ชนกัน

$docker run --name mysql-dev -e MYSQL_ROOT_PASSWORD=root -p 3306:3306 -d mysql:8

docker-compose.yml ดีกว่าถ้ามีหลาย service — version, port, volume ชัดเจน

DB GUI Client

ดูข้อมูลและรัน query ผ่าน UI — TablePlus สำหรับ macOS, DBeaver ข้ามแพลตฟอร์ม

$brew install --cask tableplus

# หรือ DBeaver (ฟรี, ข้ามแพลตฟอร์ม)

$brew install --cask dbeaver-community

Cloud & Deploy

Vercel CLI

Deploy / pull env / ดู log ของโปรเจกต์ Next.js ที่ขึ้น Vercel จาก terminal

$npm i -g vercel

$vercel login

$vercel link && vercel env pull

vercel dev — รัน local ด้วย env เดียวกับ Vercel production

PM2

Process manager สำหรับ Node.js บน server — auto-restart, log, cluster mode

$npm i -g pm2

$pm2 start server.js --name api

$pm2 startup && pm2 save

pm2 logs api, pm2 monit — monitor realtime

Railway CLI

Deploy backend / database บน Railway cloud จาก terminal

$brew install railwayapp/railway/railway

$railway login

railway up — deploy, railway logs — ดู log production

← cd ..

// guides