สร้าง Customize Template และ Script ของ create-react-app ของตัวเอง

เมื่อความขี้เกียจเข้าครอบงำ อะไรๆก็เป็นไปได้ … เคยใช่ไหม ที่ใช้ create-react-app มาทุกครั้ง ต้องมานั่งไล่ลบไฟล์ที่ไม่ได้ใช้ทุกครั้ง แถมยังต้องเพิ่ม Folder ชื่อ Pages เอย Components เอย กว่าจะได้ Code Structure ของโปรเจคที่ต้องการก็ปาไปเกือบชั่วโมงแล้ว เสียเวลา Task อื่นจริง ๆ จะดีกว่าไหม ที่สร้าง Template ของตัวเองสะเลย รันครั้งเดียว ได้ Code Structure ได้ตามที่ต้องการเป๊ะๆ เลย ง่ายๆ เวลาขึ้นโปรเจคใหม่ ก็จะได้ไม่ต้องมานั่งลบ นั่งสร้างอีกแล้ว และสิ่งที่อยากจะแถมไปด้วยก็คือ การสร้าง Script ระหว่างการ Run ไปด้วย (อย่าเพิ่งสงกะสัย ติดตามต่อไปงับ)

เพื่อเป็นการไม่เสียนาฬิกา (`=..=) ผ่ามๆ เพื่อเป็นการไม่เสียเวลา ! เชิญรับชมได้เลยครับ

Photo by Mazhar Zandsalimi on Unsplash

Content ในวันนี้:

1. สร้าง Template สักหน่อย

• Step 1: Forking Repo 🛠
• Step 2: Use CPE Method (Copy, Paste & Edit) 🧩
• Step 3: NPM Publish 🚀

2. สร้าง Script อีกสักนิด

• Step 1: Imagination 🎨
• Step 2: Make it done! 🏆
• Step 3: NPM Publish 🚀

3. ลองสร้างสัก Project

ดูง่ายไปไหม ถถถถถถถถ ลองดูกันครับ

ปล. ขออนุญาตข้ามความรู้พื้นฐานต่างๆ ที่คิดว่าควรข้ามไปนะครับ แต่ไม่ต้องห่วงผมทิ้ง Keyword ไว้ให้ Search ต่อได้งับ

1. สร้าง Template สักหน่อย

Step 1: Forking Repo 🛠

ขั้นตอนนี้ไม่ยากแค่ Fork โปรเจค create-react-app ของ Facebook ต้นฉบับเลยครับ จาก link นี้ [create-react-app](https://github.com/facebook/create-react-app)

กดตุ่มนี้เลย Fork

ผลลัพธ์ที่ถูก ควรจะได้แบบนี้

project create-react-app จะถูก Fork เป็นชื่อเรา

ทำเสร็จก็ Clone ลงเครื่องเลย ทำในเครื่องสะดวกกว่า และเมื่อ Clone ลงมาเสร็จแล้วก็ เลือก Editor มาเปิด Project ตามใจชอบเลยครับ … VSCode ฉันเลือกนาย~

Photo by Jay on Unsplash

สำหรับ Folder ที่มีอยู่ใน create-react-app ที่เราเพิ่ง clone มานั้น ค่อนข้างเยอะมากกกกกก ดังนั้น อยากให้ผู้อ่าน Focus ไปที่ 2 Folder นี้เท่านั้นครับ

1. {project_path}/packages/cra-template อันนี้ใช้สำหรับแก้ Code Structure
2. {project_path}/packages/react-scripts/scripts อันนี้ใช้สำหรับแก้ Script ระหว่างการติดตั้ง (เดี๋ยวอธิบายตอน “2. สร้าง Script อีกสักนิด” นะ)

Keyword for more knowledge: create-react-app, VSCode, Git, Git Repository, Git Clone, and Git Fork

Step 2: Use CPE Method (Copy, Paste & Edit) 🧩

ผมขอเสนอเทคนิค(ไม่)ลับ ที่หลายๆคนก็อาจจะทำแต่ไม่รู้จะตั้งชื่อมันว่าอะไร “CPE Method” เป็นวิธีที่ใช้ในการพัฒนาโปรแกรมต่างๆ ส่วนใหญ่ของผมเลยครับ 555555 เพราะมันคือ Copy: คัดลอกสิ่งที่คิดว่าจะใช้ได้, Paste: วางมันลงพื้นที่ของเรา & Edit: แก้ไขจนมันใช้ได้กับงานเรา … That’s it.

วิธีนี้จะเหมาะกับเคสนี้มาก เพราะมันแก้หลายที่ 5555 ก๊อบไปวางก่อนก็ได้ เดี๋ยวอธิบายอีกทีงับ

• เริ่มโดย “Copy” (หรือเรียก Duplicate ก็ไม่ผิดนะ) โฟลเดอร์ชื่อ {project_path}/packages/cra-template/ ให้เป็นอีกโฟลเดอร์ และตั้งชื่อเป็นของเราก่อน เช่น {project_path}/packages/cra-template-watsize/ ประมาณนี้งับ
• ต่อมา “Paste” ก่อนจะวางกันจริงๆ ให้ไปดูที่ {project_path}/packages/cra-template-{whatever}/template (Hint: โฟลเดอร์ที่เราก้อบมาแล้วเปลี่ยนชื่อนั่นแหละ) ส่วนนี้จะเป็น Code Structure ของ App เลย ใส่ไฟล์ ใส่โฟลเดอร์อะไรไป ก็จะไปโผล่ผลลัพธ์ตามนั้นเลย ขั้นตอนนี้ก็ให้ไป Copy สิ่งที่ต้องการมา Paste ตรงนี้เลย อยากให้หน้าตา Code Stucture เป็นแบบไหน จัดเลยงับ อย่างผมได้เลือกตามความต้องการที่ใช้ประจำ เช่น เพิ่มโฟลเดอร์ components, pages, redux หรือแม้แต่ .env ก็ได้นะ
  …
  Hint: ถ้าใครสงสัยว่าทำไมเป็น gitignore แทนที่จะเป็น .gitignore อันนี้ถูกแล้วครับ เดี๋ยวมันจะเปลี่ยนให้เองตอนที่ติดตั้งผ่าน create-react-app
  …
  ตัวอย่างที่ผมได้ใส่เข้าไปเป็นแบบนี้

Code Structure ของผม (warning: it may be not the best practice.)

• ขั้นตอนสุดท้าย “Edit” ก็ไปแก้ไฟล์ {project_path}/packages/cra-template-{whatever}/package.json ให้เข้าไปแก้ส่วน
  1. “name” ให้ใช้ Template นี้นะ เพื่อความเข้าใจได้ง่าย cra-template-{whatever} อย่าลืมแก้ {whatever} นะ
  …
  2. “version” ให้ใช้ version ที่ไม่ตรงกับที่มีอยู่ ถ้ายังไม่เคย publish มาก่อนก็ใช้ 0.1.0 อะไรก็ว่าไป แต่ถ้ามีการอัพเดท ต้องมาเลื่อน version ด้วยนะครับ
  …
  3. “url” *ทั้งหมด* ให้เปลี่ยนเป็น Account เรานะ (สังเกตข้างล่างตรง {YOUR_GITHUB_NAME} ให้เป็นชื่อของตัวเอง)

...
"name": "cra-template-{whatever}",
"version": "0.1.0",
...
"repository": {
    "type": "git",
    "url": "https://github.com/{YOUR_GITHUB_NAME}/create-react-app.git",
    "directory": "packages/cra-template"
},
...
"bugs": {
    "url": "https://github.com/{YOUR_GITHUB_NAME}/create-react-app/issues"
},
...

Yeah, Good girl…

Keyword for more knowledge: .gitignore

Step 3: NPM Publish 🚀

ขั้นตอนนี้เราจะเอาสิ่งที่เราทำเสร็จนี้ ขึ้นไปบนเว็บ (npmjs.com)[https://www.npmjs.com/] เพื่อที่จะได้ใช้ได้ทุกที่ที่มีอินเตอร์เน็ตไปเลย

อันดับแรกเช็คก่อนว่ามี Account ของ npmjs แล้วหรือยัง ถ้ายังก็กด Pause บทความนี้แล้วไปสมัครเลยงับ 55555

ถ้าหากมี Account ของ npmjs แล้วให้กรุณาตรวจสอบว่าเรารัน Command ถูกที่ กรุณารันที่
# {project_path}/packages/cra-template-{whatever}รันคำสั่งดังนี้

# กรุณาตรวจสอบว่าเรารัน Command ถูกตำแหน่ง ให้กรุณารันที่ 
# {project_path}/packages/cra-template-{whatever}/
# ถ้าถูกแล้วก็รัน และทำตามขั้นตอนที่มันตอบกลับมา
npm login
npm publish

ส่วนแรก ผลลัพธ์ของ npm login

หลังจากพิมพ์ npm login จะได้ประมาณนี้งับ

ส่วนผลลัพธ์หลังจากรัน npm publish จะเป็นแบบนี้ครับ กรณีที่ Success

หากใครรันแล้วเจอ Error 403 ประมาณนี้ก็แสดงว่าชื่อที่เราคิดมันไปทับกับของคนอื่นเขา ให้เปลี่ยนชื่อใหม่เลย ตัวอย่างประมาณนี้

ตั้งชื่อซ้ำไง จะอะไรหล่ะ!

Keyword for more knowledge: npmjs

2. สร้าง Script อีกสักนิด

Step 1: Imagination 🎨

อันดับแรกก็แค่ “จินตนาการ” เอาครับ ว่าอยากได้อะไรใน Script ตอนติดตั้งบ้าง ถ้านึกอะไรไม่ออก ลองเริ่มต้นแก้จาก Banner ก่อนไหมครับ ง่ายดี

จากรูปด้านบน ส่วน Before นั้น หลังจากติดตั้ง เราจะมีเพียงแค่คำแนะนำว่า cd เข้าไปสิ แล้วก็รันดู บลาๆ ทีนี้ผมอยากจะปรับแต่งมันสักหน่อย ให้มันมีสีสัน มี Font-logo อะไรที่ดูน่าสนใจสักหน่อย ผมเลือกแต่งง่ายๆ ให้เห็นภาพ โดยการใส่ ASCII Art Text เข้าไปหลังจากติดตั้ง แล้วก็เพิ่มคำอีกเล็กๆน้อยๆ สำหรับแบบที่ร่างไว้ ประมาณนี้

Generate มาจาก http://patorjk.com/software/taag/#p=display&h=1&v=1&f=Star%20Wars&t=Watsize

Keyword for more knowledge: ASCII Art Text

Step 2: Make it done! 🏆

ขั้นตอนนี้ วิธีทำก็คือ CPE Method เหมือนเดิมงับ เข้าไปแก้ไฟล์ที่ {project_path}/packages/react-scripts/scripts/init.js บรรทัดประมาณนี้

...
console.log();
console.log(‘We suggest that you begin by typing:’);
console.log();
console.log(chalk.cyan('  cd'), cdpath);
console.log(`  ${chalk.cyan(`${displayedCommand} start`)}`);
// *** OUR_FOCUS_ZONE ***
// *** OUR_FOCUS_ZONE ***
if (readmeExists) {
  console.log();
...

ปล.​ตรงบริเวณ OUR_FOCUS_ZONE นี่ ในโค้ดจริงๆ ไม่มีนะ แค่จะอธิบายเฉยๆว่า เราจะใส่โค้ดเราไปตรงนั้นเพื่อลองดู ฮ่าๆ

ผมจะใส่ Text นิดๆหน่อยๆเข้าไป และผมเลือกที่จะใช้ Chalk ด้วยเพื่อความมีสีสัน ดังนี้

...
console.log();
console.log(‘We suggest that you begin by typing:’);
console.log();
console.log(chalk.cyan('  cd'), cdpath);
console.log(`  ${chalk.cyan(`${displayedCommand} start`)}`);
// *** OUR_FOCUS_ZONE ***
console.log();
console.log("Thank you for choosing me :D");
console.log();
console.log(chalk.yellow(`
____    __    ____  ___   .___________.    _______. __   ________   _______ 
\\   \\  /  \\  /   / /   \\  |           |   /       ||  | |       /  |   ____|
 \\   \\/    \\/   / /  ^  \\ '---|  |----'  |   (----'|  | '---/  /   |  |__   
  \\            / /  /_\\  \\    |  |        \\   \\    |  |    /  /    |   __|  
   \\    /\\    / /  _____  \\   |  |    .----)   |   |  |   /  /----.|  |____ 
    \\__/  \\__/ /__/     \\__\\  |__|    |_______/    |__|  /________||_______|
`))
console.log();
console.log(chalk.red('*** VERY IMPORTANT: ***'));
console.log('Create a .env file at the root of your project for handler environments e.g. `.env`, `.env.development`, `.env.test`');
// *** OUR_FOCUS_ZONE ***
if (readmeExists) {
  console.log();
...

อย่าเพิ่งตกอกตกใจ และสบถในใจว่า มึงใส่ xxx ไรลงไปว้ะเนี่ย เดี๋ยว Copy ไปวาง ก็จะสวยเอง อิอิ อ่อ…เกือบลืม เนื่องจาก Font ที่เรา Copy มาจากเว็บ Generate บางครั้งมันก็มาในรูปแบบของ ` (Grave Accent) หรือ \ (Back-slash) ดังนั้นอย่าลืมที่จะทำ String Replace escape character ด้วยนะครับ

ร่างสมบูรณ์ {project_path}/packages/react-scripts/scripts/init.js

Keyword for more knowledge: Escape Character

Step 3: NPM Publish 🚀

หลังจากร่างสมบูรณ์ได้ปรากฏออกมาแล้ว ก็อย่าลืมแก้ package.json นะครับ เข้าไปแก้ไฟล์ที่ {project_path}/packages/react-scripts/package.json ตรงส่วนนี้ครับ

• “name” ให้ใช้ Template นี้นะ เพื่อความเข้าใจได้ง่าย {whatever}-react-scripts
• “version” ให้ใช้ version ที่ไม่ตรงกับที่มีอยู่ ถ้ายังไม่เคย publish มาก่อนก็ใช้ 0.1.0 อะไรก็ว่าไป แต่ถ้ามีการอัพเดท ต้องมาเลื่อน version ด้วยนะครับ
• “url” *ทั้งหมด* ให้เปลี่ยนเป็น Account เรานะ (สังเกตข้างล่างตรง {YOUR_GITHUB_NAME} ให้เป็นชื่อของตัวเอง)

...
"name": "{whatever}-react-scripts",
"version": "0.1.0",
"description": "Configuration and scripts for Create React App.",
"repository": {
    "type": "git",
    "url": "https://github.com/{YOUR_GITHUB_NAME}/create-react-app.git",
    "directory": "packages/react-scripts"
},
...
"bugs": {
    "url": "https://github.com/{YOUR_GITHUB_NAME}/create-react-app/issues"
},
...

ผลลัพธ์ควรจะประมาณนี้

ร่างสมบูรณ์ {project_path}/packages/react-scripts/package.json

หลังจากร่างสมบูรณ์ได้ออกมาแล้วก็เอา publish ขึ้น NPM เลย

npm login
npm publish

Very Good… 👍👍

3. ลองสร้างสัก Project

หากผ่านด่าน 1. และ 2. มาได้แล้วก็มาเริ่มสร้างทดสอบดูสักอันหน่อยสิ จะหน้าตาเป็นอย่างไร ปล. ถึงแม้จะติดการ Test-first แค่ไหนก็ อดใจไม่ได้อยู่ดีที่บางครั้งก็ลืมไป ทำ Test ทีหลัง ฮ่าๆ

รันคำสั่งเลย

npx create-react-app {APP_NAME_THAT_YOU_WANT} --template {YOUR_TEMPLATE_NAME} --scripts-version {YOUR_SCRIPT_NAME}

อย่าลืม แทนที APP_NAME_THAT_YOU_WANT คือชื่อแอพที่ต้องการ, YOUR_TEMPLATE_NAME คือชื่อ Template และ YOUR_SCRIPT_NAME คือชื่อ Script นะ

Example: npx create-react-app test-app-with-template --template cra-template-watsize-base --scripts-version watsize-base-react-scripts

แถ่แด๊

Success เย้!

ส่วน Code Structure ที่เราได้ทำไว้ส่วนแรก เมื่อเทียบกับ Default ของ create-react-app ก็จะได้ประมาณนี้งับ

ตรงตามความต้องการเป๊ะ

จบแล้วครับ =..=’ เหนื่อยเลย 5555555 ก็ถือว่าคงจะไม่ยากจนเกินไปนะครับ ถ้าหากทำตามสเต็ปแล้วยังไม่ได้ยังไง ทิ้งคอมเม้นท์ไว้เลยครับ แล้วก็ถ้าหากผมพิมพ์ผิด พิมพ์พลาด หรือให้ข้อมูลความรู้ไม่ถูกต้องประการใด ต้องขออภัยด้วยนะครับ และจะยินดีเป็นอย่างยิ่งเลยครับ หากท่านจะให้คำแนะนำหรือเพิ่มเติมเสริมแต่งอะไร ขอบคุณมากครับที่ทนอ่านกันจนจบ 555555

สำหรับใครอยากเห็น Code ฉบับเต็ม ไปตำกันที่นี่

NPM’s Watsize

buildingwatsize/create-react-app

แล้วพบกันใหม่นะครับ

พื้นที่สำหรับ ref.

- Create your own react template: https://dev.to/jimmymcbride/create-your-own-react-template-49p7

- Customizing create-react-app: How to Make Your Own Template: https://auth0.com/blog/how-to-configure-create-react-app/