Jun 7, 2018

Level 2

Laravel Mix and browserSync / Hot Module Replacement not working. Do I need to setup localhost/ports?

I'm following Jeffrey's Vue JS series however i'm having alot of issues getting automatic reloading going.

It's confusing whether to use browserSync or Hot Module Replacement, it seems like the official docs say browserSync now although Jeffrey used Hot Module Replacement in his videos.
I've tried both and can't get either to work.

Hot Module Replacement

mix
    .js('resources/assets/js/app.js', 'public/js/bundle.js')
    .sass('resources/assets/sass/app.scss', 'public/css/bundle.css');

// Use the mix helper
<script src="{{ mix('js/bundle.js') }}"></script>
// Returns
<script src="/js/bundle.js"></script>

npm run hot
//  DONE  Compiled successfully in 982ms

Then I edit app.scss and app.js and nothing happens? Not only does it not reload the browser but it doesn't build new bundle.css or bundle.js files? The terminal window doesn't change at all.

browserSync

mix
    .js('resources/assets/js/app.js', 'public/js/bundle.js')
    .sass('resources/assets/sass/app.scss', 'public/css/bundle.css')
    .browserSync({
        proxy: 'todo.local'
    });

I also tried:

.browserSync('todo.local');

 DONE  Compiled successfully in 2461ms                                                                                              19:51:46

          Asset       Size  Chunks                    Chunk Names
  /js/bundle.js     897 kB       0  [emitted]  [big]  /js/bundle
/css/bundle.css  162 bytes    0, 0  [emitted]         /js/bundle, /js/bundle
[Browsersync] Reloading Browsers... (buffered 3 events)

It compiles once and then nothing, no reloading?

I notice it also said:

[Browsersync] Proxying: http://todo.local
[Browsersync] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.2.15:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.2.15:3001
 ----------------------------------

I'm not sure if i'm meant to be doing something with these ports or something, they're not accessible via the web browser so maybe that's why it's not working? But i've found absolutely no documentation or forum posts on setting this up and it's not covered in any of Jeffrey's videos.

I'm accessing the site via todo.local using laravel homstead.

Snapey

8 years ago

Level 122

if browsersync is running you should be able to use the localhost address to see the browsersync console page

robjbrain

8 years ago

Level 2

Yep there's definitely some assumed setup or environment here that i'm missing http://localhost:3001 and http://localhost just return ERR_CONNECTION_REFUSED

Presumably I need to setup localhost in some way to point at something? I'm just running default MacOS High Sierra.

Running homestead with .local domains under /etc/hosts has been working fine for some time now.

rin4ik

8 years ago

Level 50

@robjbrain with this?

.browserSync({
        open: 'external',
        host: 'todo.local',
        proxy: 'todo.local'
    });

robjbrain

8 years ago

Level 2

Hmm I seem to have gotten it working.

I'll be very extensive in everything I tried incase anyone else finds this, since i'm not sure which commands where the correct way to do things and i'm not sure which exact step was the issue.

Updated node/npm:

sudo npm cache clean -f
sudo npm install -g n
sudo n stable
exit
vagrant provision --reload

Update npm modules (included a security fix, probably unrelated)

npm install
npm audit fix
npm update

// Was told I need to update sass, this might have been a cause?
npm rebuild node-sass --force

// Doesn't work for me?
npm run watch

// Does work for me...
npm run watch-poll

Updated webpack.mix.js as per previous comment

mix
    .js('resources/assets/js/app.js', 'public/js/bundle.js')
    .sass('resources/assets/sass/app.scss', 'public/css/bundle.css')
    .browserSync({
        open: 'external',
        host: 'todo.local',
        proxy: 'todo.local'
    });

Try in browser: todo.local didn't have hot reloading

Needed to use: http://todo.local:3000

I'm not sure how that works for sub routes etc, I haven't got that far yet :)

Snapey

8 years ago

Level 122

I wrote this article about running browsersync for automatic reloading when changing Laravel backend. Its not relevant to NPM module reloading but may be useful to others searching for browsersync

http://novate.co.uk/using-browser-sync-with-laravel-without-mix-or-webpack/

1 like

Please or to participate in this conversation.