Hot reload on server side

[mostlyjason]

Hi I'll start by saying great starter kit! I'm really liking the Typescript. I've got this running on my dev machine and I'm trying to do a hot module replacement. It looks like the code is updated automatically on the client side, but the node server is not updated.

As a test, I edited Home/index.tsx and replaced "Hello" with "Hello2!", and then saved the file. At this point webpack builds and the browser is updated through HMR.

[HMR] connected
client.js:127 [HMR] bundle rebuilding
client.js:130 [HMR] bundle rebuilt in 2495ms
process-update.js:27 [HMR] Checking for updates on the server...
process-update.js:100 [HMR] Updated modules:
process-update.js:102 [HMR]  - ./src/app/containers/Home/index.tsx
process-update.js:107 [HMR] App is up to date.

When I refresh the page to trigger a server-side rendering I get the following error message:

warning.js:44 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) a-reactid="15">Hello2!</p></div></sectio
 (server) a-reactid="15">Hello!</p></div></section

It appears that the server has the older version of the file. The only way I found to update it is by restarting the server. Does hot reloading on the server side work for other people? If so, it might be something wrong about my system configuration that I should investigate. If this is not supported, should we consider adding it?

[altaywtf]

We are aware of this issue and will look for a solution on the following weeks. If you have any suggestions or efforts related to this problem, please don't hesitate to share it or open a pull request.

Thanks!

[mostlyjason]

Okay thanks! At least I know it's not something strange about my system. I'll report back if I find a solution but for right now I'm just restarting the server as needed.

[mostlyjason]

So I played around with this and got something working. Basically, I configured webpack to watch for changes and recompile a new server bundle when there are. Then I configured nodemon to restart the node server when the server bundle changes. This is great because any changes to routes or API code get updated automatically. The disadvantage is that it's slower because the node server has to restart. Also, the hot module reload on the browser seems to work sometimes after the connection reset, but it seems a little inconsistent. It would be even better if we could do a hot module reload on the server side but I haven't figured out how to get that working yet. I'd be happy to submit my code in a branch, but I'm not sure it's really polished enough for master.