Deployd and universal/isomorphic React app

Question

Long story short, I got this deployd "server.js"

var deployd = require('deployd');
...
var server = deployd(options);
server.listen();

And then there's a "public" folder that my React app resides in. Right now I just use the Deployd for the API to the database, but I'd like the app to be isomorphic (so search engines can index).

All examples seem to use Express or Koa for the server and Mongoose/Koa-mongo-rest for some sort of API connection, but that seems like a whole lot of work that Deployd already takes care of. I'd like to just use React for the View, Alt for the Flux and Deployd for the API/server/whatnot. But I'm really really beginner at this and can't figure out how to take a boilerplate and switch out the server. Specially with Deployd, everything that would be the "React app" would reside in the "public" directory, but to me it seems I'd need to move 1 directory higher than that and "render" the app in the Deployed server.js so that it could be isomorphic/universal. Or do I just leave the server be and just have to do something else?

Basically I don't really grasp the isomorphic rendering concept at all... ELI5, I'm not a smart man...

Edit: looks like you can run deployd as express middleware, I think I can figure out how to do that...

Answer 1

If you use deployd as an express middleware, you can use PayPal's react-engine as an express view system that renders React.

var express = require('express');
var app = express();

// create the view engine with `react-engine`
var engine = require('react-engine').server.create({
  reactRoutes: <string> /* pass in the path to react-router routes optionally */
  performanceCollector: <function> /* optional function to collect perf stats */
});

// set the engine
app.engine('.jsx', engine);

// set the view directory
app.set('views', __dirname + '/views');

// set jsx as the view engine
// Without this you would need to
// supply the extension to res.render()
// ex: res.render('index.jsx').
app.set('view engine', 'jsx');

// finally, set the custom view
app.set('view', require('react-engine/lib/expressView'));