react hmr example

Question

react hmr example

dKab opened this issue 8 years ago · 13 comments

dKab commented 8 years ago

I'd love to see working example of koa-webpack with webpack 2 and react-hot-loader3

Answer 1 · 2017-02-23T20:45:50.000Z

Created #30 because I also wanted to see this.

Answer 2 · 2017-02-23T22:54:37.000Z

@cmoad I managed to get it working in my setup. You may take a look at it here: https://github.com/dKab/recipy-book

Answer 3 · 2017-02-23T23:43:40.000Z

@dKab wonderful! could I link to your project in koa-webpack's README?

Answer 4 · 2017-02-23T23:48:52.000Z

@shellscape sure, no problem. Thanks for the package by the way.

Answer 5 · 2017-02-24T03:27:35.000Z

Perhaps I'm misunderstanding, but I don't see that you are hot reloading the server code. I'm trying to setup a project with only server code (no react). I also see in your readme:

Hot reloading is enabled. Client bundle will be recompiled with every change, however server bundle won't (HMR wouldn't work if server was recompiled on every change).

Answer 6 · 2017-02-24T09:07:41.000Z

@cmoad

but I don't see that you are hot reloading the server code

Oops. Sorry. I din't know hmr can can be applied to server code as well as to client.

Answer 7 · 2017-02-24T14:40:18.000Z

Perhaps it can't and that's why I am struggling.

Answer 8 · 2017-02-24T15:14:22.000Z

But I don't I think I grasp the concept of hmr on the server. On the client it's pretty clear - bundle is updated on the fly and thus you don't have to reload the browser to see changes. On the other hand what would be the idea of hmr on the server side? I mean why the solution when you track changes in source files and recompile server bundle and restart node with new bundle wouldn't work for you?

To achieve this you could (assuming you use webpack for budling server code) start webpack in watch mode and use something like nodemon to restart your server script when bundle is changed.

Or am I missing something?

Answer 9 · 2017-02-24T15:36:39.000Z

From webpack-hot-middleware's readme:

This module is only concerned with the mechanisms to connect a browser client to a webpack server & receive updates. It will subscribe to changes from the server and execute those changes using webpack's HMR api.

That links to the HMR API which to me reads that it's only concerned with client-side things, as that's webpack's targeted focus.

The suggestion by @dKab sounds like a winner. But server-side module reloading may be out of scope for this module, given the client-side focus. It sounds like something that needs to work externally in conjunction with koa-webpack.

Answer 10 · 2017-09-27T10:08:21.000Z

Note: the linked example abandoned koa-webpack, claiming it was broken: dKab/recipe-book@701deac

Answer 11 · 2017-09-27T13:31:46.000Z

@bryanlarsen that's humorous, but thank you for sharing for the benefit of others. closing this issue as it's pretty stale. we'll welcome contributed examples for different platforms (like React) but it's not something that's a priority at the moment.

Answer 12 · 2017-11-25T11:33:15.000Z

Was anyone able to reproduce a public working example with react?

Answer 13 · 2018-01-19T16:07:00.000Z

I have React hot loading working with "koa-webpack": "^1.0.0". "koa-webpack": "^2.0.3", seems to break it and I haven't found the missing link yet. Probably I'll go back to using v1.