Skip to content
This repository has been archived by the owner on Nov 24, 2021. It is now read-only.

Add ReactJS as Template Rendering Option #97

Open
mgan59 opened this issue Feb 14, 2015 · 19 comments
Open

Add ReactJS as Template Rendering Option #97

mgan59 opened this issue Feb 14, 2015 · 19 comments

Comments

@mgan59
Copy link
Contributor

mgan59 commented Feb 14, 2015

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
Copy link

TexRx commented Feb 14, 2015

@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
Copy link
Contributor Author

mgan59 commented Feb 16, 2015

@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
Copy link
Contributor Author

mgan59 commented Feb 16, 2015

@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
Copy link
Contributor

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
Copy link
Contributor Author

mgan59 commented Sep 15, 2015

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 [email protected]
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
#97 (comment)
.

@peterpme
Copy link
Contributor

@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
Copy link
Contributor Author

mgan59 commented Sep 20, 2015

@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
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor

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

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
Copy link

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

@ericelliott
Copy link
Contributor

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

@mattapperson
Copy link

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

@mxstbr
Copy link
Contributor

mxstbr commented Aug 18, 2016

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
Copy link
Contributor

backbone :-(

@mgan59
Copy link
Contributor Author

mgan59 commented Aug 18, 2016

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 -- #128

@mgan59
Copy link
Contributor Author

mgan59 commented Aug 18, 2016

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
Copy link

Hey folks, any updates on this?

@svashisth07
Copy link

how can i use isomorphic react component with keystone

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests