Live reloading with Laravel mix and BrowserSync

I was about to record a 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.

The first thing that popped into my mind was tailwind play, an online playground where you can try out tailwind stuff. Any change you make will instantly appear on the right.

Then I remembered Laravel mix can do pretty much the same thing with BrowserSync.

Here’s how you can use it when serving a Laravel app with artisan:

mix.browserSync({
  proxy: 'http://127.0.0.1:8000/'
});

And here’s how to do it when using Laravel valet to serve a custom domain:

mix.browserSync({
  proxy: 'https://myapp.test',
  host: 'myapp.test',
  open: 'external',
  https: {
    key: '/Users/yourUser/.config/valet/Certificates/myapp.test.key',
    cert: '/Users/yourUser/.config/valet/Certificates/myapp.test.crt',
  },
});

It’s nowhere near as fast as tailwind play, but it’s good enough when working on entire projects.

Comments

pascal says:

Hi Constantin,

I am a suscriber to your Youtube Channel and a big fan of Laravel and its ecosystem.

I would like to congratulate you for sharing your knowledge.
Your articles and videos about Inertia, TDD, XState
are very useful and well focused, especially since these subjects are most often under-documentated stuffs;

I got a suggestion for you:
could you make a comments section in your articles on Tallpad, so every one could exchange in a unique place.
In my opininon Youtube is not the best way to discuss on a topic, as soon as the hype of a new video has passed it must be boring to reply about old ones.

By the way, I found your blog with google as I was looking for a way to contact you ( unexisting contact section on tallpad )

I wish you will make more great videos, thank you again !

cdruc says:

Hi Pascal,

I have no idea how I missed adding a contact option on tallpad😅

As for the comment section, I will definitely add on one in the future – along with quizzes, bookmarks, and other features that will hopefully improve the experience on tallpad.

Thanks for watching and for your suggestions!

Leave a Reply