ทำ Hot Browser Reloading ใน Laravel ด้วย browser-sync

เชื่อว่าทุกคนนั้นรู้จัก Laravel กันอยู่แล้ว แต่ทุกครั้งที่เรากด Save ในโปรแกรม เราต้องมา Refresh ตัว Browser ที่เปิดหน้าเว็บไซต์ของเราเองเสมอ แต่รู้ไหมว่าเราสามารถทำให้หน้าเว็บไซต์ของเรา Reload เองได้ทุกครั้งที่ Save ไฟล์ได้ด้วยดังนี้ครับ

อย่างแรก เราต้องลง Library ของ Browser-sync ก่อน โดยทำการรันคำสั่งข้างล่างใน Terminal ของโปรเจคเรา

npm install -g browser-sync

เสร็จแล้ว ให้ทำการรันคำสั่ง npm install อีกครั้ง หลังจากนั้น จะมี folder node_modules เพิ่มเข้ามาในโปรเจคของเรา

หลังจากนั้นให้เราเพิ่ม code ข้างล่าง ใว้ใน webpack.mix.js ของโปรเจคเรา

แต่ให้ทำการเปลี่ยน proxy เป็น url ของโปรเจคเรา ในกรณีนี้ ผมรันโปรเจคโดย php artisan serve เพราะฉะนั้น url ของโปรเจคผมตอนนี้จะเป็น http://localhost:8000/หลังจากนั้นให้ทำการรันคำสั่ง npm run watch หรือ npm run hot เพื่อให้ mix ของ laravel โปรเจคเรา build browser ใหม่ขึ้นมา

อ้าว !! ไม่เหมือนที่บอกเลยนี่นาาาา

สำหรับคนที่เคยรัน npm run watch ครั้งแรก จะมีหน้าตาแบบนี้ ไม่ต้องตกใจไป ให้เราทำการรันอีกครั้ง

แค่นี้เราก็ได้ url ใหม่สำหรับ Hot Browser Reloading ของเว็บไซต์เราแล้ว โดยที่ url นี้จะถูกเปิดเองอัตโนมัติหลังจากที่เรารันคำสั่ง npm run watch

ซึ่งจะสังเกตได้ว่า url เรานั้นเปลี่ยนไปเป็น http://localhost:3000/ ซึ่ง url นี้เป็นของ browser-sync ที่ไว้สำหรับการทำ Hot Reload แต่ url ของโปรเจคเรานั้นก็สามารถใช้งานได้ปกติ