Tool tip: Browsersync with Laravel-mix

Browsersync has a feature called life sync i didn't know about for a long time. It automatically updates your browser as you change HTML, CSS, images and other project files and can do it across different devices too. And it can be easily pulled in to Laravel using Laravel-mix. I think it’s the only feature of laravel mix i did not use. It’s painful just knowing about it now.

Thank you Addy Osmani and Matt Gaunt, I got to know about this when watching your totally tooling tips series on Youtube.

Setting up

This is an easy process. Navigate to your project root in a terminal and run

npm install

If you have yarn installed, add this to your webpack.mix.js file, it will pull in the needed browsersync webpack plugin when you run the next command.

mix.browserSync({
   proxy: 'project.dev'
});

finally run npm run watch. You are set with this. Laravel-mix will do it’s thing like compiling your assets first after then Browsersync will reload the browser. BrowserSync simply acts like a proxy, waits for laravel-mix to finish and then it reloads the browser for us, we don’t have to do it manually.

If you don’t have yarn installed and don’t want to install it. No problem, you can pull it in using npm:

npm install --save-dev browser-sync browser-sync-webpack-plugin

next, add this to your webpack.mix.js file

mix.browserSync({
    proxy: 'project.dev'
});

finally run npm run watch

Sync across devices

This is a feature of Browsersync that allows you to see changes made to your application on other devices say your mobile or tablet. I use this feature when testing for responsiveness and network throttling to see how each device performs. To do this, check your terminal where you previously ran npm run watch there should be additional output by Laravel-mix that is meant to lead you to this option.

Browsersync terminal output

The first two ip addresses on top is what we are concerned about here. It’s obvious what the first one (Local)is to access your site on local browsers. The second one(External) is used to access your website on other external devices you might have. To see this in action, access the address from your mobile, make change to your code, save it and instant refresh. Magical! You can also sync actions like scroll, click etc across devices too.

UI Configurations

While you can access Browsersync configurations through the terminal, you are still provided with the option of using a UI if/when you prefer to configure things.

Still using the terminal output in the picture above for reference. The second set of ip addresses is for accessing the Browsersync UI in your browser. The first ip address to access the UI from your local browsers and the second one(UI External) from an external device not on the same network. Try it out, paste any of the links in an appropriate browser, you should be presented with the screen below:

Browsersync ui

This UI gives you the full control over every aspect of your Browsersync set up. This post ends here but there is more I haven’t touched on. To learn more about other features provided by this great tool, go here.

Thanks for your reading.

Please show appreciation for the hard work — go and star the repositories(Laravel-mix, Browsersync) on Github!