Prompted by a question on Laracasts, I wanted to see if I could use Browsersync to automatically refresh the browser after each code change. I mostly do back-end development, but all the docs about Browsersync are related to front-end JS and CSS development. My needs were simpler. I don’t have a front-end build process such as Laravel Mix, and wanted to monitor my view files and controllers etc.
After reading a little about Browsersync, I have my browser reloading automatically any time a view is saved, or anything in the app folder. It was quite easy to setup.
in the root of your laravel project, install Browsersync globally;
> npm install -g browser-sync
Create a Browsersync init file
> browser-sync init
Edit the Config file
Open Browsersync init file
bs-config.js in your editor and tell it what folders to monitor;
and where to send the sync messages (within
From the console, start Browsersync
> browser-sync start --config bs-config.js
You should now be able to navigate to the Browsersync UI in the browser at
In a master layout file (eg
app.blade.php) add the following before the closing tag.
@if (getenv('APP_ENV') === 'local') <script id="__bs_script__">//<![CDATA[ document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.24.4'><\/script>".replace("HOST", location.hostname)); //]]></script> @endif
The above is working on OSX using Valet+Nginx as the web server – your mileage may vary.
If your code crashes and whoops appears, then obviously the browsersync code is no longer running in the browser, and after you fix the issue you will need to refresh manually. I wonder if its possible to extend the whoops handler….