Set up webpack hot reload to work with another website backend

The goal is to serve app.js from a different port than the website port and have the hot reload module (HRM) work.

During development, I usually have a website with a web frameowork at localhost:8080 and have webpack do it’s magic npm run dev serving app.js at localhost:3000/app.js.

My index.html includes localhost:3000/app.js inside a script tag. However the hot reload feature does not work and produces error:

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

The problem is hot reload module was trying to access it’s server at port 8080, instead of 3000.

To fix it, I need to adjust options for webpack-hot-middleware in the entry script, changing

var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')

to

var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true&path=//localhost:3000/__webpack_hmr')

Basically passing path=//localhost:3000/__webpack_hmr as additional query parameter to the hot reload client.

This StackOverflow question helped me