วิธีนำเว็บแอพที่สร้างด้วย Angular 2 เป็นต้นไป มาใช้ใน ExpressJS

อย่างที่ทราบกันดีว่า Angular ตั้งแต่เวอร์ชั่น 2 นำเสนอแนวคิดใหม่ๆ มากกว่าแค่การทำงานกับไฟล์ JavaScript ทำให้พวกเราต้องปรับการทำงานให้รองรับแนวคิดของ Framework ใหม่ๆ ด้วย

เช่น Angular ที่เปลี่ยนมาใช้ TypeScript และม่ีการเพิ่ม Compiler ในการทำงานทำให้ดูเหมือนว่าแนวคิดการ copy ไฟล์ทั้งหมดไปไว้ใน Web server ดูจะไม่ง่ายเหมือนเมื่อก่อน

ในช่วงที่โค้ชพลออกไปจัด MEAN Stack Workshop ให้หลายที่ มีคำถามหลังจากหัวข้อสร้างเว็บแอพด้วย Angular Framework คือ เราจะสามารถนำเว็บแอพที่สร้างด้วย Angular ไปใช้ใน Web Server ของ ExpressJS ได้อย่างไร?

มาดูวิธีทำกันครับ

1. Build โปรเจคด้วย Angular CLI

ในคอร์ส MEAN Stack พลแนะนำให้ใช้ Angular CLI สำหรับผู้เริ่มต้น จะช่วยให้หลายๆ อย่างง่ายกว่าสำหรับนักพัฒนาที่เพิ่งเริ่มต้นกับ Angular

ในอีกทางหนึ่งมันก็ช่วยอำนวยความสะดวกให้เราในการเตรียมไฟล์ให้พร้อมตอนที่ต้องการ Deploy ใช้งานบน Server

เราสามารถใช้คำสั่งต่อไปนี้ในโฟลเดอร์โปรเจคของเรา

ng build --prod

ตัว Angular CLI จะสร้างโฟลเดอร์ชื่อ dist ขึ้นมาซึ่งไฟล์ทั้งหมดนั้น พร้อมสำหรับใช้งานบน Web Server

2. กำหนด Path และ Middleware ให้ Express

กลับมาในฝั่งของ Express Web Server ขั้นตอนที่สำคัญในที่นี้ คือการกำหนด ให้โฟลเดอร์ dist เป็นส่วนหนึ่งของ Path ใน Server

2.1 ติดตั้ง Path Module

รันคำสั่งเพื่อติดตั้ง Path Module ในโปรเจค

// ใช้ macOS ก็เติม sudo นำหน้า
npm install path --save

2.2 กำหนดโฟลเดอร์เก็บไฟล์ เป็น path

ในที่นี้เราจะใช้ Path module กำหนดโฟลเดอร์ที่เก็บไฟล์ที่ได้จากการ build โปรเจค Angular เป็น static path ของ Web server เรา

เช่นถ้าเราก๊อปปี้โฟลเดอร์​ dist มาไว้ในโฟลเดอร์ของโปรเจค Express ตรงๆ เราก็สามารถกำหนดให้โฟลเดอร์ dist เป็นตัวที่เราจะใช้

const path = require('path');
...
app.use(express.static(path.join(__dirname, 'dist')));
...
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

จะสังเกตว่าตัว Route ของเราจะใช้คำสั่ง sendFile() โดยการส่งไฟล์ index.html ที่อยู่ในโฟลเดอร์ dist กลับไปให้ฝั่ง Client

3. ทดสอบ Express Web Server

ทดสอบรัน Express Web Server ขึ้นมา และทดสอบเข้าไปที่ http://localhost:3000 (หรือ ip address และ port ตามที่กำหนด)

ตรงนี้เราน่าจะเห็น Web application ในฝั่งของ Angular 2 แสดงขึ้นมาแล้วล่ะ

อ้างอิง – StackOverflow 1, 2, Scotch.io