Boilerplate Architecture

[ninjasort]

I thought it might be good to look at the boilerplate structure/architecture in an issue. Would it be possible to describe more of what this will look like and what the process might look like for someone getting started with a keystone project?

[ericelliott]

Sure.

Server routing is handled by the component router -- which is something we could encapsulate inside Keystone. We could create a new Keystone config option that takes component routes and hooks them up similar to how it's done in source/routes/index.js:

    app.use('/', componentRouter);

Then users could define a componentRoutes module and pass it into their keystone config. That looks something like this:

import React from 'react';
import { Route } from 'react-router';
import createTeams from 'components/teams';

const Teams = createTeams(React);

export default (
  <Route path='/teams' component={ Teams }>
  </Route>
);

That is very simplified, of course, but you should get the gist. Later on, we may come up with a good pattern for managing app state with Redux, and then we may consider using Redux simple router, but it's essentially the same. Relies on react-router under the hood, either way.

[ninjasort]

Okay, what about the components themselves. Will the flux implementation be redux?

[ericelliott]

I am definitely interested in using Redux. @JedWatson has also mentioned GraphQL. It's not clear yet how we'll integrate GraphQL and manage the app state on client + server.

[ninjasort]

That would be amazing. @JedWatson what are you thinking in terms of GraphQL?

[ericelliott]

Would you like to help? I stumbled a bit yesterday. https://github.com/ericelliott/universal-keystone-boilerplate/issues/32

[ninjasort]

Sure, I can take a look.

[ninjasort]

Overall, this issue was supposed to be more about the structure of the project as a whole vs just the routing. If it's a boilerplate, where would a developer put each part of the code, and what's the workflow for how they might scale up a project?

[ericelliott]

Still working on that. For now, this project is really about adding universal routing + rendering to Keystone.

In other words, we're in the "make it work" phase. We'll worry about making it work right later. =)

[ninjasort]

Gotcha. Could we scoop anything from here

[ericelliott]

Universal routing & render have been merged into Keystone, so the component router now lives inside Keystone core.

Here's a documentation screenshot from the new Keystone.JS Getting Started guide:

Now I'm in the process of working on a standard way to supply data to the universal React components. I would love your feedback.

[joernroeder]

wow! great work! I would love to try this out. Is there any working example with universal react, es6 compiling and keystone? thx

[danielmahon]

@ericelliott what is the status of the universal react integration? Can't find this in the docs. Was it pulled? Im looking to start a small app with keystone and react, got a good starting point (even if it isnt official)?

[sebastiancarlsson]

@danielmahon did you figure this out? I would like to do the same thing