UseProxyToSpaDevelopmentServer doesn't auto-refresh browser using an Aurelia ClientApp with HMR about javascriptservices HOT 3 CLOSED

Ok, i tried to figure what what was causing the websocket redirect to port 8080 from 5001 and spotted this:
Inside "ClientApp/aurelia_project/tasks/run.ts" there is a line which updates a copy of the webpack config used when running the app:

config.entry.app.unshift(`webpack-dev-server/client?http://${opts.host}:${opts.port}/`, 'webpack/hot/dev-server');

changing this to point to https://${opts.host}:5001/ solves the problem, that is not ideal because it will break when accessing the dev server directly.

Luckily the address is not required, it also works fine using this:

config.entry.app.unshift(`webpack-dev-server/client`, 'webpack/hot/dev-server');

Solved! my Aurelia ClientApp now works correctly with HMR either through https://localhost:5001 or http://localhost:8080 or any other address it is made to run on.

So not a JavaScriptServices issue, however anyone using Angular and ejecting from the Angular CLI will break HMR which may be relevant under this repo due to the Angular SPA template.
Closing this.

from javascriptservices.

Just an update on this, checking the Chrome console log, this error can be seen when using hmr with my Aurelia ClientApp as described above:

GET https://localhost:8080/sockjs-node/info?t=1540995938707 net::ERR_CONNECTION_CLOSED

The above request should be going via the dotnet host rather than directly to the webpack server.

I have now compared this to what happens in the Angular Spa template, it seems when using Angular as the ClientApp, the request is correctly sent to:

https://localhost:5001/sockjs-node/info?t=1540996146714

For some reason, in the Aurelia Template i created the request is being sent directly to the webpack dev server rather than to the dotnet host to be proxied through to the dev server. This in theory should still work, but fails because the dev server is not running on https, only the dotnet host.

So it works in the Angular Spa template, I am not sure what magic is happening behind the scenes in the Angular CLI when i run npm run hmr which in turn runs the CLI with ng serve --hmr -e=hmr

There must be some magic because if i run ng eject which "ejects" us from the friendly and magic world of the Angular CLI and generates the required webpack config, it breaks.

Once ejected from the CLI, running npm run hmr which in now runs webpack directly with webpack-dev-server --port=4200 --hot (after editing the package.json) we see the following error:

GET https://localhost:4200/sockjs-node/info?t=1540997851706 net::ERR_CONNECTION_CLOSED

That is the same issue as what i am seeing with the Aurelia ClientApp. Ejecting from the CLI is a likely scenario for many Angular projects, at which point HMR will no longer work it seems. To complicate things further, when accessing Angular directly via "http://localhost:4200/" after ejecting, although there are no errors when requesting "/sockjs-node/", HMR is now not working properly as the whole page now refreshes when doing the same edit that previously caused a partial page refresh.

The Aurelia ClientApp always works with HMR when accessing it directly.

I haven't tried different versions of webpack-dev-server as yet, the versions are different between the Angular and Aurelia ClientApp's but the behaviour is the same once ejected from the Angular CLI.

Does anyone happen to know what magic is happening in the Angular CLI that makes this work?

from javascriptservices.

Update: If you try to run Aurelia from a subpath for example by setting const baseUrl = '/app/'; in the webpack config, which sets output.publicPath you need to use this format in run.ts to set the client path to '/'

config.entry.app.unshift(`webpack-dev-server/client?/`, 'webpack/hot/dev-server');

It seems that the path used by the dev server client to access the websocket server is inherited from the publicPath setting or derived some other variable generated from that . Currently the dev server websocket is not able to listen on a subpath until this is done:
webpack/webpack-dev-server#1553
so the client must be forced back to using '/' as the path

from javascriptservices.