Move React server-side rendering into more general SpaServices package

samples/react/MusicStore/ReactApp/boot-server.tsx

@@ -3,34 +3,38 @@ import { Provider } from 'react-redux';
 import { renderToString } from 'react-dom/server';
 import { match, RouterContext } from 'react-router';
 import createMemoryHistory from 'history/lib/createMemoryHistory';
-React;
-
 import { routes } from './routes';
 import configureStore from './configureStore';
-import { ApplicationState }  from './store';
+React;
 
-export default function (params: any, callback: (err: any, result: { html: string, state: any }) => void) {
-    const { location } = params;
-    match({ routes, location }, (error, redirectLocation, renderProps: any) => {
-        try {
+export default function (params: any): Promise<{ html: string }> {
+    return new Promise<{ html: string, globals: { [key: string]: any } }>((resolve, reject) => {
+        // Match the incoming request against the list of client-side routes
+        match({ routes, location: params.location }, (error, redirectLocation, renderProps: any) => {
             if (error) {
                 throw error;
             }
 
+            // Build an instance of the application
             const history = createMemoryHistory(params.url);
-            const store = params.state as Redux.Store || configureStore(history);
-            let html = renderToString(
+            const store = configureStore(history);
+            const app = (
                 <Provider store={ store }>
                     <RouterContext {...renderProps} />
-                </Provider>
+                </Provider>                
             );
-            
-            // Also serialise the Redux state so the client can pick up where the server left off
-            html += `<script>window.__redux_state = ${ JSON.stringify(store.getState()) }</script>`;
-        
-            callback(null, { html, state: store });
-        } catch (error) {
-            callback(error, null);
-        }
+
+            // Perform an initial render that will cause any async tasks (e.g., data access) to begin
+            renderToString(app);
+
+            // Once the tasks are done, we can perform the final render
+            // We also send the redux store state, so the client can continue execution where the server left off
+            params.domainTasks.then(() => {
+                resolve({
+                    html: renderToString(app),
+                    globals: { initialReduxState: store.getState() }
+                });
+            }, reject); // Also propagate any errors back into the host application
+        });
     });
 }

samples/react/MusicStore/ReactApp/boot.tsx

@@ -8,8 +8,10 @@ import './styles/styles.css';
 import 'bootstrap/dist/css/bootstrap.css';
 import configureStore from './configureStore';
 import { routes } from './routes';
+import { ApplicationState }  from './store';
 
-const store = configureStore(browserHistory);
+const initialState = (window as any).initialReduxState as ApplicationState;
+const store = configureStore(browserHistory, initialState);
 
 ReactDOM.render(
     <Provider store={ store }>

samples/react/MusicStore/ReactApp/fx/render-server.js

@@ -1,54 +0,0 @@
-require('./require-ts-babel')(); // Enable loading TS/TSX/JSX/ES2015 modules
-var url = require('url');
-var domainTask = require('domain-task');
-var baseUrl = require('domain-task/fetch').baseUrl;
-
-function render(bootModulePath, absoluteRequestUrl, requestPathAndQuery, callback) {
-    var bootFunc = require(bootModulePath);
-    if (typeof bootFunc !== 'function') {
-        bootFunc = bootFunc.default;
-    }
-    if (typeof bootFunc !== 'function') {
-        throw new Error('The module at ' + bootModulePath + ' must export a default function, otherwise we don\'t know how to invoke it.')   
-    }
-    
-    var params = {
-        location: url.parse(requestPathAndQuery),
-        url: requestPathAndQuery,
-        state: undefined
-    };
-    
-    // Open a new domain that can track all the async tasks commenced during first render
-    domainTask.run(function() {
-        baseUrl(absoluteRequestUrl);
-
-        // Since route matching is asynchronous, add the rendering itself to the list of tasks we're awaiting
-        domainTask.addTask(new Promise(function (resolve, reject) {
-            // Now actually perform the first render that will match a route and commence associated tasks
-            bootFunc(params, function(error, result) {
-                if (error) {
-                    reject(error);
-                } else {
-                    // The initial 'loading' state HTML is irrelevant - we only want to capture the state
-                    // so we can use it to perform a real render once all data is loaded
-                    params.state = result.state;
-                    resolve();
-                }
-            });
-        }));
-    }, function(error) {
-        // By now, all the data should be loaded, so we can render for real based on the state now
-        // TODO: Add an optimisation where, if domain-tasks had no outstanding tasks at the end of
-        // the previous render, we don't re-render (we can use the previous html and state).
-        if (error) { console.error(error); throw error; }
-        bootFunc(params, callback);
-    });
-}
-
-render('../boot-server.tsx', 'http://localhost:5000', '/', (err, html) => {
-    if (err) {
-        throw err;
-    }
-    
-    console.log(html);
-});

samples/react/MusicStore/ReactApp/fx/require-ts-babel.js

@@ -1,44 +0,0 @@
-var fs = require('fs');
-var ts = require('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);
-    return babelRcText ? JSON.parse(babelRcText) : {};
-}
-
-function loadViaTypeScript(module, filename) {
-    // 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');
-    var compilerOptions = { jsx: ts.JsxEmit.Preserve, module: ts.ModuleKind.ES2015, target: ts.ScriptTarget.ES6 };
-    var es6Code = ts.transpile(src, compilerOptions, 'test.tsx', /* diagnostics */ []);
-    
-    // Second, process the ES2015 via Babel. We have to do this (instead of going directly from TS to ES5) because
-    // TypeScript's ES5 output isn't exactly compatible with Node-style CommonJS modules. The main issue is with
-    // resolving default exports - https://github.com/Microsoft/TypeScript/issues/2719
-    var es5Code = babelCore.transform(es6Code, resolveBabelOptions(filename)).code;
-    return module._compile(es5Code, filename);
-}
-
-function loadViaBabel(module, filename) {
-    // Assume that all the app's own code is ES2015+ (optionally with JSX), but that none of the node_modules are.
-    // The distinction is important because ES2015+ forces strict mode, and it may break ES3/5 if you try to run it in strict
-    // mode when the developer didn't expect that (e.g., current versions of underscore.js can't be loaded in strict mode).
-    var useBabel = filename.indexOf('node_modules') < 0;
-    if (useBabel) {
-        var transformedFile = babelCore.transformFileSync(filename, resolveBabelOptions(filename));
-        return module._compile(transformedFile.code, filename);
-    } else {
-        return origJsLoader.apply(this, arguments);
-    }
-}
-
-module.exports = function register() {
-    require.extensions['.js'] = loadViaBabel;
-    require.extensions['.jsx'] = loadViaBabel;
-    require.extensions['.ts'] = loadViaTypeScript;
-    require.extensions['.tsx'] = loadViaTypeScript;
-}

samples/react/MusicStore/Startup.cs

@@ -1,13 +1,9 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
 using AutoMapper;
 using Microsoft.AspNet.Authorization;
 using Microsoft.AspNet.Builder;
 using Microsoft.AspNet.Hosting;
 using Microsoft.AspNet.Identity.EntityFramework;
-using Microsoft.AspNet.SpaServices;
+using Microsoft.AspNet.SpaServices.Webpack;
 using Microsoft.Data.Entity;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;

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

@@ -2,7 +2,7 @@
     ViewData["Title"] = "Home Page";
 }
 
-<div id="react-app">Loading...</div>
+<div id="react-app" asp-prerender-module="ReactApp/boot-server"></div>
 
 @section scripts {
     <script src="/dist/vendor.bundle.js"></script>

samples/react/MusicStore/Views/_ViewImports.cshtml

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