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
+        });
     });
 }