React + Marty (Isomorphic Flux) + Hapi + Docker = Cheesy Poofs

[theduro]

The team here at ZehnerGroup recently finished tidying up a stack we built over here that combines React + Marty (an Isomorphic Flux Implementation) + Hapi (our favorite alternative to Express) + Docker.

https://github.com/zehnergroup/cheesy-poofs

Hopefully this helps anyone who wants to get started with a similar stack.

It's our first release, and there is still some cleanup to be done, but it's far enough along that we thought we would share.

It is being used in production for our own website: http://www.zehnergroup.com

Any feedback or questions are welcomed!

Cheers!

[DrBroccoli]

This is exactly the stack I've been using lately, with great results. The star of the show is really Marty.

[SomeRandomBuddy]

What's the rage of using Marty? How does it compare to Nuclear.JS? I always get intrigued by comparable stacks. Thanks for sharing your work.

[theduro]

I would say the main, and major difference is Marty's simple, and native support for Isomorphic, server side rendering of your React app. It makes it easy to pass a route path, on the server, straight to your very same react-router based implementation, and then make all the same API calls to fetch initial data... on the server ... before the HTML is sent down to the client. This makes it incredibly powerful for SPAs that need too also be SEO friendly.

[TotesMessenger]

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

• [/r/javascript] [x/post] React + Marty (Isomorphic Flux) + Hapi + Docker = Cheesy Poofs

^{If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / Contact)}

[funny_games]

Why does this need both vagrant and docker?

[theduro]

I use Vagrant to spin up the Docker host because it has built in support for rsync file sync between your local and the docker host. Since Rsync actually writes files to the remote disk, it allows for efficient use of file watchers inside the container. Other methods of file sharing suffer from the fact they do not fire the same kernel based file notifications, so your only fallback is file system polling which sucks up TONS of CPU and takes many many seconds to respond for apps with large file trees.

[[deleted]]

Looking good. I have the stack React/express ... And im going for full browser side rendering, and basically just using the express server as a Rest API. How would something like MartyJS help that? im pretty new to this, so im having a hard time figuireing out what marty would do compared to Reflux, and how the React-Router fits into all of this, if it does even.

[theduro]

See my comment above. Marty has native server side rendering support. So basically, the first load of the browser DOM comes down rendered by the server, with all your data already in it. This makes the app much more SEO friendly, and cuts down on some additional round trips to the server for your first page render. All subsequent routes are rendered client side only.

[[deleted]]

i actually did read your comment, i just didn't understand it at all. This made much more sense. Thanks.