Setup live reload with Laravel mix and BrowserSync

[00:01] So I was about to record the tailwindcss video, and this kind of screencast works better if the browser shows you the changes in real time. Otherwise you have to refresh the page with every change you make, and that's just annoying.

[00:13] The first thing that popped into my mind was tailwindplay which is an online playground where you can try out tailwind stuff.

[00:20] Every time you make a change, it updates the ui almost instantly. So this felt like a great choice but then I remembered you can do something similar with laravel mix and browser sync. It's nowhere near as fast but it's good enough when you're dealing with an entire project and not just a small piece of the UI. So here's how you can set up live reloading with laravel mix if you are serving your app using artisan.

[00:48] So php artisan serve, all you need to do is open your webpack.mix file and add the following: dot browser sync, an object, proxy, and here you'll paste in this address right here. Then open a new terminal and run the watch command: so npm run watch.

[01:14] When you run the watch command for the first time it will install two additional packages to help with the live reload. Once that's done, run the command again and you're ready to go.

[01:29] And now I can take this browser window and put it side by side with my editor, open the welcome page which is the page we are currently on, and start making changes: like changing the background, save, and it will automatically update.

[01:47] I can even add more content and save, register too it will refresh itself. As i said it's nowhere near as fast as tailwindplay, but it's good enough when working on inertia.js applications for example. You can put the windows side by side and start writing code without having to leave your editor to refresh the browser - which is nice.

[02:09] Now what about laravel valet? If you're using valet to serve your laravel applications, the browser sync configuration is a bit different. Instead of this ip you need to enter your project address. In my case it's https inertia.test. Next you need to fill in the host which should have the same value except the https part. Then set open to external and add your https certificate. The key will be at users slash your user, in my case it's cdruc, slash config, slash valet, slash certificates, slash your domain name dot key, and then another property for cert, and here we have crt.

[03:07] Let's close these two terminals and run npm run watch again. Now everything should still work the same. So if I change the background to 100, it should refresh and, it does. So everything works the same except we are now using laravel valet and we have a domain with https in place.

[03:40] So there you have it, that's how you can use Laravel mix with browser sync to automatically refresh your browser when building larval applications.