Production hot reloading? about react-hot-loader HOT 10 CLOSED

From webpack side this is possible. HMR was designed to support production usage. You just need to use an appropriate runtime instead of webpack/hot/dev-server.

from react-hot-loader.

I'd love to see a proof of concept of this. Personally I don't think it's ready for prime time (HR occasionally fails with stateful code and we all have some stateful code), but as an experiment, it would be really cool. Indeed, it seems to come down to implementing a custom hot server.

from react-hot-loader.

can you show me how I could implement a custom hot server @gaearon

from react-hot-loader.

Can you describe your use case?

from react-hot-loader.

My use case will for a commenting feed where people will add comments to feeds in real time. I want to be able to ship new code and update the users' UI using HMR. If HMR is not possible at this stage, maybe live reloading all connected users' browsers might work.

from react-hot-loader.

@geekyme Technically this is possible... Some preconditions:

• Compilation (currently webpack/webpack#295) must happen on the same absolute path. (So maybe in a docker container or vm)
• You need to store records
• You need a mechanism to notify the client about updates (Maybe over an existing WebSocket connection)
• You need to implement HMR management code in your application. (Something similar to webpack/hot/dev-server but integrated with your app and update notification)
• You need to be careful about changes to a components state (because react-hot-loader keeps state). @gaearon maybe react-hot-loader should handle this. I. e. each component can export a component version. When it increases react-hot-loader should do reinit/remount the component.

from react-hot-loader.

Closing, as not really an issue.
I don't think hot reloading in prod would work because

1. React components are stateful, this works between minor updates but any non-trivial update will have some breakage.
2. There's a perf hit to using RHL because we're proxying each method. You should always turn it off in prod builds.

from react-hot-loader.

I'm having a problem where for a minority of my users, whenever I push new code, they have to hard refresh their browsers to get the new changes. Is there a way to mitigate this??

from react-hot-loader.

Well, yes. But not like React-Hot-Loader.
Please check Module Federation - it will help not only hot update some packages, chunks or modules, but also deliver the update to all customers, SSR included.

from react-hot-loader.

I’m working on a ssr example. But the repo I’ve been trying it on also streams code from s3 - adding more complex than necessary.

I’ll update my ssr example to hot reload in production. I it’s relatively trivial with module Federation and typical setups

Module Federation supplies evergreen code at runtime. Without redeployment. It’s a universal solution. And works with any module type or any file webpack can process today (images, css, loaders)

I’m also able to preserve state and context of the whole application, however replacing a module would likely require react context or the parent to hold its state. If you want the true hmr without page reloading - all you need to do is reload the interface. Interface and webpack handles the rest.

This has already been merged and pushed to npm under webpack 5 beta 16.

I’ve been quite swamped writing the feature with the webpack team and building a series of tools around it. But DM me on Twitter if you do have any questions. The main reason i wanted it was to get rid of double deploys and have the ability to share vendor code at runtime, micro frontends with no page reloads between separate apps . There’s fallbacks as each federated app can operate totally standalone. It only download dependencies the “host” or consume is not providing. And yes. It works with versioning.

My AB testing platform is adobe target, which orchestrates module federation at runtime. The AB tests are in another repo and deployed at will.

https://github.com/module-federation

from react-hot-loader.