2

We are developing an application that uses hapi as webserver and webpack-hot-middleware for hot-module-replacement.

The application server runs at http://hostname:8080.

The application is usually accessible via http://hostname/my/module/ To make http://hostname/my/module/ serve the application that runs under hostname:8080, we are using an IIS rewrite that rewrites everything from http://hostname/my/module/(...) to http://hostname:8080/(...).

The issue now comes in when developing using webpack-hot-middleware. It seems, webpack hot-module-replacement always tries to make its hmr endpoint (I think the websocket for detecting/serving changes) hardcoded at /__webpack_hmr which - if the root page http://hostname/my/module/ is opened - resolves to http://hostname/__webpack_hmr. Of course, this cannot be found and therefore returns a 404 since the IIS running at http://hostname/ does not know anything about webpack hmr.

Now, for development, it would also be fine to access the application using its own address http://hostname:8080/ but then, a CORS error happens:

Access to resource at 'http://hostname/__webpack_hmr' from origin 'http://hostname:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So it seems even though I am accessing the application using http://hostname:8080, webpack-hmr still tries to open the socket at http://hostname/__webpack_hmr that then additionally fails with a CORS error.

Is there any option to tell the webpack.HotModuleReplacementPlugin that it should serve the __webpack_hmr endpoint as a relative path so it ends up as http://hostname/my/module/__webpack_hmr (which is rewritten to http://hostname:8080/__webpack_hmr which would be the correct address)?

Or if this is not possible, is there any way to at least get it working when accessing the application using http://hostname:8080/(...)?

I did not find anything in the docs. Only in some Github issues the Webpack publicPath configuration is mentioned but I did not see how it can help me.

Update I came a bit further and detected that setting the webpack-hot-middleware entrypoint in the webpack config to "webpack-hot-middleware/client?path=http://hostname/my/module/__webpack_hmr" makes the __webpack_hmr endpoint be available at the correct location.

But the next issue now is that the HRM files

  • dist.XYZ.hot-update.json
  • distbundle.XYZ.hot-update.js are also tried to be located directly under the root directory (/dist.XYZ.hot-update.json, /distbundle.XYZ.hot-update.js). Is there any possibility to make these locations relative / set a specific subdirectory for them?

Adding another IIS rewrite to rewrite those paths to something like http://localhost:8080/dist.XYZ.hot-update.json makes it work but I would prefer a solution without having to configure the IIS for this.

sceee
  • 1,681
  • 19
  • 34
  • hot-replacement is a feature for development phase in which ip:8080 is acceptable. For testing and production in which a domain is required, is not recommend. – JRichardsz Apr 05 '21 at 22:53
  • @JRichardsz the question is purely about development. But even in development, we require a hostname (the local machine's hostname). – sceee Apr 06 '21 at 06:51
  • If we are in development phase, in a linux desktop, the developer does not need domains or hostnames. Just npm run dev and open something like this: localhost:8080, 127.0.0.1:8080 and everything works. Developer does not need rewrite or another complex configurations related to networking. Maybe the problem is the use of IIS and windows for nodejs. These kind of technologies were born for linux, also in production environment, linux is the best choice. If your problem continues, Are you able to use another tools like apache or nginx? – JRichardsz Apr 06 '21 at 14:32

1 Answers1

0

Try adding it without specifying the actual domain name and port

// Add hot reloading in development
  entry: [
    'webpack-hot-middleware/client?reload=true&path=/my/module/__webpack_hmr',
  ],

alternatively, you could use dynamicPublicPath and set the correct publicPath

// Add hot reloading in development
  entry: [
    'webpack-hot-middleware/client?reload=true&dynamicPublicPath=true',
  ],

check the documentation here https://github.com/webpack-contrib/webpack-hot-middleware

Jimubao
  • 411
  • 6
  • 11