@attd/front-deploy

@attd/front-deploy

CLI tool สำหรับ deploy Frontend static projects ขึ้น Cloudflare Pages ด้วยคำสั่งเดียว

• ตรวจจับ Framework อัตโนมัติ — ไม่ต้องตั้งค่าอะไรเพิ่ม
• สร้าง Cloudflare Pages project อัตโนมัติถ้ายังไม่มี
• รองรับ plain HTML (ไม่มี package.json ก็ deploy ได้)
• กรอง node_modules, .git และโฟลเดอร์ขยะออกอัตโนมัติ

Installation

npm install -g @attd/front-deploy

Requirements: Node.js >= 18.0.0

First-time Setup

รันครั้งแรกหลังติดตั้ง (หรือเมื่อต้องการเปลี่ยน credentials):

front-deploy setup

ระบบจะถามข้อมูล 2 อย่าง:

Credentials จะถูกเก็บที่ ~/.front-deploy/config.json

ถ้ายังไม่ได้ setup ระบบจะถามอัตโนมัติเมื่อรัน deploy ครั้งแรก

Usage

Deploy

front-deploy <src_project> <project_name> [options]

# Deploy พร้อม build อัตโนมัติ
front-deploy ./my-app my-cf-project

# ระบุ branch
front-deploy ./my-app my-cf-project --branch staging

# ข้าม build ใช้ไฟล์ที่ build ไว้แล้ว
front-deploy ./my-app my-cf-project --skip-build

# ระบุ package manager
front-deploy ./my-app my-cf-project --pm pnpm

# ระบุ env file (inject ตอน build)
front-deploy ./my-app my-cf-project --env .env.production

# รวม options
front-deploy ./my-app my-cf-project --branch staging --pm yarn

ทุกครั้งที่ deploy ระบบจะแสดงสรุป Options ที่ใช้งาน พร้อมระบุค่า (default) ให้เห็นก่อนเริ่ม build

Options

--env: ตัวแปรจากไฟล์จะถูก inject เข้า process ตอน build เท่านั้น (เหมาะกับ Vite VITE_*, CRA/Next NEXT_PUBLIC_* ฯลฯ) — ถ้าใช้ร่วมกับ --skip-build หรือ static HTML จะไม่มีผลเพราะไม่มีขั้นตอน build

ค่า default คือ .env — ถ้ามีไฟล์ .env ในโปรเจคจะถูกโหลดอัตโนมัติ, ถ้าไม่มีจะข้ามไปเงียบ ๆ (ไม่ error) ส่วนถ้าระบุ --env <file> เองแล้วหาไฟล์ไม่เจอจะ error ทันที

Additional Commands

# ตรวจสอบ Framework ของโปรเจค (ไม่ deploy)
front-deploy detect ./my-app

# ดู credentials ที่บันทึกไว้
front-deploy whoami

# ตั้งค่า credentials ใหม่
front-deploy setup

# ดู version
front-deploy --version

Supported Frameworks

Package Manager Detection

ตรวจจับอัตโนมัติตามลำดับ:

1. package.json → field "packageManager" (corepack standard) เช่น "packageManager": "pnpm@8.6.0"
2. Lock file: bun.lockb → bun
3. Lock file: pnpm-lock.yaml → pnpm
4. Lock file: yarn.lock → yarn
5. Lock file: package-lock.json → npm
6. Fallback → npm

ใช้ --pm เพื่อ override ค่าที่ detect ได้

Auto Project Creation

ถ้า project ยังไม่มีใน Cloudflare Pages ระบบจะสร้างให้อัตโนมัติแล้ว deploy ต่อเลย ไม่ต้องสร้าง project ใน Dashboard ก่อน

Note: Cloudflare อาจเพิ่ม suffix ให้ชื่อ project (เช่น my-app-af2.pages.dev) ถ้าชื่อนั้นถูกใช้ไปแล้วในระบบ global namespace — tool จะดึง subdomain จริงมาแสดงเสมอ

Auto Ignore

ก่อน deploy ทุกครั้ง ระบบจะกรองโฟลเดอร์/ไฟล์ต่อไปนี้ออกอัตโนมัติ:

node_modules · .git · .svn · .hg · vendor · .cache · .parcel-cache · .turbo · .nuxt · .next · coverage · .nyc_output · tmp · .tmp · __pycache__ · .sass-cache · .gradle · *.log · .DS_Store · Thumbs.db

Project Structure

@attd/front-deploy/
├── bin/
│   └── front-deploy.js      # CLI entry point + command definitions
├── src/
│   ├── index.js             # Main orchestration flow
│   ├── config.js            # Credentials storage (~/.front-deploy/config.json)
│   ├── detector.js          # Framework auto-detection
│   ├── builder.js           # Build execution + package manager detection + deploy dir prep
│   ├── deployer.js          # Cloudflare Pages deployment via wrangler + CF API
│   └── logger.js            # Colored terminal output
└── package.json

Notes

• Next.js: ต้องตั้งค่า output: 'export' ใน next.config.js ก่อน
• SvelteKit: ต้องใช้ @sveltejs/adapter-static
• Nuxt.js: ใช้ nuxt generate (ไม่ใช่ nuxt build)

Publishing (maintainer)

# bump version แล้ว publish
npm version patch   # หรือ minor / major
npm publish --access public