skip to Main Content
BrowserSync And Laravel

To install Browser Sync in Laravel run

npm i -D browser-sync

Webpack Tweak

in webpack.mix.js add

mix.browserSync('laravel.test');
or one with the url you are using to the bottom of the file . Save the file.

NPM Watch

Then run:

npm run watch

to start watching for changes. And see the Laravel app opening in http://localhost:3000/ and reloading on changes:

Browsersync] Proxying: http://laravel.test
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.100:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.100:3001
 --------------------------------------
[Browsersync] Watching files...

Watching PHP Changes

To sync PHP Changes you can use

browserSync({
files: [
'app/**/*',
'public/**/*',
'resources/views/**/*',
'routes/**/*'
]
});
mix.browserSync('laravel.test');

with the addition of specific files to be synched.

Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top