React-hot-loader: Working together with a backend on a different port?

[WishCow]

Not sure if I'm messing up something with the configuration, or my usecase is not suitable for react-hot-loader. So I have an application that runs on python (Flask), on localhost:5000. I followed the guide on http://gaearon.github.io/react-hot-loader/getstarted/, how to configure react-hot-loader for automatic reloading, and it _almost_ works. The js files get bundled up, they are being watched for changes, and the browser gets notified about changes, however it sends an ajax request to an incorrect url:

http://127.0.0.1:5000/6495ade23756374f56fd.hot-update.json

Note the port number, this will be handled by Flask, which will result in a 404.

So to clarify:

My python backend is running on localhost:5000
Webpack server is running on 3000 (as per the tutorial)
I'm loading the JS bundle with:

<script type="text/javascript" src="http://localhost:3000/bundle.js"></script>

When I initially open my application in the browser (by going to http://localhost:5000), I see this in the firebug console:

GET http://0.0.0.0:3000/socket.io/1/?t=1425134048889 200 OK         1ms bundle.js (line 2381)
[HMR] Waiting for update signal from WDS... bundle.js (line 706)
[WDS] Hot Module Replacement enabled.

(which is good!)

But when I change a file, this gets logged in the firebug console:

[WDS] App updated. Recompiling... bundle.js (line 572)
[WDS] App hot update... bundle.js (line 614)
[HMR] Checking for updates on the server... bundle.js (line 701)
GET http://127.0.0.1:5000/f450e336c3b076f73ab0.hot-update.json 404 NOT FOUND        2ms bundle.js (line 26)
"NetworkError: 404 NOT FOUND - http://127.0.0.1:5000/f450e336c3b076f73ab0.hot-update.json"
f450e33...te.json
[HMR] Cannot find update. Need to do a full reload! bundle.js (line 644)
[HMR] (Probably because of restarting the webpack-dev-server)

For some reason it sent a request to :5000 for the hot-update.json, instead of :3000.

Did I miss something when configuring webpack? Or do I have to proxy requests to the webpack server from my application server?

[gaearon]

Make sure publicPath in Webpack config has 3000 port, not 5000. publicPath is where you want Webpack to make requests.

[WishCow]

Okay, the request is being sent to the correct URL now, however I don't see the changes in the browser.
I added publicPath under the output key in webpack.config.js, so it now looks like this:

    output: {
        path: __dirname,
        filename: 'bundle.js',
        publicPath: 'http://localhost:3000/'
    },

And in firebug, I see this when making a change to the files:

[WDS] App updated. Recompiling... bundle.js (line 565)
[WDS] App hot update... bundle.js (line 607)
[HMR] Checking for updates on the server... bundle.js (line 694)
GET http://localhost:3000/184d199e5da09cfa82f3.hot-update.json 200 OK       1ms bundle.js (line 26)
[HMR] Updated modules: bundle.js (line 672)
[HMR]  - 8 bundle.js (line 674)
[HMR] App is up to date. bundle.js (line 678)

[gaearon]

Any chance you're changing the entry point (something with React.render call) and it doesn't export anything? You need to change the component files which export valid components.

[WishCow]

Fixed.

I got a warning in Firebug about something like "you might have multiple versions of react.js dragged down in node_modules", and indeed, I had react installed with npm, however I also had it ignored with externals: { react: 'React' } in webpack, because I had it loaded from a CDN in the html template.

After removing the externals line from the webpack config, it is now refreshing changes correctly. I'm not sure why I didn't see the firebug warning message the first time, it definitely does not always show up.

Thanks for the help!

edit:

Actually no, it's still not perfect. Sometimes it refreshes, sometimes it doesn't.

It seems like if I leave the page alone for a long time, it will stop receiving updates. Is there some kind of timeout I should be aware of? Like if no change happens for 5 minutes, it will no longer listen for changes?

[gaearon]

There might be some kind of timeout but it's better to ask this on Webpack repo. I only experienced this after long debugger sessions which prevented JS from executing.

[gaearon]

Closing as not directly related to RHL (you might want to file this in webpack or webpack-dev-server repos).

[yu521088]

@WishCow , i am having the same issue to you, did you find any solution? I am not introducing react twice, BTW.

[WishCow]

I haven't found a solution, the problem disappeared by itself.

[yu521088]

@WishCow after a day's work, finally find the solution. In your html file, you should introduce the script file under the publicPath config, no matter where your output.path is. This is my config:

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: {
    index: ['./src/js/index.jsx']
  },
  output: {
    path: path.resolve(__dirname, 'build/js'),
    filename: '[name].js',
    publicPath: 'test/for/'
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.less']
  },
  module: {
    loaders: [{
      test: /\.jsx$/,
      include: [path.join(__dirname, 'src')],
      loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015']
    },
    { test: /\.css$/, loader: "style!css" },
    { test: /\.less$/, loader: "style!css!less" }]
  },
  watch: true,
  plugins: [
    // new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

and this is how i introduce my script in HTML, where ./test/for/ is the publicPath config in webpack.config.js:

<script src="./test/for/index.js"></script>

webpack-dev-server will compile index.js to memory instead of build/js/index.js, and test/for/ is just a virtual path, it doesn't matter if it exist.

It works for me, hope that will help you.

[NwawelAIroume]

I'm on windows10 and i experience the same issue nothing worked for me. i still get GET http://127.0.0.1:5000/f450e336c3b076f73ab0.hot-update.json 404 NOT FOUND 2ms bundle.js (line 26) "NetworkError: 404 NOT FOUND - http://127.0.0.1:5000/f450e336c3b076f73ab0.hot-update.json" f450e33...te.json [HMR] Cannot find update. Need to do a full reload! bundle.js (line 644) [HMR] (Probably because of restarting the webpack-dev-server)

[AllenZeng]

in this issues https://github.com/gaearon/react-hot-loader/issues/194 @seburgi suggest adding " publicPath: '/' " to output section, so it looks like this:

output: {
    path: Path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/',
},

That help me fixed the problem.

[NwawelAIroume]

@AllenZeng path.join(__dirname, 'build'), path cause compilation error didn't fix even if i put the public path. help me to solve this. i don't know why my config work on ubuntu and not in windows

[brentatkins]

I've been scratching my head with this. Have pretty much the same setup as @WishCow and adding the publicPath fixed the 404 error when a file was changed.

However the module doesn't refresh. I get the correct logs in console, but no change to the control on the page.

The hot module replacement works when I run the website from the webpack server (port 3000). But nothing when I use my backend (port 5000) with a script reference to the webpack server bundle.

Anyone have an idea on where I might find the problem?

---

UPDATE

User error (is it ever anything else?)
It works! The publicPath setting did the trick.

[AlexLeung]

@brentatkins What publicPath setting did you end up using?

[brentatkins]

@AlexLeung I have it set to http://localhost:3000/ and it works for me

[Levino]

I had a webserver running on port 3005 but was serving the webpack files from port 3015 (webpack dev server "port" config setting). Setting "publicPath" in "output" in the webpack.config.js to "http://localhost:3015/' instead of not setting it at all solved my problem. Per default webpack gets all files from the current domain / port that the page has that you load the webpack javascript into. One can also see the issue in the console: There is a failed get request on the wrong port for the updated js files.

[inakianduaga]

It's not working for me even after setting publicPath to point to the webpack dev server location (so serving from a different backend than webpack's). I'm using webpack 2, not sure that makes a difference