@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 อย่าง:

| ข้อมูล | หาได้จากไหน | |--------|------------| | Cloudflare API Token | https://dash.cloudflare.com/profile/api-tokens → สร้าง token ที่มี Cloudflare Pages: Edit permission | | Cloudflare Account ID | https://dash.cloudflare.com → sidebar ขวา |

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

| Option | ค่าที่รองรับ | Default | คำอธิบาย | |--------|------------|---------|---------| | --branch <branch> | string | main | Branch name สำหรับ deployment | | --skip-build | — | false | ข้ามขั้นตอน build | | --pm <manager> | npm yarn pnpm bun | auto-detect | ระบุ package manager | | --env <file> | path | .env | env file ที่จะ inject เป็น environment variable ตอน build (เช่น .env.dev) |

--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

| Framework | Detection | Build Command | Output Dir | |-----------|-----------|---------------|------------| | Next.js | next dep | next build | out/ | | Nuxt.js 3 | nuxt dep (v3) | nuxt generate | .output/public/ | | Nuxt.js 2 | nuxt dep (v2) | nuxt generate | dist/ | | SvelteKit | @sveltejs/kit | vite build | build/ | | Astro | astro dep | astro build | dist/ | | SolidJS | solid-js dep | vite build | dist/ | | Angular | @angular/core | ng build --configuration production | dist/<name>/ | | Svelte (Vite) | svelte + vite | vite build | dist/ | | React (CRA) | react-scripts | react-scripts build | build/ | | React (Vite) | react + vite | vite build | dist/ | | Vue (CLI) | @vue/cli-service | vue-cli-service build | dist/ | | Vue (Vite) | vue + vite | vite build | dist/ | | Vite (Generic) | vite dep | vite build | dist/ | | Static HTML | ไม่มี package.json | — (ไม่ต้อง build) | . (root) |

Package Manager Detection

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

1. package.json → field "packageManager" (corepack standard) เช่น "packageManager": "[email protected]"
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