วิธีกำหนด port ให้โปรเจค React Web App ที่สร้างจาก create-react-app

ตอนที่มีโอกาสมาสอนที่ศรีสวัสดิ์เงินติดล้อ สำนักงานใหญ่ มีพี่น้องในทีมถามว่า ในเมื่อโปรเจค create-react-app นั่นสามารถรัน Server ขึ้นมาทดสอบได้

แต่ถ้า port เริ่มต้นกำหนดที่ port 3000 จะสามารถกำหนดให้ตัว Server รันขึ้นมาที่ port หมายเลขอื่นได้ไหม

ก็เลยไปค้นหาวิธีมา เจอวิธีหนึ่งคือการกำหนด port ในคำสั่ง script ของไฟล์ package.json ครับ

คำสั่ง script ในไฟล์ package.json

โดยปกติในไฟล์ package.json ที่ติดมากับ create-react-app จะมีส่วนของ scripts ที่สามารถใช้ในการทำงานได้

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

ซึ่งการรัน server สามารถทำได้โดยใช้คำสั่ง

npm start
yarn start

เป็นการเรียกใช้คำสั่ง

"scripts": {
    "start": "react-scripts start",
    ...
},

ซึ่งถ้าต้องการรัน Server ด้วย port ที่กำหนด เราสามารถแก้ไขคำสั่ง start ได้ครับ

ปรับแต่ง start scriptsการกำหนด

การกำหนด port ให้กับ server ที่รันขึ้นมาในโปรเจค create-react-app สามารถทำได้ โดยแบ่งตามระบบปฏิบัติการที่เราใช้งาน

Linux และ MacOS

"start": "PORT=หมายเลขport react-scripts start"

เช่น

"start": "PORT=3009 react-scripts start"

Windows

"start": "set PORT=3006 && react-scripts start"

อ้างอิง – StackOverflow