Update ReactGrid sample to use newer server-side rendering APIs

samples/react/ReactGrid/.babelrc

@@ -1,3 +1,3 @@
 {
-    presets: ["es2015", "react"]
+    "presets": ["es2015", "react"]
 }

samples/react/ReactGrid/ReactApp/boot-client.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import createBrowserHistory from 'history/lib/createBrowserHistory';
-import ReactApp from './components/ReactApp.jsx';
+import { browserHistory } from 'react-router';
+import { ReactApp } from './components/ReactApp.jsx';
 import 'bootstrap/dist/css/bootstrap.css';
 
 // In the browser, we render into a DOM node and hook up to the browser's history APIs
-var history = createBrowserHistory();
-ReactDOM.render(<ReactApp history={ history } />, document.getElementById('react-app'));
+ReactDOM.render(<ReactApp history={ browserHistory } />, document.getElementById('react-app'));

samples/react/ReactGrid/ReactApp/boot-server.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { match, RouterContext } from 'react-router';
+import createMemoryHistory from 'history/lib/createMemoryHistory';
+import { routes } from './components/ReactApp';
+React;
+
+export default function renderApp (params) {
+    return new Promise((resolve, reject) => {
+        // Match the incoming request against the list of client-side routes
+        match({ routes, location: params.location }, (error, redirectLocation, renderProps) => {
+            if (error) {
+                throw error;
+            }
+
+            // Build an instance of the application
+            const history = createMemoryHistory(params.url);
+            const app = <RouterContext {...renderProps} />;
+
+            // Render it as an HTML string which can be injected into the response
+            const html = renderToString(app); 
+            resolve({ html });
+        });
+    });
+}

samples/react/ReactGrid/ReactApp/components/ReactApp.jsx

@@ -3,14 +3,16 @@ import { Router, Route } from 'react-router';
 import { PeopleGrid } from './PeopleGrid.jsx';
 import { PersonEditor } from './PersonEditor.jsx';
 
-export default class ReactApp extends React.Component {
+export const routes = <Route>
+    <Route path="/" component={ PeopleGrid } />
+    <Route path="/:pageIndex" component={ PeopleGrid } />
+    <Route path="/edit/:personId" component={ PersonEditor } />    
+</Route>;
+
+export class ReactApp extends React.Component {
     render() {
         return (
-            <Router history={this.props.history}>
-                <Route path="/" component={PeopleGrid} />
-                <Route path="/:pageIndex" component={PeopleGrid} />
-                <Route path="/edit/:personId" component={PersonEditor} />
-            </Router>
+            <Router history={this.props.history} children={ routes } />
         );
     }
 }

samples/react/ReactGrid/Startup.cs

@@ -1,6 +1,6 @@
 using Microsoft.AspNet.Builder;
 using Microsoft.AspNet.Hosting;
-using Microsoft.AspNet.SpaServices;
+using Microsoft.AspNet.SpaServices.Webpack;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;

samples/react/ReactGrid/Views/Home/Index.cshtml

@@ -1,4 +1,4 @@
-<div id="react-app" asp-react-prerender-module="ReactApp/components/ReactApp.jsx"></div>
+<div id="react-app" asp-prerender-module="ReactApp/boot-server.jsx"></div>
 
 @section scripts {
     <script src="/dist/main.js"></script>

samples/react/ReactGrid/Views/_ViewImports.cshtml

@@ -1,3 +1,3 @@
 @using ReactExample
 @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
-@addTagHelper "*, Microsoft.AspNet.ReactServices"
+@addTagHelper "*, Microsoft.AspNet.SpaServices"

samples/react/ReactGrid/package.json

@@ -4,13 +4,14 @@
   "dependencies": {
     "babel-core": "^6.4.5",
     "bootstrap": "^3.3.5",
+    "domain-task": "^1.0.0",
     "formsy-react": "^0.17.0",
     "formsy-react-components": "^0.6.3",
-    "griddle-react": "^0.2.14",
+    "griddle-react": "^0.3.1",
     "history": "^1.12.6",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0",
-    "react-router": "^1.0.0-rc3",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-router": "^2.0.0-rc5",
     "underscore": "^1.8.3"
   },
   "devDependencies": {

src/Microsoft.AspNet.SpaServices/Content/Node/prerenderer.js

@@ -8,17 +8,26 @@
 // TODO: Consider some general method for checking if you have all the necessary NPM modules installed,
 // and if not, giving an error that tells you what command to execute to install the missing ones.
 var fs = require('fs');
-var ts = require('ntypescript');
+var ts = requireIfInstalled('ntypescript');
 var babelCore = require('babel-core');
 var resolveBabelRc = require('babel-loader/lib/resolve-rc'); // If this ever breaks, we can easily scan up the directory hierarchy ourselves 
 var origJsLoader = require.extensions['.js'];
 
 function resolveBabelOptions(relativeToFilename) {
     var babelRcText = resolveBabelRc(relativeToFilename);
+    try {
         return babelRcText ? JSON.parse(babelRcText) : {};
+    } catch (ex) {
+        ex.message = 'Error while parsing babelrc JSON: ' + ex.message;
+        throw ex;
+    }
 }
 
 function loadViaTypeScript(module, filename) {
+    if (!ts) {
+        throw new Error('Can\'t load .ts/.tsx files because the \'ntypescript\' package isn\'t installed.\nModule requested: ' + module);
+    }
+    
     // First perform a minimal transpilation from TS code to ES2015. This is very fast (doesn't involve type checking)
     // and is unlikely to need any special compiler options
     var src = fs.readFileSync(filename, 'utf8');
@@ -45,6 +54,19 @@ function loadViaBabel(module, filename) {
     }
 }
 
+function requireIfInstalled(packageName) {
+    return isPackageInstalled(packageName) ? require(packageName) : null;
+}
+
+function isPackageInstalled(packageName) {
+    try {
+        require.resolve(packageName);
+        return true;
+    } catch(e) {
+        return false;
+    }
+}
+
 function register() {
     require.extensions['.js'] = loadViaBabel;
     require.extensions['.jsx'] = loadViaBabel;