atroo / hapi-webpack-dev-server-plugin

A plugin for hapijs providing the necessary routes to function as a webpack-dev-server
22 stars 5 forks source link

Hot Reloading #3

Open johnbrett opened 8 years ago

johnbrett commented 8 years ago

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 commented 8 years ago

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

The frontend

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 commented 8 years ago

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 commented 8 years ago

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

yotamberk commented 7 years ago

What's the status of this enhancement?

de-robat commented 7 years ago

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 commented 7 years ago

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

de-robat commented 7 years ago

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