CODEWITHSUNDEEP
resolvejs
bitflorist
bitflorist

Reputation: 603

Reimagined resolve with react also with hot reload?

Anyone already used https://reimagined.github.io/resolve/ and got hot reload for react working?

Cheers

-raf

Upvotes: 2

Views: 67

Answers (1)

Vladislav Ihost
Vladislav Ihost

Reputation: 2187

TL;DR
This small DIFF (3 files) for the HackerNews example application illustrates how to implement the simplest HMR:
* On Diffy: https://diffy.org/diff/kgfz1h97zr9sisxcfkb0m5cdi
* Permalink: https://pastebin.com/hv87aquw 

hacker-news/client/hmr.js
hacker-news/client/index.js    
hacker-news/config.app.js

Complete answer:
Although the reSolve framework’s examples mostly use React, it is up to you how you implement the frontend, so you can implement custom logic to support hot reloading.

Also, note that the reSolve framework supports automatic rebuilding of server bundles and custom client sources specified in the application config as in the following code sample:

https://github.com/reimagined/resolve/blob/master/examples/hacker-news/config.app.js#L49-L67

So, you can take one of the following two approaches to implement hot reloading in your reSolve-based application:

1) Implement an SSR renderer for your application, like in this example: https://github.com/reimagined/resolve/blob/master/examples/hacker-news/client/ssr.js. You can even use a simplified version of this file containing only imports - it will suffice for the task. The main point is that this SSR renderer is rebuilt automatically after any of UI source files is changed, which you can use as an indication of file changes. On the client side, you can send long-polling requests to this handler and invoke page reloading on a change.

2) Generate a fully custom frontend using a builder that provides hot reloading out-of-the-box (for example, create-react-app), and link that frontend to your reSolve application as in the following example:

https://github.com/reimagined/resolve/tree/master/examples/with-vanillajs

Upvotes: 2

Related Questions