Tweak config to support HMR

[artonge]

Tweak the Webpack config to support hot module reloading.

• Set the target to web (needed because of that: HMR/Live Reloading broken after Webpack 5 rc.0 -> rc.1 update webpack/webpack-dev-server#2758).
• Change the publicPath so HMR knows where to fetch updates. This can be Tweak config to support HMR #107 (comment) as stated in the readme.
• Add basic config for devServer.

[artonge]

This should be ready to test.

Don't forget to download and enable to HMREnabler app for the server.
You will also have to add this new comand in your package.json:

"serve": "NODE_ENV=development webpack serve --progress --config webpack.js",

[skjnldsv]

This is still missing the webpack-dev-server deps, no?

[skjnldsv]

It seems to be fetching https for me, because my dev instance have a certificate. But the webpack serve only listens to http 🤔

Setting up https: false in the DevServer does not works
https://webpack.js.org/configuration/dev-server/#devserverhttps

[artonge]

Yes,I wasn't sure it was necessary to add it as Webpack install it dynamically on the first webpack serve call and adding it in this package.json won't prevent the need to install it manually.

[artonge]

It seems to be fetching https for me, because my dev instance have a certificate. But the webpack serve only listens to http thinking

Setting up https: false in the DevServer does not works
https://webpack.js.org/configuration/dev-server/#devserverhttps

It might be due to the __webpack_public_path__ override. The generateFilePath function will generate an URL with https.

[skjnldsv]

Yes,I wasn't sure it was necessary to add it as Webpack install it dynamically on the first webpack serve call and adding it in this package.json won't prevent the need to install it manually.

Since this is a required dep for this lib to work with 100% of its features, we need it as dep and peer dep :)

[skjnldsv]

I think it's because my dev setup have a domain, the HMR_enabler doesn't fix the CSP for same-domain request, no?

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:3000/sockjs-node/info?t=1620129348916. (Reason: CORS request did not succeed).

[artonge]

I think it's because my dev setup have a domain, the HMR_enabler doesn't fix the CSP for same-domain request, no?

The problem here is that the Webpack devServer block requests coming from other web pages. This prevent say pirate.com to access the webpack devServer and do bad things.

The solution is to:

• either set devServer.disableHostCheck to true, which is insecure.
• or set devServer.allowedHosts to ['domain1', 'domain2', '...'], and try to list all domains used by the developers, which will probably always be incomplete, but maybe we can agree on a set of domains. And we can't do stuff like '*.localhost'.

We could also use a shell environment variable by setting devServer.allowedHosts to [process.env.TEST_DOMAIN] so everyone can do TEST_DOMAIN='nextcloud.test' make serve-js, but maybe that bring to much complexity.

[skjnldsv]

• either set devServer.disableHostCheck to true, which is insecure.

Tried this, did not work :/

[artonge]

• either set devServer.disableHostCheck to true, which is insecure.

Tried this, did not work :/

So, I was able to reproduce your error. It was due to Webpack using https to communicate but as it wasn't listening with https enabled, the requests failed. I pushed a solution to force Webpack to use http. This is the line that say host: 127.0.0.1. For whatever reason the source code has a condition that prevent using the source page's protocol when host is set to 127.0.0.1.

The other problem I reported still stand as you will notice. The current solution is to set an environment variable when running the dev server, but I don't think that is the best.

[juliusknorr]

Small comment regarding the environment variable, otherwise this works fine for me in deck with a limitation:

There seems to be an issue with multiple entrypoints that might be loaded from the same app that runs in hot reload mode which then causes the update to be not properly detected, but I'd consider that not as a blocker for now.

Really nice so far 👍