Add hot reloading back into project using the new React Hot Loader

[joshburgess]

The new React Hot Loader 3 beta is out and is intended as a replacement for both the original as well as React Transform. I've been testing it out, and hot reloading now works with pure functional components.

If you guys agree it should be put in, I'd like to make a pull request for it. Let me know.

[langpavel]

Definitely :+1:

[nkbt]

Yep that was the idea! Go with PR, it is most welcomed!

[joshburgess]

I started on this last night, and I got it working, but I have a few questions before submitting the PR.

In devServer.js, where it pulls in the express app from a separate file, ("import app from 'server/app';"), I believe that for hot reloading to work correctly the app.use calls for applying the webpack-dev-middleware and webpack-hot-middleware must come before the app.use calls that set the static assets route & root route of the app. Right now, the middleware is coming after all of that, because it's being set in the devServer.js after the server/app.js express app is imported, and that server/app.js file is where the routes are set.

How would you all like to change this to allow getting everything occurring in the necessary order? I don't want to change the project structure too much without getting your input.

Also, other than that, I'm not sure yet how the included react-transform & redbox-react will interact with the new react-hot-loader. I think it may be possible to remove react-transform and get red-box-react working with react-hot-loader 3, but not 100% sure.

[langpavel]

Try submit PR, then we can test it and give you more feedback ;-) You can write checklist into PR message...

[ericelliott]

Exciting! =)

[joshburgess]

Sorry for the delay, guys. Was having some issues and also have been extremely busy. Will try to submit a PR as soon as I can.

[langpavel]

Don't worry :-) Give time to do it well, can take a while

[adamsoffer]

@joshburgess are you working on a forked repo? Would love to see how you got hot reloading working. I'm struggling a bit to get it working properly...

[ericelliott]

=)

[joshburgess]

@ads1018 As of now, I have used react-hot-loader 3 in other projects with functional component hot reloading working successfully in two different ways... first, using a simple webpack-dev-server, and, then, using the more advanced webpack-dev-middleware & webpack-hot-middleware method. Both work and were pretty easy to setup. I do not have anything hosted currently, but I can chat and point you to some examples if you want.

However, these projects weren't Universal JS projects (no server-side pre-rendering), so the complexity level isn't quite the same compared to this boilerplate. I had some issues with things not working correctly when I first tried to implement the same things I did in my own client-side only SPA projects in this boilerplate... However, I don't think it's anything that can't be figured out. I've just been really busy with my day job & getting started with co-organizing a React meetup.com group for my city with two other guys (preparing our first meetup, planning things, etc.). I hope to get back to it soon. Hopefully this weekend.

The good news is that it looks like we can completely strip out react-transform and keep redbox-react working in the project, which will be nice as it will simplify the boilerplate further. Other than that, I THINK we just have to move some of the isolated files around a little to be able to get the middleware loading in the proper order for hot reloading to fully work...

[ericelliott]

However, these projects weren't Universal JS projects (no server-side pre-rendering), so the complexity level isn't quite the same compared to this boilerplate.

That's why there are two different Webpack configs. =)

[adamsoffer]

I'm able to get hot reloading working :) The only problem I'm running into is that when I refresh the page react throws a checksum error because the server is serving the old state of the component. Any idea on how to get around that?

[joshburgess]

I was running into the same issue, only my hot reloading was not fully working... changes were triggering rebuilds and the console would say the component is up to date afterwards but the changes weren't being rendered. Same exact deal with the checksum though. Would you like to chat on Twitter or Slack and compare projects? Or maybe we can start a Gitter chat for this repo?

[adamsoffer]

Definitely. Just followed you back on Twitter. I think starting a Gitter chat for this repo is a great idea...

[joshburgess]

False alarm, guys. Looks like Adam was still using react-transform and not using functional components. I've pushed where I'm at right now to my fork if any of you want to take a look at what I've done so far and have any ideas about what I'm missing: https://github.com/joshburgess/universal-react-boilerplate

[adamsoffer]

Yeah sorry for the false alarm guys. After upgrading to the new React Hot Reloader and switching to functional components I run into the same exact issues as Josh.

[brandondurham]

What’s the state of this work? Just wondering if I should go rogue and spend the next day or two trying to get it working myself, or if anyone else has made any headway.

[adamsoffer]

I've yet to figure it out...

[joshburgess]

I posted where I left off with it up above. It's a good starting point. I wasn't able to figure out why it wasn't working and haven't had free time to keep going with it. Maybe, fork it and see if you can figure out what I'm not doing correctly? I left some of the original code in and commented out to make it easier for someone to pick up on things I've changed.

https://github.com/joshburgess/universal-react-boilerplate