React server rendering example

examples/server-rendering/README.md

@@ -0,0 +1,44 @@
+# React server rendering example
+
+This example demonstrates how React's server rendering works. Rather than demonstrate a pure-Node solution, this example shows how an app not written in JavaScript (in this case, PHP) can utilize React's server rendering capabilities.
+
+## Overview
+
+You generally start a React app by doing something like this:
+
+```javascript
+React.renderComponent(MyComponent({someData: ...}), document.getElementById('someContainer'));
+```
+
+The problem is that `someContainer` will be an empty HTML element until the JavaScript downloads and executes. This is bad for page load performance (since the user can't see anything until the JS downloads and executes) and is bad for SEO (since the Googlebot can't see any content). React's server rendering solves this problem -- it lets you fill `someContainer` with *static HTML* on the server and "bring it to life" on the client *without* throwing out and re-creating the HTML.
+
+In order to do this, you need to do a few things. You need to be able to run JavaScript on the server, and you need to be able to bundle that JavaScript code and send it down to the browser. This example provides one architecture, but there are many ways to do it.
+
+## Architecture overview
+
+Let's augment an existing PHP app to support server rendering. This architecture runs an Express-based Node web service to run the JavaScript server side. PHP simply uses `file_get_contents()` to send an HTTP request to this service to get the static HTML string.
+
+Browserify is used to run the same code that Node.js is running inside of the browser (aka "isomorphic" JavaScript).
+
+```
++-------------+       +------------------+                                              +----------------------+
+|             |       |                  |  ---- HTTP request (module, props JSON) ---> |                      |
+| The browser | <---> | Existing PHP App |                                              | Node.js react server |
+|             |       |                  |  <--- HTTP response (static HTML string) --- |                      |
++------+------+       +------------------+                                              +----------------------+
+       ^                                                                                            ^
+       |                                                                                            |
+       |              +------------------+                                              +-----------+----------+
+       |              |                  |                                              |                      |
+       +--------------+    Browserify    | <--------------------------------------------+  App code (CommonJS) |
+                      |                  |                                              |                      |
+                      +------------------+                                              +----------------------+
+```
+
+## How to run the demo
+
+  * `npm install` from `jsapp/` and `reactserver/`.
+  * Run `browserify` by doing `npm run build` inside `jsapp/`. This will generate a `webapp/static/bundle.js` file.
+  * Run the node server by doing `npm start` inside `reactserver/`.
+  * Finally, open `index.php` in your browser (on a webserver running PHP, of course). View-source to see the rendered markup.
+  * Kill the `reactserver` and reload `index.php`. You'll notice that the app still works! View-source and you'll see no rendered markup. React is smart enough to recover if server rendering doesn't work.

examples/server-rendering/jsapp/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "example-js-app",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Pete Hunt",
+  "license": "Apache 2",
+  "dependencies": {
+    "envify": "^1.2.1",
+    "react": "^0.10.0",
+    "browserify": "^3.38.0",
+    "reactify": "^0.10.0"
+  }
+}

examples/server-rendering/jsapp/src/App.js

@@ -0,0 +1,10 @@
+/** @jsx React.DOM */
+var React = require('react');
+
+var App = React.createClass({
+  render: function() {
+    return <h1>Hello {this.props.name}!</h1>;
+  }
+});
+
+module.exports = App;

examples/server-rendering/reactserver/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "react-server",
+  "version": "0.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "start": "cd ../jsapp && node ../reactserver/server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Pete Hunt",
+  "license": "Apache 2",
+  "dependencies": {
+    "envify": "^1.2.1",
+    "react": "^0.10.0",
+    "express": "^3.5.1",
+    "node-jsx": "^0.10.0"
+  }
+}

examples/server-rendering/reactserver/server.js

@@ -0,0 +1,21 @@
+var React = require('react');
+var express = require('express');
+var path = require('path');
+
+// Transparently support JSX
+require('node-jsx').install();
+
+var app = express();
+
+// All the render server does is take a CommonJS module ID and some JSON props
+// in the querystring and return a static HTML representation of the component.
+// Note that this is a backend service hit by your actual web app. Even so,
+// you would probably put Varnish in front of this in production.
+app.get('/', function(req, res){
+  var component = require(path.resolve(req.query['module']));
+  var props = JSON.parse(req.query['props'] || '{}');
+
+  res.send(React.renderComponentToString(component(props)));
+});
+
+app.listen(3000);

examples/server-rendering/webapp/index.php

@@ -0,0 +1,51 @@
+<?php
+
+// URL to the box running `node server.js`
+define('RENDER_SERVER', 'http://localhost:3000/');
+
+function react_component($module, $props) {
+  $props_json = json_encode($props);
+
+  // Try to server-render the component if the service is available.
+  // If it isn't, no big deal: the client will transparently render
+  // the markup!
+  $server_markup = @file_get_contents(
+    RENDER_SERVER .
+      '?module=' .
+      urlencode($module) .
+      '&props=' .
+      urlencode($props_json)
+  );
+
+  $container_id = uniqid();
+
+  // Generate the code required to run the component on the client.
+  // We assume that the Browserify bundle is loaded in the page already
+  // and that you used -r to get a global require() function that provides
+  // every $module you may request as well as React.
+  // Note that this solution is simple but I don't think it scales to
+  // multiple large pages very well. For that you'd be better off using
+  // webpack.
+  $startup_code =
+    '<script>require(\'react\').renderComponent(require(' . 
+    json_encode($module) .
+    ')(' . $props_json . '), ' . 
+    'document.getElementById(' . json_encode($container_id) . '))' .
+    '</script>';
+
+  $container_markup = '<div id="' . $container_id . '">' . $server_markup . '</div>';
+
+  return $container_markup . $startup_code;
+}
+?>
+
+<html>
+  <head>
+    <title>React server rendering example</title>
+    <script src="static/bundle.js"></script>
+  </head>
+  <body>
+    Welcome to the React server rendering example. Here is a server-rendered React component:
+    <?php echo react_component('./src/App', array('name' => 'Pete')); ?>
+  </body>
+</html>

examples/server-rendering/webapp/static/NOTHING_HERE_YET

@@ -0,0 +1 @@
+Nothing to see here... yet!