github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move React server-side rendering into more general SpaServices package

Browse Source
This commit is contained in:
SteveSandersonMS
2016-02-09 16:42:42 -08:00
parent b35ac19485
commit 6c903f33ae
16 changed files with 225 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
samples/react/MusicStore/ReactApp/boot-server.tsx
View File

@@ -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>
);
// 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>`;
// Perform an initial render that will cause any async tasks (e.g., data access) to begin
renderToString(app);
callback(null, { html, state: store });
} catch (error) {
callback(error, null);
}
// 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
});
});
}

4
samples/react/MusicStore/ReactApp/boot.tsx
View File

@@ -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 }>

54
samples/react/MusicStore/ReactApp/fx/render-server.js
View File

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

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

@@ -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;
}

6
samples/react/MusicStore/Startup.cs
View File

@@ -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;

2
samples/react/MusicStore/Views/Home/Index.cshtml
View File

@@ -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>

1
samples/react/MusicStore/Views/_ViewImports.cshtml
View File

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

2
src/Microsoft.AspNet.NodeServices/Content/Node/entrypoint-http.js
View File

@@ -4,7 +4,7 @@ var http = require('http');
var path = require('path');
var requestedPortOrZero = parseInt(process.argv[2]) || 0; // 0 means 'let the OS decide'
autoQuitOnFileChange(process.cwd(), ['.js', '.json', '.html']);
autoQuitOnFileChange(process.cwd(), ['.js', '.jsx', '.ts', '.tsx', '.json', '.html']);
var server = http.createServer(function(req, res) {
readRequestBodyAsJson(req, function(bodyJson) {

24
src/Microsoft.AspNet.ReactServices/ReactRenderer.cs
View File

@@ -1,24 +0,0 @@
using System.Threading.Tasks;
using Microsoft.AspNet.NodeServices;
namespace Microsoft.AspNet.ReactServices
{
public static class ReactRenderer
{
private static StringAsTempFile nodeScript;
static ReactRenderer() {
// Consider populating this lazily
var script = EmbeddedResourceReader.Read(typeof (ReactRenderer), "/Content/Node/react-rendering.js");
nodeScript = new StringAsTempFile(script); // Will be cleaned up on process exit
}
public static async Task<string> RenderToString(INodeServices nodeServices, string componentModuleName, string componentExportName, string requestUrl) {
return await nodeServices.InvokeExport<string>(nodeScript.FileName, "renderToString", new {
moduleName = componentModuleName,
exportName = componentExportName,
requestUrl = requestUrl
});
}
}
}

135
src/Microsoft.AspNet.SpaServices/Content/Node/prerenderer.js Normal file
View File

@@ -0,0 +1,135 @@
// -----------------------------------------------------------------------------------------
// Prepare the Node environment to support loading .jsx/.ts/.tsx files without needing precompilation,
// since that's such a common scenario. In the future, this might become a config option.
// This is bundled in with the actual prerendering logic below just to simplify the initialization
// logic (we can't have cross-file imports, because these files don't exist on disk until the
// StringAsTempFile utility puts them there temporarily).
// 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 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);
}
}
function register() {
require.extensions['.js'] = loadViaBabel;
require.extensions['.jsx'] = loadViaBabel;
require.extensions['.ts'] = loadViaTypeScript;
require.extensions['.tsx'] = loadViaTypeScript;
};
register();
// -----------------------------------------------------------------------------------------
// Rendering
var url = require('url');
var path = require('path');
var domain = require('domain');
var domainTask = require('domain-task');
var baseUrl = require('domain-task/fetch').baseUrl;
function findBootFunc(bootModulePath, bootModuleExport) {
var resolvedPath = path.resolve(process.cwd(), bootModulePath);
var bootFunc = require(resolvedPath);
if (bootModuleExport) {
bootFunc = bootFunc[bootModuleExport];
} else if (typeof bootFunc !== 'function') {
bootFunc = bootFunc.default; // TypeScript sometimes uses this name for default exports
}
if (typeof bootFunc !== 'function') {
if (bootModuleExport) {
throw new Error('The module at ' + bootModulePath + ' has no function export named ' + bootModuleExport + '.');
} else {
throw new Error('The module at ' + bootModulePath + ' does not export a default function, and you have not specified which export to invoke.');
}
}
return bootFunc;
}
function renderToString(callback, bootModulePath, bootModuleExport, absoluteRequestUrl, requestPathAndQuery) {
var bootFunc = findBootFunc(bootModulePath, bootModuleExport);
// Prepare a promise that will represent the completion of all domain tasks in this execution context.
// The boot code will wait for this before performing its final render.
var domainTaskCompletionPromiseResolve;
var domainTaskCompletionPromise = new Promise(function (resolve, reject) {
domainTaskCompletionPromiseResolve = resolve;
});
var params = {
location: url.parse(requestPathAndQuery),
url: requestPathAndQuery,
domainTasks: domainTaskCompletionPromise
};
// Open a new domain that can track all the async tasks involved in the app's execution
domainTask.run(function() {
// Workaround for Node bug where native Promise continuations lose their domain context
// (https://github.com/nodejs/node-v0.x-archive/issues/8648)
bindPromiseContinuationsToDomain(domainTaskCompletionPromise, domain.active);
// Make the base URL available to the 'domain-tasks/fetch' helper within this execution context
baseUrl(absoluteRequestUrl);
// Actually perform the rendering
bootFunc(params).then(function(successResult) {
callback(null, { html: successResult.html, globals: successResult.globals });
}, function(error) {
callback(error, null);
});
}, function allDomainTasksCompleted(error) {
// There are no more ongoing domain tasks (typically data access operations), so we can resolve
// the domain tasks promise which notifies the boot code that it can do its final render.
if (error) {
callback(error, null);
} else {
domainTaskCompletionPromiseResolve();
}
});
}
function bindPromiseContinuationsToDomain(promise, domainInstance) {
var originalThen = promise.then;
promise.then = function then(resolve, reject) {
if (typeof resolve === 'function') { resolve = domainInstance.bind(resolve); }
if (typeof reject === 'function') { reject = domainInstance.bind(reject); }
return originalThen.call(this, resolve, reject);
};
}
module.exports.renderToString = renderToString;

34
src/Microsoft.AspNet.ReactServices/ReactPrerenderTagHelper.cs → src/Microsoft.AspNet.SpaServices/Prerendering/PrerenderTagHelper.cs
View File

@@ -1,19 +1,22 @@
using System;
using System.Text;
using System.Threading.Tasks;
using Microsoft.AspNet.Http;
using Microsoft.AspNet.Http.Extensions;
using Microsoft.AspNet.NodeServices;
using Microsoft.AspNet.Razor.TagHelpers;
using Microsoft.Extensions.PlatformAbstractions;
using Newtonsoft.Json;
namespace Microsoft.AspNet.ReactServices
namespace Microsoft.AspNet.SpaServices.Prerendering
{
[HtmlTargetElement(Attributes = PrerenderModuleAttributeName)]
public class ReactPrerenderTagHelper : TagHelper
public class PrerenderTagHelper : TagHelper
{
static INodeServices fallbackNodeServices; // Used only if no INodeServices was registered with DI
const string PrerenderModuleAttributeName = "asp-react-prerender-module";
const string PrerenderExportAttributeName = "asp-react-prerender-export";
const string PrerenderModuleAttributeName = "asp-prerender-module";
const string PrerenderExportAttributeName = "asp-prerender-export";
[HtmlAttributeName(PrerenderModuleAttributeName)]
public string ModuleName { get; set; }
@@ -24,7 +27,7 @@ namespace Microsoft.AspNet.ReactServices
private IHttpContextAccessor contextAccessor;
private INodeServices nodeServices;
public ReactPrerenderTagHelper(IServiceProvider serviceProvider, IHttpContextAccessor contextAccessor)
public PrerenderTagHelper(IServiceProvider serviceProvider, IHttpContextAccessor contextAccessor)
{
this.contextAccessor = contextAccessor;
this.nodeServices = (INodeServices)serviceProvider.GetService(typeof (INodeServices)) ?? fallbackNodeServices;
@@ -40,12 +43,27 @@ namespace Microsoft.AspNet.ReactServices
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
var request = this.contextAccessor.HttpContext.Request;
var result = await ReactRenderer.RenderToString(
var result = await Prerenderer.RenderToString(
nodeServices: this.nodeServices,
componentModuleName: this.ModuleName,
componentExportName: this.ExportName,
requestUrl: request.Path + request.QueryString.Value);
output.Content.SetHtmlContent(result);
requestAbsoluteUrl: UriHelper.GetEncodedUrl(this.contextAccessor.HttpContext.Request),
requestPathAndQuery: request.Path + request.QueryString.Value);
output.Content.SetHtmlContent(result.Html);
// Also attach any specific globals to the 'window' object. This is useful for transferring
// general state between server and client.
if (result.Globals != null) {
var stringBuilder = new StringBuilder();
foreach (var property in result.Globals.Properties()) {
stringBuilder.AppendFormat("window.{0} = {1};",
property.Name,
property.Value.ToString(Formatting.None));
}
if (stringBuilder.Length > 0) {
output.PostElement.SetHtmlContent($"<script>{ stringBuilder.ToString() }</script>");
}
}
}
}
}

32
src/Microsoft.AspNet.SpaServices/Prerendering/Prerenderer.cs Normal file
View File

@@ -0,0 +1,32 @@
using System;
using System.Threading.Tasks;
using Microsoft.AspNet.NodeServices;
using Newtonsoft.Json.Linq;
namespace Microsoft.AspNet.SpaServices.Prerendering
{
public static class Prerenderer
{
private static Lazy<StringAsTempFile> nodeScript;
static Prerenderer() {
nodeScript = new Lazy<StringAsTempFile>(() => {
var script = EmbeddedResourceReader.Read(typeof(Prerenderer), "/Content/Node/prerenderer.js");
return new StringAsTempFile(script); // Will be cleaned up on process exit
});
}
public static async Task<RenderToStringResult> RenderToString(INodeServices nodeServices, string componentModuleName, string componentExportName, string requestAbsoluteUrl, string requestPathAndQuery) {
return await nodeServices.InvokeExport<RenderToStringResult>(nodeScript.Value.FileName, "renderToString",
/* bootModulePath */ componentModuleName,
/* bootModuleExport */ componentExportName,
/* absoluteRequestUrl */ requestAbsoluteUrl,
/* requestPathAndQuery */ requestPathAndQuery);
}
}
public class RenderToStringResult {
public string Html;
public JObject Globals;
}
}

0
src/Microsoft.AspNet.SpaServices/SpaRouteConstraint.cs → src/Microsoft.AspNet.SpaServices/Routing/SpaRouteConstraint.cs
View File

0
src/Microsoft.AspNet.SpaServices/SpaRouteExtensions.cs → src/Microsoft.AspNet.SpaServices/Routing/SpaRouteExtensions.cs
View File

2
src/Microsoft.AspNet.SpaServices/WebpackDevMiddleware.cs → src/Microsoft.AspNet.SpaServices/Webpack/WebpackDevMiddleware.cs
View File

@@ -3,7 +3,7 @@ using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNet.NodeServices;
using Microsoft.AspNet.Proxy;
using Microsoft.AspNet.SpaServices;
using Microsoft.AspNet.SpaServices.Webpack;
using Microsoft.Extensions.PlatformAbstractions;
using Newtonsoft.Json;

2
src/Microsoft.AspNet.SpaServices/WebpackDevMiddlewareOptions.cs → src/Microsoft.AspNet.SpaServices/Webpack/WebpackDevMiddlewareOptions.cs
View File

@@ -1,4 +1,4 @@
namespace Microsoft.AspNet.SpaServices {
namespace Microsoft.AspNet.SpaServices.Webpack {
public class WebpackDevMiddlewareOptions {
public bool HotModuleReplacement { get; set; }
public bool ReactHotModuleReplacement { get; set; }