How to install gulp Browsersync in your Laravel project

Browsersync makes your browser testing workflow faster by synchronising URLs, interactions and code changes across multiple devices. To install in your Laravel project run:

npm install laravel-elixir-browsersync-official --save-dev

Within you gulpfile.js replace:

elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js');
});

With this code, replacing the proxy address with your own:

elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js');

       mix.browserSync({
         proxy: 'local.blog.com'
       });
});

When you run

$gulp watch

You should get the following:

[BS] Proxying: http://local.blog.com
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.15:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.15:3001
 -------------------------------------
[BS] Watching files...
[19:47:17]
[19:47:17] webpack is watching for changes
[BS] File changed: public/js/app.js

Go to the URL http://localhost:3000 and anything you change within your app.js or scss will automatically update within the browser on your local machine. The fun part is now you have this available over your network, so on your mobile; if you access the external address listed above under Access URLs http://192.168.0.15:3000 you should be able to see it on your mobile/tablet.