So I was building a full-stack app with Laravel as my backend and ReactJs as the UI library from my frontend. And coming from a React-only production environment, I simply couldn't stand the fact that I'll have to MANUALLY reload the browser for changes I've made to the UI to become visible to me. It just didn't make any sense.
So I open this nifty site called 'google.com' heard of it? It's pretty great for developers like you and I. And started to look up ways to 'enable' hot-reload while working with React in a Laravel enclosure and thankfully, I found something...
...but it was for Vuejs ( at least the tutorial was). I was fuming! At this point, I was about to split the frontend and backend into two separate environments. run a new 'npx create-react-app' for my frontend code. And use Laravel from a distance. But I took a pause and attempted the exact solution on my webpack.config.js file. I mean, what could possibly go wrong? Thankfully, it worked. And here's how to save yourself from writing Vue or splitting your development environment or pulling your hair out. one stone, multiple birds. swag face
- Open your webpack.config.js file
Paste this directly underneath:
const mix = require('laravel-mix');should look like this:
const mix = require('laravel-mix'); mix.browserSync({ proxy: 'http://127.0.0.1:8000' });
Please note the address in front of proxy is the IP and port you get when you run php artisan serve on your Laravel app. feel free to replace that with whatever your values might be.
Once done, save and run npm run watch. It should proceed to install the BrowserSync package. Should look like this:
Once that's done. Run npm run watch again. Open any react file of yours. Make an edit, save and watch the magic happen! Super cool!
Happy coding!