ทดลองทำ React website แบบง่ายๆบน Vercel กันเถอะ

Programming Feb 4, 2022

เนื่องจากรอบที่ทำ keyboard simulator เป็นการ fork project เขามาทำ แล้วก็ใช้ Vercel ในการ deploy มันขึ้นมา แต่ทำไม่ค่อยเป็นเท่าไหร่ รอบนี้ก็เลยลองทำโปรเจกต์ง่ายๆแล้วใช้ Vercel ว่าจะเป็นยังไง

เว็บไซต์ที่จะทำนั้น มีไอเดียมาจากเว็บไซต์นี้

ก็เลยอยากลองทำดู ชื่อโปรเจกต์ว่า "go to the trap" หลักการเหมือนเว็บต้นแบบแรงบันดาลใจทุกอย่าง เพิ่มเติมคือมี countdown ข้างล่างสัก 10 วินาทีก็แล้วกัน

ซึ่งเราเองก็ได้ทำเรื่อง redirect domain ไปแล้วด้วย ก็เป็นโอกาสที่ดีในการลองอะไรแบบนี้เนอะ

อ่ะมาเริ่มกันเลย

ออกแบบหน้าตาเว็บไซต์

ออกแบบบน Figma แบบงงๆเช่นเคย เลยเข้าใจว่าอ่ะลาก frame เพื่อลากวาง UI ที่เราต้องการไปในนั้นได้

หน้าเว็บนี้จะมี text ว่าคุณได้ติดกับดับแล้ว มี gif ดุ๊กดิ๊กน่ารักตรงกลาง เอามาจาก tenor และ text ข้างล่างก็คือ countdown 10 วินาทีนั่นเอง

พอครบเวลาเราจะให้มัน redirect ไปหน้าที่เราต้องการ ก็คือหน้า YouTube คลิปน้องเขาคนนี้นั่นเอง

https://www.youtube.com/watch?v=4QsmR2mb8_U

ลองจากแก้โค้ดตามที่เราต้องการใน devtool ก็พอจะเดาทางได้ตอนที่ทำจริงแหละ

หน้าตาน้องมิยาโกะที่น่ารักจนใจเจ็บ แต่ story ในเรื่องคือแบบมันก็ dark อ่ะเนอะ

อนึ่ง น้องมิยาโกะเป็นตัวละครหลักในการ์ตูนสั้นชุด 💔 PINK BITCH CLUB ของช่อง YouTube VIVINOS ลองไปหาเสพได้นะ

สร้างโปรเจกต์เปล่าใน Vercel

ไปที่เว็บ Vercel เข้าไป log-in ให้เรียบร้อย ด้วย Github account

เราสามารถส่อง template ต่างๆที่ทาง Vercel มีให้ ได้ที่นี่เลย

ในที่นี้เราจะเลือก Create React App นะ กดเข้าไปแล้วทำการสร้าง Git repository โดยการอ่ะกรอกชื่อโปรเจกต์ก็แล้วกัน จากนั้นพิมพ์ชื่อ repository ที่เราต้องการ เสร็จแล้วกด Create

กดแล้วทาง Vercel จะทำการ clone template ที่เราได้เลือกไว้ ไปยัง Github repository ของเรา และทำการ deploy บน production ให้เลย เอ๊ะ เดี๋ยวก่อนสิพี่ ใจเย็นนนนนนน

เมื่อทุกอย่างเรียบร้อย ก็จะพบกับหน้า Congratulations! แล้วมีกระดาษโปรยลงมา

คำสั่ง deploy ใน local จะใช้ command ว่า react-scripts start นะ

และตัวเว็บ production ที่เขาได้ deploy ไว้ ก็สามารถคลิกไปดูได้เลย ซึ่งเหมือน template แหละ

เดี๋ยวเรา clone โปรเจกต์และเขียนโค้ดหน้าเว็บของเรากันต่อเนอะ

เขียนโค้ดเลย

เราต้องบอกก่อนเลยว่า เราเป็น Android Developer ที่ไม่เคยเขียน React มาก่อน แต่มาทะลึ่งเลือกมาในตอนนี้55555555555 เดี๋ยวทางเราไปเรียนเพิ่มเพื่อเอาไปทำเว็บต่อไปเนอะ เราเลยเล่าแบบที่เราเข้าใจแล้วกันเนอะ

ก่อนอื่นเปิดโปรเจกต์ขึ้นมาใน VS Code จะเป็นแบบนี้

ในโปรเจกต์นี้จะเป็น template React ของ Vercel เนอะ ไฟล์ที่เราสนใจและสามารถแก้ไขเป็นของตัวเองได้ มี

src/App.js ตัวหน้าเว็บที่เราเห็นเราก็สามารถแก้ในไฟล์นี้เลย จะมีส่วน script การทำงานของเว็บเรา แล้วก็ส่วน render HTML ออกมาแสดง
src/App.css เผื่อใครอยากแก้ style CSS ต่างๆ
public/index.html อันนี้เราแก้แค่ title ของเว็บเนอะ ให้มัน make sense หน่อย

อันอื่นๆที่น่าสนใจ

public/manifest.json อันนี้เขาทำพวกหน้าแรกของ PWA ให้เลย
src/serviceWorker.js เป็นอีกส่วนของการทำ PWA เป็นส่วนของ service worker ที่เขามีมาให้เลย

เมื่อเราพิมพ์คำสั่ง react-scripts start หรือกดบิ้วจากส่วน NPM SCRIPTS โดยเลือก run ของ dev เพื่อบิ้วหน้าเว็บบน local เมื่อเปลี่ยนหน้าตาแล้ว save มันจะอัพเดตให้เราทันทีเลย เราไม่ต้องไปบิ้ว local ใหม่ทุกรอบ

ตัวโค้ดตั้งเวลา countdown เราหาจาก stackoverflow ก็เลยใช้อันนี้ ซึ่งมันเกี่ยวกับพวกเก็บ state ต่างๆ เดี๋ยวเราเข้าไปเรียนแล้วสรุปอีกทีนึงเนอะ

How make react countdown timer

i’m trying to do countdown timer with react. It will be basically countdown from 10 to 0 and when 0 i will call some function. i found ideally for me some example: https://codesandbox.io/s/0q453m...

Stack Overflowuser3348410

และทุกครั้งที่เรา push code ขึ้นไป ตัว vercel จะทำการ deploy ขึ้นไปที่ vercel ให้อัตโนมัติเลย

เมื่อ deploy บน production เสร็จแล้ว ก็สามารถเอาลิ้งที่ได้ไปแชร์ให้เพื่อนๆได้เลย แบบนี้

ปล. อนาคตจะมีความ dynamic มากขึ้นว่าจะดักเป็นอะไรดี

𝓰𝓸 𝓽𝓸 𝓽𝓱𝓮 𝓽𝓻𝓪𝓹

แล้วลิ้งทั้งสามที่ได้ใน Vercel คืออะไรกันนะ?

เป็นเรื่องนึงที่เราสงสัย

หน้าตา domain ทั้งสามที่เราได้

gotothetrap.vercel.app เป็น Automatic Project URLs คือเป็น url ที่มาจากชื่อโปรเจกต์ตรงไปตรงมา และเป็น url production ในส่วนนี้เราสามารถ custom domain ได้
gotothetrap-mikkipastel.vercel.app เป็น Automatic Deployment URL หน้าตาจะแบบนี้

<project-name>-<unique-hash>-<scope-slug>.vercel.app

gotothetrap-git-main-mikkipastel.vercel.app เป็น Automatic Branch URLs โดยตัว url จะถูก assign ไปตาม branch ที่ทำการ deploy อันนี้จะเป็น url preview เนอะ

<project-name>-git-<branch-name>-<scope-slug>.vercel.app

Automatic URLs

URLs that are automatically assigned to newly created Deployments.

VercelVercel

ก็จบกันไปแล้วสำหรับการลองทำอะไรใหม่ๆ เช่น เว็บไซต์ React ไป deploy บน Vercel ซึ่งค่อนข้างง่ายและรวดเร็ว แล้วใช้ฟรีสำหรับ Hobby แบบเขียนเว็บสนุกๆงี้ได้เลย

content นี้เรามีคลิป Youtube ด้วยนะ