robjbrain
518
5
Mix

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

Posted 11 months ago by robjbrain

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

  1. 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.

  2. 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.

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.