HMR / dev-server is not working inside a VM despite the documentation

[tristanbes]

Hello,

We're facing a problem while trying to run HMR:

building with

/node_modules/.bin/encore dev-server --host 0.0.0.0 --port 8000 --disable-host-check --hot --public enigma.vm

accessing http://enigma.vm/login, the assets are trying to load from http://0.0.0.0:8000/build/login.css
but the local traffic is redirected on enigma.vm. so http://0.0.0.0:8000 does not answer.
yet, http://enigma.vm:8000/build/home.css serve the right asset.

When trying something different:

./node_modules/.bin/encore dev-server --host enigma.vm --port 8000 --disable-host-check --hot

The assets is correctly served from the server http://enigma.vm:8000/build/home.css

But when trying to access http://enigma.vm/login, then the assets are loaded from http://enigma.vm:8000/build/login.css which reply with net::ERR_CONNECTION_REFUSED

My frontend dev is 100% blaming webpack-encore, and say this would never happened running webpack without the wrapper. I'm sad because I was an advocate to encore.... help me prove him wrong ;-)

const Encore = require('@symfony/webpack-encore');

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())

  .addEntry('home', './assets/js/home/home.js')
  .addEntry('login', './assets/js/login/login.js')
  .enableVueLoader()
;

var config = Encore.getWebpackConfig();
config.watchOptions = { poll: 300, ignored: /node_modules/ };

module.exports = config;

PS i've read #126 thought it would help me, but it's not :(

[Lyrkan]

Hi @tristanbes,

There was another issue about using --host 0.0.0.0 that may be relevant to your case: #59

The PR that fixed it (#96) made it possible to use an URL when calling setPublicPath(), maybe you could try doing that?

It was also supposed to add a --keep-public-path option to avoid adding the 'host' part to the public path but sadly it doesn't seem to be working anymore (see #180, that behavior could probably be reproduced by replacing the path where it appears in the generated config though).

[MGatou]

The PR #96 fixes the problem.

• In my webpack.conf.js, I add this config :

// .. rest of configuration
if (!Encore.isProduction()) {
  Encore
    .setPublicPath('http://enigma.vm:8080/build/')
    .setManifestKeyPrefix('build/')
  ;
}

• And I also add the options --host 0.0.0.0 --disable-host-check to my dev-server

Thanks @Lyrkan

[weaverryan]

Is there some documentation we can update to help make this easier?

[tristanbes]

Yes, maybe this one ? https://symfony.com/doc/current/frontend/encore/dev-server.html

[ELFrontEnd]

I'm sorry but i can't get it to work properly with this confg with a docker and symfony 3.4.

• Url: http://mysite.com:3477/

• package.json script:
  "build-local": "encore dev-server --host 0.0.0.0 --disable-host-check --hot", "build-serverside": "encore dev --config webpack.config.serverside.js --watch", "build": "run-p build-local build-serverside"

• webpack.config.js:

const Encore = require('@symfony/webpack-encore'); Encore .setOutputPath('web/build/') .setPublicPath('/build') .cleanupOutputBeforeBuild() .addEntry('app', ['babel-polyfill', './app/Resources/js/entryPoint.js']) .autoProvidejQuery() .enableVersioning(Encore.isProduction()) .enableSourceMaps(!Encore.isProduction()); if (!Encore.isProduction()) { Encore .setPublicPath('http://mysite:3477/build') .setManifestKeyPrefix('build/'); } const config = Encore.getWebpackConfig(); // config.watchOptions = { poll: 300, ignored: /node_modules/ }; module.exports = config;

And in twig file:
{% block javascripts %} <script src="{{ asset('build/app.js') }}"></script> {% endblock %}

I keep getting connection reset or 404 errors and i can't find a proper docker configuration.

[Kocal]

I've just opened symfony/symfony-docs#11422 that should help