Browser Sync is an open source tool that can instantaneously synchronize your code changes with your browser. As soon as the file is saved, automatic webpage reload happens, without any action from your side.
\nYou could use Browser Sync outside Laravel and without Laravel Mix asset bundler, however in this tutorial I will focus primarily on how to harvest its greatest features with truly minimalistic configuration.
\nAll the hardest work has already been done by Laravel Mix, which lets you incorporate Browser Sync into your project with little effort. If you are interested, Laravel Mix uses Webpack module bundler with browser-sync-webpack-plugin under the hood.
\nSo, do you want to gain some time while developing your current or future Laravel project? If the answer is yes, then let's start it off right away!
\nUpdate Laravel Mix webpack.mix.js configuration file
\nmix.browserSync({\n open: false,\n files: [\n 'app/**/*',\n 'public/**/*',\n 'resources/views/**/*',\n 'routes/**/*'\n ]\n})As you see, Browser Sync will listen for changes only inside the most important Laravel folders, as well as their subfolders. Additionally, option open is set to false, because inside the Virtual Machine there is no X Window System configured - therefore no way to open the graphical browser window from a terminal.
\nMake sure you don't track changes on directories like resources/js, resources/sass, since those are usually pre-processed by specific plugins (e.g: Sass processor, Babel transpiler). What you should be really up for are the output files generated by them, usually saved under public folder, as shown below
\nmix.sass('resources/assets/sass/app.scss', 'public/css')\n .js('resources/assets/js/app.js', 'public/js')\n .react('resources/assets/js/appreact.js', 'public/js');Next, head over to your Blade main layout file and paste following snippet right before </body> tag.
@if (getenv('APP_ENV') === 'local')\n <script id=\"__bs_script__\">//<![CDATA[\n document.write(\"<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.18.12'></script>\".replace(\"HOST\", location.hostname));\n //]]>\n </script>\n@endifBefore we continue, let's stop and try to understand what is happening there
\nAPP_ENV variable as local inside .env fileHOST placeholder will be replaced by Hostname (if your URI was http://homestead.app/users, then HOST will become homestead.app)node_modules/browser-sync/bin/browser-sync.js --version and adjust the ?v variable accordinglyNext, open terminal window on your host machine and SSH onto your Homestead Virtual Machine
\nhomestead sshIf your host Unix-like operating system doesn't recognize this command, consider creating a helpful function
\nfunction homestead() {\n ( cd ~/path/to/your/homestead/directory && vagrant $* )\n}It should be placed inside your shell configuration file (e.g: .bashrc, .bash_profile, .zshrc) and sourced, if you want to use it immediately (source ~/.bashrc).
Inside your Virtual Machine, traverse to your Laravel application directory (the one where package.json exists) and run
\nnpm run watchYou may experience dependency pre-installation screen, as shown below
\nAdditional dependencies must be installed. This will only take a moment.\n.\n.\n.\nFinished. Please run Mix again.This will most probably install browser-sync-webpack-plugin package.
\nOnce it's finished, rerun previous command: npm run watch and you should see the output similar to the one below
DONE Compiled successfully in 7168ms \n.\n.\n.\n[BS] Proxying: http://app.dev\n[BS] Access URLs:\n ----------------------------------\n Local: http://localhost:3000\n External: http://10.0.2.15:3000\n ----------------------------------\n UI: http://localhost:3001\n UI External: http://10.0.2.15:3001\n ----------------------------------\n[BS] Watching files...Don't worry about those magic Hosts and IPs, you may change them inside your Browser Sync configuration, but from my experience, they didn't have any effect.
\nHint: If npm watching does not work for you, consider using npm run watch-poll.
That's all that is to it, now it's high time to test if everything works well.
\nOn your host machine, open your favorite browser and paste the project's url (e.g http://homestead.app). On the top right corner you should see a popup with text Connected to BrowserSync.
\nHead over to your IDE editor, change something in your Blade template, Javascript or CSS files and save it. Make sure it's also saved on your Homestead Virtual Machine, since this is the place where Browser Sync is watching for changes.
\nOnce done, you should see the live reloading in play. Isn't it cool? If you have two monitors, this can tremendously speed up your development.
\nBrowserSync also provides handy UI console. In order to see it, open a new tab in your host machine's web browser, pasting your project URL followed by port 3001 (e.g: http://homestead.app:3001)
\nBrowser Sync is an amazing tool, which can make your life as a developer much easier and more rewarding. It has a few other features I didn't even touch here, so feel free to scan their Browser Sync website yourself.
\nYou can also track the Laravel Mix Browser Sync documentation, however it's not very handy.
\nBesides Browser Sync, there is another cross-browser synchronization tool out there, which name is LiveReload.
\nI will dedicate the whole blogpost to it, but if you are really impatient, feel free to check the Laravel Mix Live Reload documentation yourself.
"}},"pageContext":{"postId":"b340b7be-45fc-5caa-9e64-740f56a730b8","slug":"how-to-configure-browser-sync-live-reloading-in-your-current-or-next-laravel-project-running-on-homestead-virtual-machine"}}}