การ deploy React Project ขึ้น Github Pages

Github Pages คืออะไร? ในมุมมองของผมมันก็คือโฮสต์ฟรีที่เอาไว้เก็บเว็บที่ build จาก React ผมนั่นแหละ(สำหรับบทความนี้น่ะนะ) ซึ่งมันสะดวกมากๆ เพราะเราแค่ตั้งค่านิดหน่อยแล้ว push code ขึ้น Github ปกติ แค่นี้เราก็ได้เว็บไซต์ที่ออนไลน์พร้อมใช้งานแล้ว โดยเฉพาะเว็บไซต์ทั่วๆไปที่ไม่ได้ใช้ฟังก์ชันอะไรมากมาย บอกเลยว่า Github Pages ก็เหลือเฟือแล้ว ตั้งค่าไฟล์ package.json สำหรับการ deploy ก่อนอื่นเลยก็เปิดไฟล์ package.json ในโปรเจ็คของเราขึ้นมา แล้วก็ใส่ homepage เข้าไปแบบนี้สำหรับแต่ละโปรเจ็ค หรือแบบนี้สำหรับหน้าหลักของ Github Pages ของเรา หรือหากจะตั้งค่าเว็บไซต์ส่วนตัวให้ชี้มาที่ Github Pages ก็ใส่ไปแบบด้านล่างนี้ ติดตั้ง gh-pages สำหรับ deploy script ส่วนตัวผมใช้ npm มากกว่า yarn ผมก็เลยเพิ่มเข้าไปแบบด้านล่างนี้ หลังจากนั้นก็เป็นการตั้งค่าสคริปต์สำหรับ build และ deploy ใน file… Continue reading การ deploy React Project ขึ้น Github Pages

เริ่มต้นพัฒนาเว็บแอ็พด้วย React ต้องทำยังไงบ้าง

บทความนี้ไม่มีอะไรมากครับ ผมแค่อยากมาเขียนไว้กันลืมเฉยๆ เป็นขั้นตอนการเริ่มโปรเจ็คจากการสร้างแอ็พเริ่มต้นจาก create-react-app แล้ว deploy ขึ้นไปบนโฮสฟรีอย่าง Heroku เพื่อทดสอบว่ามันเวิร์ครึเปล่าเท่านั้นเองจริงๆ ก่อนอื่นที่เราต้องมีในเครื่องเลยก็คือ Node js ครับ โหลดจากหน้าเว็บหลักแล้วติดตั้งให้เรียบร้อย ที่เราใช้บ่อยก็คือคำสั่ง npm โน่นนี่นั่นนั่นแหละ ลงเสร็จแล้วก็ลองเช็คดูครับว่ามันเวิร์คมั้ยด้วยคำสั่งด้านล่างนี้ด้วย Command Prompt หรือ Terminal ใน VS Code ที่ผมชอบใช้ประจำก็ได้ ก็ถ้าได้ตัวเลขเวอร์ชั่นมาก็คือใช้ได้นั่นแหละ จากนั้นเราก็ต้องมีตัวที่ใช้สร้าง React Project ที่ชื่อว่า create-react-app ซึ่งเราติดตั้งด้วยการรันคำสั่ง เราก็จะได้ตัวที่ใช้สร้างโปรเจ็คสำหรับ React มาใช้งานแล้ว ซึ่งการสร้างโปรเจ็คก็คือการรันคำสั่งง่ายๆด้วยเจ้า create-react-app นี่แล้วตามด้วยชื่อโปรเจ็คของเราแบบด้านล่างนี้ แล้วก็ cd เข้าไปใน folder ที่มันสร้างโปรเจ็คมาให้เราแล้วลองรันดูด้วยคำสั่ง ซึ่งมันก็จะได้หน้าแอ็พเริ่มต้นของ React นั่นแหละ ไม่มีอะไรพิเศษ ใน Vue Js ก็เช่นกัน ในส่วนของการตั้งค่า Server เบื้องต้น… Continue reading เริ่มต้นพัฒนาเว็บแอ็พด้วย React ต้องทำยังไงบ้าง