laravelvue.jswebpacklaravel-jetstream

Laravel 8 jetstream hot reload and browser sync do not work

I have a big problem with a system I just created.

I did the standard installation of Laravel 8 with jetstream using the docker and laravel sail...

However, I am not able to do the npm run hot or npm run watch to auto reload or browser sync...

My files are standard with laravel 8 and I haven't made any changes to the code yet.

Informations:

my webpack.mix.js looks like this:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .webpackConfig(require('./webpack.config'));

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

my webpack.config.js looks like this:

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

I have also tried to change the two webpacks with some information I found earlier in research, but really nothing is working, would there be a way for Hot Reload and Browser Sync to work together with Laravel Sail?

Solution

  • While a browsersync script is already included in app.blade.php I did not get it to work either. I removed that line and expanded my webpack.mix.js as follows:

    mix.browserSync({
    proxy: 'YOURDOMAIN.test',
    host: 'YOURDOMAIN.test',
    open: 'external'
});

    Then run npm run watch- probably twice because it's going to install browsersync - and it's working.