Isomorphic JavaScript Server Logic Example

ssr.js

/*
 * Rendering our component server side
 */
var React = require('react');
var App = require('../lib/components/todo-item');
var data = { title: 'Hello world!' };

var renderedComponent = ReactDOMServer.renderToString(<App data={data} />);


/*
 * Injecting the rendered component in the Handlebars template
 */
var Handlebars = require('handlebars');
var fs = require('fs');

var fileData = fs.readFileSync(__dirname + '/templates/layout.handlebars').toString();
var layoutTemplate = Handlebars.compile(fileData);

var renderedLayout = layoutTemplate({
  content: renderedComponent
});


/*
 * Serving up the rendered template
 */
var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send(renderedLayout);
});


/*
 * NOTE: This route is last since we want to match the dynamic routes above
 * first before attempting to match a static resource (js/css/etc)
 */
app.use(express.static('./public'));

app.listen(6789, function() {
  console.log('Listening on port 6789');
});