การใช้งาน Lite Server สำหรับพัฒนา Web Application อย่างง่าย

29 January 2020 By Ninenik Narkdee
dev-tool lite-server

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ dev-tool lite-server



เนื้อหาต่อไปนี้ จะเป็นแนวทางการใช้งาน
lite-server หรือ การจำลอง server ขนาดเล็ก สำหรับใช้
ในการพัฒนา Web Application ในรูปแบบ Single Page App
ซึ่งส่วนใหญ่ก็จะเป็นการใช้งาน JavaScript กับ HTML 
    เหมาะสำหรับใช้ทดสอบโค้ด โดยความสามารถหลักๆ ก็คือเราสามารถ
ดูพรีวิวการทำงานได้ทันที เมื่อมีการอัพเดทโค้ด โดยไม่ต้องคอยกดรีเฟรช
ที่หน้าบราวเซอร์ ถ้านำไปใช้ในการออกแบบ UI หรือการใช้งาน css จัดรูปแบบ
หน้าตา Web App ก็จะสามารถดูผลลัพธ์ได้ทันที
 
 
สมมติเรามีโปรเจ็คที่จะเขียนโคัดที่ใช้งาน JavaScript HTML และ CSS เป็นหลัก ในที่นี้เรากำหนด
โฟลเดอร์โปรเจ็คไว้ที่ C: > projects > webdev 
    เปิดโฟลเดอร์โปรเจ็คใน VSCode ไปยังโฟลเดอร์ที่เราต้องการใช้งาน
 

 

ติดตั้ง lite-server

    เราจะทำการติดตั้ง server ขนาดเล็ก สำหรับใช้ในการพัฒนา Web App โดยเริ่มต้นให้เราใช้งานคำสั่ง 
 
npm init -y
 
    ผ่าน command line จากโฟลเดอร์โปรเจ็คของเรา โดยคำสั่งนี้ จะเป็นการกำหนดค่าเริ่มต้นของโปรเจ็ค โดยค่า -y เป็น
การระบุว่าให้ใช้ที่เป็นค่าเริ่มต้นหลัก ในทุกๆ parameter 
 
 

 
 
    หลังจากรันคำสั่ง เราจะได้ไฟล์ package.json ตามรูปแบบดังรูป
 
 

 
 
    ให้เราแก้ไขส่วนของคำสั่งการเรียกใช้งาน ตรง
 
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
 
    เป็นคำสั่งสำหรับเรียกใช้ lite-server ซึ่งตอนนี้เรายังไม่ได้ติดตั้ง ดังนี้
 
  "scripts": { "start": "lite-server"},
 
    บันทึกการแก้ไขไฟล์ package.json
 
    ต่อไปทำการติดตั้ง lite-server ด้วยคำสั่ง 
 
npm install --save-dev lite-server
 
    ผ่านการใช้งาน command line 
 
 

 
 
    รอสักครู่ ตัว npm จะทำการดาวน์โหลด package มาใช้งานในโปรเจ็คของเรา
 
 

 
 
    หลังจากติดตั้ง เรียบร้อยแล้ว ตัวไฟล์ package.json จะเพิ่มส่วนของ devDependencies เข้ามา
เนื่องจากเราติดตั้งโดยไม่ระบุเวอร์ชั่น จึงเป็นเวอร์ชั่นล่าสุด ณ ขณะติดตั้ง หากมีเวอร์ชั่นใหม่ ค่า ^2.5.4 จะเปลี่ยน
ไปตามเวอร์ชั่น ณ เวลานั้น
 
  "devDependencies": {
    "lite-server": "^2.5.4"
  }
 
    ตอนนี้โปรเจ็คของเรา จะมีโฟลเดอร์ mode_modules ที่รวม package ต่างๆ ที่เราติดตั้งและใช้งานในโปรเจ็ค มีไฟล์ 
package-lock.json เก็บรายละเอียด package ที่เราได้ติดตั้ง และที่จำเป็นหรือมีการเรียกใช้งานเพิ่มเติม และก็ไฟล์ package.json
ทีเราได้อธิบายไปแล้ว
 
 


 
 
 

การใช้งาน lite-server

    ต่อไปเราจะทดสอบการใช้งาน lite-server โดยให้เราสร้างไฟล์ index.html ในโฟลเดอร์โปรเจ็คของเรา โดยกำหนดรูปแบบ
โค้ดอย่างง่ายดังนี้

 

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
    เสร็จแล้ว เรียกใช้คำสั่ง ที่เรากำหนดในไฟล์ package.json ที่ผ่านมา ผ่าน command line ดังนี้
 
npm start
 
    ตามรูปแบบดังรูปด้านล่าง
 
 

 
 
    หากไม่มีอะไรผิดพลาด ตัว server จะเริ่มทำงาน และเรียกเปิดบราวเซอร์ ไปยัง http://localhost:3000/
และแสดงข้อมูล Web App จากไฟล์ index.html ตามรูปแบบโครงสร้างโค้ดที่เรากำหนด ดังรูป
 
 

 
 
    ทันทีที่เราแก้ไขโค้ด แล้ว save สมมติเราแก้ไข h1 เป็นสีแดง ตัว server ก็จะทำการอัพเดท และเรียกข้อมูลใหม่ โดย
ส่วนของ h1 เป็นสีแดงดังรูป โดยที่เราไม่ต้องไปกดรีเฟรชหรือโหลดหน้านั้นใหม่ด้วยตัวเอง ทำให้การพัฒนา Web App 
หรือ Demo App อย่างง่ายทำได้รวดเร็ว และสะดวกยิ่งขึ้น
 
 

 
 
    เข้าใจอย่างง่ายคือ  ตัวบราวเซอร์จะทำการ sync ข้อมูลอัตโนมัติ ซึ่งในการทำงานนี้ ตัวหน้าต่าง terminal หรือ command
line ที่เรียกใช้งาน npm start ก็จะต้องเปิดค้างไว้ เพื่อทำงาน sync ข้อมูล หากต้องการปิดการใช้งาน หรือยกเลิกการใช้งาน 
lite-server ก็ให้กด CTRL+C และกด y เพื่อออกไปรับคำสั่งใหม่
 
 


 
 
 

การปรับแต่ง lite-server

    เราสามารถกำหนดค่า การใช้งาน lite-server เช่น กำหนด port ที่จะใช้งาน ซึ่งค่าเริ่มต้นจะเป็น 3000 เราอาจจะอยากเปลี่ยนเป็น
3456 หรือ 4040  ก็ได้ หรือจะต้องการจะทดสอบโค้ดที่อยู่ในโฟลเดอร์ test แทน root ก็สามารถทำได้เหมือนกัน โดยสามารถทำได้
ดังนี้
 
    ให้เราสร้างไฟล์ชื่อ bs-config.json ไว้ใน root ของโปรเจ็คที่เดียวกับ package.json จากนั้นกำหนดค่าที่ต้องการปรับแต่ง เช่น
ต้องการกำหนด port เป็น 4040 ก็จะได้ไฟล์ bs-config.json เป็นดังนี้
 
 

 
 
{  
    "port": 4040
}
 
    ทดสอบเรียกใช้งาน npm start ก็จะได้เป็น
 
 

 
 
    ต่อไปเราลองสร้างโฟลเดอร์ test และเรียกใช้งานจากโฟลเดอร์นี้แทน root โดยกำหนดในไฟล์ bs-config.json ดังนี้
 
{  
    "port": 4040,
    "server": {    
        "baseDir": "./test"  
    }
}
 
    สร้างโฟลเดอร์ test และสร้างไฟล์ index.html ด้านในประมาณดังรูปด้านล่าง
 
 

 
 
    ทดสอบเรียกใช้งานผ่าน npm start อีกครั้ง 
 
 

 
 
    จะเห็นว่าจะเป็นการเรียกใช้งาน หรือ sync ข้อมูลจากโฟลเดอร์ test ตามที่เรากำหนดในไฟล์ bs-config.json
 
    ดูรายละเอียดและข้อมูลเพิ่มเติม เกี่ยวกับ lite-server package คลิก 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ