สร้าง Web Application ด้วย Vite + React และ TypeScript

หากใครที่กำลังต้องการติดตั้ง React.js และ TypeScript เพื่อทำงานร่วมกัน วิธีหนึ่งที่รวดเร็ว คือการติดตั้งผ่าน Vite นั่นเอง

Vite คือ Frontend Tooling ที่ช่วยอำนวยความสะดวกในการขึ้นโปรเจ็กต์อย่างรวดเร็ว โดยที่เราเลือก option แค่ไม่กี่ข้อ ก็จะได้ project bundle มาพร้อมใช้งานทันที

มาเริ่มต้นสร้าง Application กันที่คำสั่ง

npm create vite@latest

ต่อมา กด y ที่ Ok to proceed? แล้วเลือก choice ตามนี้

Need to install the following packages:
  create-vite@4.2.0
Ok to proceed? (y) y
✔ Project name: … typescript-react
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /Users/washira/typescript-react...

Done. Now run:

  cd typescript-react
  npm install
  npm run dev

ในโปรเจ็กต์ เรามีการสร้างชื่อว่า typescript-react และเลือก Framework เป็น React จากนั้น เลือกภาษาที่จะใช้พัฒนา คือ TypeScript ตามลำดับ

เนื่องจาก Vite ไม่ได้ให้ node modules มาด้วย โดยมีเพียง package.json มาเท่านั้น เราจึงต้องติดตั้งเอง เข้าไปที่ directory ของโปรเจ็กต์ จากนั้น ติดตั้ง node modules ด้วยคำสั่ง

npm install

และรันโปรเจ็กต์บน local ของเราที่คำสั่ง

npm run dev

จะมีข้อความขึ้นมาประมาณนี้

VITE v4.2.1  ready in 395 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

เปิด internet browser แล้วใส่ url ที่ http://127.0.0.1:5173/ ตามที่ระบุในข้อความ เราจะเห็นหน้าเว็บออกมาเป็นดังนี้

ถ้าเราอยากเปลี่ยน port ให้เป็นเลขอื่นที่ต้องการ ให้เพื่มโค้ดที่ vite.config.ts ดังนี้

// https://vitejs.dev/config/
export default defineConfig({
  server: { port: 3000 }, 		// เพิ่มบรรทัดนี้
  plugins: [react()],
})

นี่เป็นวิธีการสร้างและตั้งค่าเบื้องต้นที่เราสามารถขึ้นโปรเจ็กต์ด้วย React ได้ไวมาก เพราะ Vite มีความเบา ทำให้ประหยัดพื้นที่ และ render ไวดี บวกกับสามารถพัฒนาด้วย TypsScript ได้ ไม่ต้องตั้งค่าเพิ่มเติมเลย ก็นับว่าเป็นอีกหนึ่งข้อดีของ Vite ที่น่าสนใจครับ