HMR: See Changes without Reloading

If you run an external development server with a local domain and webpack-encore keeps outputting "http://localhost:8080" in your header.

Try this:

yarn dev-server --host 0.0.0.0 --hot --disable-host-check --public 'http://[replace-with-your-domain]:8080'

Also works with yarn inside a docker container, but you must expose the container port (-p 8080:8080) and open the firewall.

Hey Pablo,

Thanks for this tip! Yeah, using Symfony built-in web server may be simpler, but for more complex setups you need to do more work.

Cheers!

This HMR stuff is great, except when it's not :)

To elaborate: I had a lot of sass warnings when compiling assets like:

Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.* 

These warnings were also visible on the website in a full screen modal. Only clicking on a X button top right made it go away.
Luckily you can suppress these sass warnings by adding some options to the sassLoader in webpack.config.js like this:

    .enableSassLoader((options) => {
        options.sassOptions = {
            quietDeps: true,
        };
    })

Just for full info: I did update everything before starting this course with composer update and also some packages in package.json (but that should not be related to the sass warnings)

Hey Edin,

Thank you for sharing these tips with others! Yeah, HMR is a cool thing... though might cause some problems, so use it at your own risk :)

Cheers!

Hi there!
You wrote: If you use Webpack's dev-server, then as soon as it detects a change, our page automatically reloads. Cool... but not cool enough

But at my webpack configuration it doesn't work. I run yarn watch (yarn dev-server doesn't generate build files).

When I modify a .vue file, I have to hit the browser because it doesn't automatically reload the webpage.

I added these lines inside my Webpack config file but that doesn't work either:

Encore.configureWatchOptions(function(watchOptions) {
  // enable polling and check for changes every 250ms
  // polling is useful when running Encore inside a Virtual Machine
  watchOptions.poll = 250;
});

What's wrong? 🤔

Hey @Abelardo!

Ok, there are two similar, but not-identical "modes" for Webpack:

A) "watch" mode - this is what you get with yarn watch. This generates physical files into your public/build directory and it automatically rebuilds those files whenever you change one of then. But it doesn't automatically update what you see in the browser: you need to refresh so the browser downloads the new files.

B) "dev server" mode - this is what you get with yarn dev-server. THIS one, if HMR is enabled and can be leveraged by the JS you're writing (which in Vue, it should work) is the one where your browser automatically updates without refreshing. But, the dev-server is a bit strange. As you noticed, it does not generate any build files. That is expected. Instead, Symfony will output your script/link tags to point to something like https://localhost:8080/build/app.js and that localhost:8080 (or whatever the address is, I can't remember the default) is actually a mini "web server" that is run by dev-server that returns your assets. So, no physically files, but your files WILL be downloaded. So if you want HMR, use the "dev server" mode, but don't expect to see any physical files ;).

Cheers!

Significant changes since webpack-encore 1.0.0 have happened.

* https, is now defined within webpack.config.js
* New in version 1.0.0:Before Encore 1.0, you needed to pass a --hot flag at the command line to enable HMR. You also needed to disable CSS extraction to enable HMR for CSS. That is no longer needed.

see: https://symfony.com/doc/cur...

''' package.json versioning.
"devDependencies": {
"@symfony/stimulus-bridge": "^2.0.0",
"@symfony/webpack-encore": "^1.0.0",
"@vue/compiler-sfc": "^3.0.5",
"core-js": "^3.0.0",
"regenerator-runtime": "^0.13.2",
"sass": "^1.32.7",
"sass-loader": "^11.0.0",
"stimulus": "^2.0.0",
"vue": "^3.0.2",
"vue-loader": "^16.1.0",
"webpack-notifier": "^1.6.0"
},

Hey @Lloyd!

Ah yes! Thanks for mentioning those! I was aware (I wrote those changes!) but I didn’t think of how they would impact this spot if you’re using the latest version. We’ll add a note to help others :).

Cheers!