Ratpack with React hot loader support

classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|

Ratpack with React hot loader support

gschrader
So I wanted to be able to use my favourite backend server (Ratpack of course!) with my new favourite frontend library React. So I've threw together boilerplate project at https://github.com/gschrader/ratpack-react-boilerplate. It's a little messy with the two handlers for the index template and of course all the npm dependencies however it does work.

Hopefully this will help anyone else interested in React, comments and suggestions are welcome.

Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

danhyun
That's great!

Thanks for sharing! I'm sure others will find this useful.
Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

gschrader
In reply to this post by gschrader
I've updated both the front-end and backend on this project. Having used this in the real world for a bit I'm a big fan of the hot reloading as it increases productivity a lot. I still wonder how this could all tie into the asset pipeline project if at all possible.

I think there is potential to add greater support for server side rendering (ala nashorn) and simplfy the node server in development mode.

I still would love to hear some feedback, I'm hoping I'm not the only soul doing the ratpack/react development, it really is the best of both worlds.
Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

Luke Daley
Administrator
Hi,


I’ve just started using React with Ratpack myself. I’ll be trying to leverage your work sometime very soon and should have feedback then. 

Thanks for sharing. I’m looking forward to using it.
Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

gschrader
Sounds great, I've been thinking more about this and think I should probably add to it.  I think at the very least it should have a flux framework (probably redux) and have it transfer state from ratpack to the flux store, (REST, websockets, SSE) That will make it less minimal and more opinionated however it will make it a more complete useful example.
Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

Massimo Lusetti
In reply to this post by gschrader
Nashorn integration is cool but is not production ready at all.
The best way to integrate a non trivial app for server side rendering still node. Anything else is not worth it.

Your boilerplate project is great in the sense it use the right tool for the right job.
Keep js in node is the right path, IMHO.
Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

gschrader
I think you're right, at least based on the little bit of playing around I did with it.  It did work but was pretty slow so I'm not sure if I had everything right or if that's typical, either way I agree to leave it in node for now.
Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

gschrader
I've updated all the dependencies in this project again. I've also added initial authentication with jwt and added the basis of a SPA with router/redux etc. I found the pac4j jwt a little tricky to get setup (which I don't have all correct yet) since it seems to still require a ratpack session (i.e. SessionModule). I don't really think jwt should require a session as the token should be passed on each request instead, so I kind of bypassed a lot of it for now. Initially the monitor link is secured and will present a login dialog once clicked on. The monitor link will collect jvm stats from a websocket from ratpack and update itself.
Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

gschrader
Looks like I need pac4j direct client support in order to auth cleaner using a rest call, I tried to work around it a bit by using the form client but it ends up being really messy.
Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

gschrader
I have figured out the jwt support and I think it works really well.
Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

durbinjo593
Care to share the project. I'm interested in seeing what you came up with...
Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

gschrader
@durbinjo593 it's already on github
Reply | Threaded
Open this post in threaded view
|

Re: Ratpack with React hot loader support

gschrader
In reply to this post by gschrader
One more update to this project. I've converted it to use create-react-app so that I don't have to try to figure out all the babel/webpack configuration anymore. I also split it into a multi-project gradle build so that the ratpack and the react code is separate.

One disadvantage to this is the hot-reloading isn't quite as slick, it's on their radar to add that support though.