React-hot-loader: How to set up react-hot-loader with webpack if I also use server rendering

[calvinchankf]

Hi,

I am new to react, i have no problem with react-hot-loader if I only use webpack for front-end. But when I try to use webpack to render server as well, it doesn't work.

i set up my project like this (https://github.com/reactjs/react-router-tutorial/tree/master/lessons/14-whats-next)

when i run 'NODE_ENV=production npm start', it just nothing happen...is it because there is no 'webpack-dev-server...' stuff in "start:prod" in package.json? how to make it work?

[meyer]

@calvinchankf That project uses two separate webpack configs—one for client-side rendering and one for server rendering. webpack.config.js (client-side) should contain your hot loading config options. webpack.server.config.js should not.

[calvinchankf]

@meyer Yes, I knew, I implemented it in client-side webpack.config.js but didn't work. I ended up giving up server-side rendering and made it work.

[calesce]

@calvinchankf: The simplest approach is to only server render in production, and only do client-side in dev.

If you want to have server rendering in development, you'll also need to re-require your routes/components on the server side, otherwise when you refresh the page you'll get the checksum warnings from React (because the HTML is stale and doesn't match the client bundle).

It's pretty tricky to get this right, and if you want a good example I'd recommend react-universally.