Universal Rendering with React

[ericelliott]

My apps will need Universal Rendering.

Currently I'm looking at the option of implementing a drop-in template replacement using something like PayPal's React Engine. I think that may make the easiest integration with the way Keystone currently handles rendering.

We'll also want to look at extension points we can use to allow plugins to add to the client bootstrap data.

Open to ideas. If you have existing examples of Keystone apps with universal rendering, I'd love to see them.

• [ ] Add React template engine support to Keystone
• [ ] Add React template option to generator keystonejs/generator-keystone#97

See also https://github.com/keystonejs/keystone/issues/1897

[peterpme]

Hey @ericelliott! I have a universal implementation I've been using with Keystone. I'd be happy to throw it up an share it with you. Just give me a day to prep it for github :)

[ericelliott]

That might be useful. =)

[wmertens]

(triage) Is there still an action needed here?

[mattapperson]

@wmertens at the very least docs are needed... trying to get this working right now but its either broken or I'm missing something

[wmertens]

@mattapperson did you take a look at how https://github.com/keystonejs/keystone/blob/3709e7a6f0027a55709a24a963800ac2cf115f6d/test/server/initViewEngine.js does it?

Perhaps you can share a gist of your code?

[mattapperson]

@wmertens Yea, That gets you rendering of jsx files as templates, but it fails to load react-router routes using the ReactEngine.server.create({}) options

[dmr]

What can I do to bring react templates to keystone?

[alexhillel]

Same, universal routing and rendering functionality would be great in the core.

[peterpme]

@alexhillel I don't think that's something that would belong in the core functionality of Keystone.

The core functionality of Keystone is to provide an auto-generated admin UI for your models. React is around right now but it may not be around a year from now, right?

What you want to do is turn your keystone app into an API, then use your universal rendering boilerplate or whatever and turn on the proxy feature. Point it to your keystone route.

Don't think about this in the Keystone perspective, think about it from an webapp -> API perspective.

[alexhillel]

@peterpme The universal boilerplate at https://github.com/keystonejs/universal-keystone-boilerplate no longer npm installs due to a dependency on a keystone fork which no longer exists, which makes me question how up-to-date the repository is. Does anybody have an up-to-date implementation / can advise on a good starting point?

[peterpme]

@alexhillel I'm not saying to use that boilerplate, I'm saying to use the boilerplate YOU'RE using and turn on proxies. Like this: https://github.com/reactGo/reactGo

Then turn on the proxy and plug in your keystone url/port

[laurenskling]

For anyone looking into using React as the template engine, I've created an example repo. It uses JSX templates on backend which can be mounted on the frontend using React-Engine.

https://github.com/laurenskling/keystone-with-react-engine

Any feedback is welcome!

[internetErik]

Here is another boilerplate for universal react rendering. Comments are very welcome, as well.

https://github.com/internetErik/keystone4-universal-react

Loading data from mongo into the store before rendering on the server was a bit prickly for me. I have some improvements (from another project) that I need to port back, but they are incremental.

Right now you can see the solution in server/routes/view/index.js (where I call populateData). The populateData function is in server/data/index.js.

In my solution you essentially need to configure the populateData function to figure out what data fetching methods (also in the data folder) are needed for the current route being requested.

[robksawyer]

Starting a new project with Keystone and want to have React as the face. Are the above projects still applicable or is there something else I should be paying attention to? IMHO: At first glance https://github.com/laurenskling/keystone-with-react-engine is the most straightforward and seems to play well with existing keystone projects (with minimal setup).

[peterpme]

Why don't you make keystone an api that is consumed by next?

[JEGardner]

I created this to help me with this issue: https://github.com/JEGardner/ssr-keystonejs-create-react-app

Basically added Keystone and SSR to CRA. Not got round to testing it properly though!