Hot Reloading

[johnbrett]

Hey @atroo, great work on this plugin.

I'm trying to get hot loading working with it, to create something like: https://github.com/gaearon/react-transform-boilerplate

As far as I can understand the missing piece to integrate is: https://github.com/glenjamin/webpack-hot-middleware (well after it's converted to hapi)

Any advice on where to start with this, or have you made much progress yourself ??

[de-robat]

Hello @johnbrett ,

Basically I did remove everything which was related to hot replacement when I implemented this plugin. That’s not because hot replacement isn't an awesome feature, but because I had some time constraints to get it up and running for a project and simple reloading was sufficient. I’m glad you want to implement this feature and would love to be of the best assistance I could be at this moment.

The hapi plugin is based on the original webpack-dev-middleware for express https://github.com/webpack/webpack-dev-server . Now i just adapted the express way to the hapi way. It consist of two parts, first of all the Server-Side which compiles and delivers, and second of all the Client-Side which host the frame app an manages every kind of reloading. As far as I can see, the difference between hot-replacement and app reloading is only the way code is injected into the Client-Side.

If you check the original project here is how it maps to the hapi plugin:

The backend

• /lib ^= /src
• /lib/Server.js ^= /src/plugin.js and /src/pluginutil.js --> so here you find everything which deals with the compilation and here you would have to check for all the places where the "hot" option is used in the original webpack-dev-middleware and reintroduce them to the hapi plugin

The frontend

• The client directory maps almost 1 to 1 to the plugins client directory - i did not change too much here it should still support the hot replacement mode

As far as I can understand the missing piece to integrate is:
https://github.com/glenjamin/webpack-hot-middleware (well after it's converted to hapi)

From my point of view you don't need this. This seems to be simply for integrating the webpack-hot-replacment into an existing express server as it states:

... This allows you to add hot reloading into an existing server without webpack-dev-server.

All you'd have to do is: enable the hot mode again, sending the "hot" message to the client and check if everything flows as it is intended to :)

You can fork this repo and start working on it, if you get stuck just text me and i'll have a look at your fork,

[johnbrett]

Hey @de-robat, many thanks for the in depth description here - I've got caught timewise on trying to implement this, so haven't made much progress (there's a LOT of code to get through!), just wanted to say I very appreciated the response and hope to get trying to finish this soon!!

[legomind]

+1 for this feature.
Proxying to an express server feels so hacky.
I would be happy to test when the time comes.

[yotamberk]

What's the status of this enhancement?

[de-robat]

Unfortuneatley none. We have altered our DEV-Setup a little so that the server and webpack process are seperated (makes restarting the server faster while developing the api) as described here: www.atroo.net/hapi-js-webpack-and-react-router-with-history-api/

Thus our need for the hot loading of the plugin has droped in significance for us quite a bit because the hot reloading is working in the other setup.

I'd be glad to review any attempts of you thoug and integrate them into the plugin if you want to.

[yotamberk]

Thanks for the quick response! What other setup does the got reload work?

[de-robat]

The one we've described in the link i added to my original reply.