BrowserSync + LiveReload not working correctly

[Tom-revere]

Sorry if this has been asked many times before, but I have searched and I have not found anything.

I am pretty new to Statamic and I am trying to get BrowserSync and LiveReload to work on a site, but it just doesn't seem to want to work correctly.

I have this in my webpack.mix.js:

const mix = require('laravel-mix');

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

mix.js('resources/js/site.js', 'public/js')

mix.postCss('resources/css/tailwind.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'),
    require('postcss-preset-env')({stage: 0})
])

if (mix.inProduction()) {
   mix.version();
}

And when I run npm run watch it opens up my site as localhost, as expected, but changes to files does not reload my browser, as I would have expected it to.

I am not using Laravel Valet, I am using Laragon (if that helps!)

Just wondering if there is anything I should be doing different to regular Laravel?

Thanks!

[taylorcammack]

Adding a line for the files to watch should do the trick 👍

mix.browserSync({
    proxy: 'statamic.local',
    files: [
        'public/**/*.(css|js)', 
    ],
})

[Tom-revere]

Amazing! Thank you so much!

I added that line and it now reloads correctly when saving a CSS or JS file. I had to readjust my webpack.mix.js file a bit though, as I also wanted it to reload when a view file was changed, so I ended up with:

const mix = require('laravel-mix');

mix.js('resources/js/site.js', 'public/js')

mix.postCss('resources/css/tailwind.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'),
    require('postcss-preset-env')({stage: 0})
])

if (mix.inProduction()) {
   mix.version();
}

mix.browserSync({
  proxy: 'statamic.local',
  files: [
    'public/**/*.(css|js)', 
    'resources/**/*.(html)', 
  ],
});

Not sure if this is the correct way of doing this, but it work for my needs..

Thank you again 😀

[edalzell]

Nothing Statamic about this. If it’s new statamic it uses Vite not mix?

[Tom-revere]

This was from 2021. I am also not using Statamic anymore, so it's safe to say this is old and not relevant anymore.