3

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:

  • Laravel: v8.41.0
  • PHP: PHP v8.0.5
  • Jetstream: v2.3.5
  • npm: v7.7.6
  • NodeJS: v15.14.0

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?

Yago Lagrotti
  • 31
  • 1
  • 2

2 Answers2

4

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.

noviolence
  • 156
  • 1
  • 1
  • 8
  • And that worked for you? I tried that but browserSync wont change the host or port. It tries to reach localhost:3000? How do you include the script if its not in the app-template any more? – C4pt4inC4nn4bis Jul 16 '21 at 08:05
  • @C4pt4inC4nn4bis I don't exactly know how it works but it does. Laravel Mix is taking care of it. As soon as I run `npm run watch` the domain entered pops up with `:3000` and the browserSync Script is included at the very end. That domain has to work by itself already, of course. I'm using Valet for that. – noviolence Jul 23 '21 at 15:07
  • 1
    I also use Valet in combination with Laravel 8 Mix and VueJS 3. This solution was the fix! Thanks so much. – BossNL Mar 07 '22 at 10:27
0

open: 'external' save me ( same i use valet and https )

.browserSync({
        proxy: 'https://app.tunnel.test',
        host: 'app.tunnel.test',
        open: 'external',
        https: {
            key: homedir + '/.config/valet/Certificates/' + domain + '.key',
            cert: homedir + '/.config/valet/Certificates/' + domain + '.crt',
        },
    })
Desmarais Alexis
  • 1