A Blog Of Random Coding Techniques & Experiments Robert Askam

How to install gulp Browsersync in your Laravel project Post How to install gulp Browsersync in your Laravel project 1 year ago

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.