Add ReactJS as Template Rendering Option

[mgan59]

Was thinking of working on a patch to add ReactJS as a template engine.

Proposed Areas of work.

• Setup the Template Renderer for Reactjs in Express
  • Allow for ReactJS to render server-side and respond with html for SEO
• Port Default KeystoneJS Theme to ReactJS
  • Define some basic reactjs application theme layout should consist of components folder and port the html from the themes into a reactjs app. I'd probably look to port from the handlebars theme.
  • Consider making Theme isomorphic
• Build Tooling
  • Gulp + Browserify FTW!
  • Grunt (do we have to support it?)

Anyone have thoughts/comment/suggestions?

[TexRx]

@mgan59 +1 -- how can I help with this? Wanna fork it and work together on it? Whatever you want - any way I can help, count me in.

[mgan59]

@askesian I did some initial r&d. Found this express-react-views which after generating a fresh jade/keystone project I changed the init in the keystone.js file to

keystone.init({

    'name': 'My Site',
    'brand': 'My Site',

    'less': 'public',
    'static': 'public',
    'favicon': 'public/favicon.ico',
    'views': 'templates/components',
    // use .jsx engine
    'view engine': 'jsx',
    'custom engine': require('express-react-views').createEngine(),

    'emails': 'templates/emails',

    'auto update': true,
    'session': true,
    'auth': true,
    'user model': 'User',

});

I was then able to to stub in a posts.jsx and index.jsx file that just had simple renders

var React = require('react');

var Index = React.createClass({
    render: function() {
      return (<p>Hello Index</p>);
    }

});

module.exports = Index;

So the express-react-views only does server-side rendering which I think is a great start.

[mgan59]

@askesian @JedWatson

Started work on react engine integration view compare. Have a basic working version with basic template stubs for index and post views. Need to port markup over from a template. But if anyone wants to just generate a keystone project with react enabled on the server-side this should suffice.

[peterpme]

It looks like this has stalled a bit. @mgan59 are you still interested in merging your PR? If not, I will take over from here.

[mgan59]

I've completed more of this and have the default template ported except for gallery. Just hadn't had a chance to open a or for all the work. Will follow up shortly.

On Monday, September 14, 2015, Peter Piekarczyk notifications@github.com wrote:

It looks like this has stalled a bit. @mgan59 https://github.com/mgan59 are you still interested in merging your PR? If not, I will take over from here.

— Reply to this email directly or view it on GitHub https://github.com/keystonejs/generator-keystone/issues/97#issuecomment-140228697 .

[peterpme]

@mgan59 do you mind sharing a link with your work even if it's not complete? I'm going down the react-engine path as well

[mgan59]

@ppiekarczyk @JedWatson I rebased my work off the latest on master and opened up a pr/128 on the generator repo. It is not quite feature complete, I noted in the overview the few things that are still missing. The pr is getting large so not sure if there is an MVP we can hit to close off the first run for a merge? Or do we want to keep it up till it is feature complete with the other templates. Happy to help close out the work, just didn't seem there was interest so I had sorta moved forward with porting some projects over using what I had built out from the prototype.

[peterpme]

Hey @mgan59 , great work! I'm glad someone is making this happen.

I started thinking about the Keystone/Mongoose relationship a bit and I think I have a cool idea. Let me try to figure out how to get this thing wired up without too much copy pasta and I'll post it here

[JedWatson]

Hey @ppiekarczyk @mgan59 I just wanted to jump in with some support here, I've been very focused on getting Keystone's transition to React in the Admin UI complete but am happy to help get this over the line as well. I've seen a lot of interest in how to transition "old school" Keystone projects to client-side projects w/ React & Angular, it would be great to land support for it.

[peterpme]

Hey @JedWatson I can help educate the Keystone community now that I've got more and more free time again :tada:

I put together a simple Universal JS / Keystone project together this weekend. It's not ready for public consumption but I've got a few ideas on how to simplify it.

[biznickman]

Any update on this front? Would love to see this as an option

[ericelliott]

I'm working on this right now: https://github.com/keystonejs/keystone/issues/1943. It's on the top of my priorities list.

[mattapperson]

Is this still active? Anyone care to jot down a quick to-do list of what needs to be done yet?

[mxstbr]

Not active at the moment, but this is getting more and more likely. We want to rework the entire generator, and instead of asking "Do you want to use Sass, Less or Stylus" we should be asking "Do you want to use React, Backbone or Angular"!

This will be a massive undertaking, so no guarantees as of when and if this will ever happen though. 😊 Definitely something in the back of our minds!

[morenoh149]

backbone :-(

[mgan59]

For some reason I wasn't getting some of these notifications. The work was started and has been sort WIP for the last year or so, I took it most of the way, just the Gallery needs implemented as part of the buildout.

I had an opened PR, it is now out of date, I checked my local machine and I have a rebased branch from that May as indicated in the comments. I'll make an effort to pick this up again tonight and get us at least stable on this branch so others could jump in and help get it across the finish line.

The work itself is in the generator code base -- https://github.com/keystonejs/generator-keystone/pull/128

[mgan59]

Just checked my local git log, and the most recent commits are on that PR, which means there are new merge conflicts. I can fetch upstream and rebase to get it at least stable for a merge again.

Cheers!

[FernandoBoza]

Hey folks, any updates on this?

[svashisth07]

how can i use isomorphic react component with keystone