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

Update ReactGrid sample to use newer server-side rendering APIs

Browse Source
This commit is contained in:
SteveSandersonMS
2016-02-10 12:13:24 -08:00
parent 558aa31542
commit 71cb3abc13
9 changed files with 145 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
samples/react/ReactGrid/.babelrc
View File

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

7
samples/react/ReactGrid/ReactApp/boot-client.jsx
View File

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

25
samples/react/ReactGrid/ReactApp/boot-server.jsx Normal file
View File

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

14
samples/react/ReactGrid/ReactApp/components/ReactApp.jsx
View File

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

154
samples/react/ReactGrid/Startup.cs
View File

@@ -1,77 +1,77 @@
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Hosting;
using Microsoft.AspNet.SpaServices;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.PlatformAbstractions;
namespace ReactExample
{
public class Startup
{
public Startup(IHostingEnvironment env, IApplicationEnvironment appEnv)
{
// Setup configuration sources.
var builder = new ConfigurationBuilder()
.SetBasePath(appEnv.ApplicationBasePath)
.AddJsonFile("appsettings.json")
.AddEnvironmentVariables();
Configuration = builder.Build();
}
public IConfigurationRoot Configuration { get; set; }
// This method gets called by the runtime.
public void ConfigureServices(IServiceCollection services)
{
// Add MVC services to the services container.
services.AddMvc();
}
// Configure is called after ConfigureServices is called.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.MinimumLevel = LogLevel.Warning;
loggerFactory.AddConsole();
loggerFactory.AddDebug();
// Configure the HTTP request pipeline.
// Add the platform handler to the request pipeline.
app.UseIISPlatformHandler();
// Add the following to the request pipeline only in development environment.
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
// Add Error handling middleware which catches all application specific errors and
// send the request to the following path or controller action.
app.UseExceptionHandler("/Home/Error");
}
// In dev mode, the JS/TS/etc is compiled and served dynamically and supports hot replacement.
// In production, we assume you've used webpack to emit the prebuilt content to disk.
if (env.IsDevelopment()) {
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
HotModuleReplacement = true,
ReactHotModuleReplacement = true
});
}
// Add static files to the request pipeline.
app.UseStaticFiles();
// Add MVC to the request pipeline.
app.UseMvc(routes =>
{
routes.MapSpaFallbackRoute(
name: "default",
defaults: new { controller="Home", action = "Index" });
});
}
}
}
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Hosting;
using Microsoft.AspNet.SpaServices.Webpack;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.PlatformAbstractions;
namespace ReactExample
{
public class Startup
{
public Startup(IHostingEnvironment env, IApplicationEnvironment appEnv)
{
// Setup configuration sources.
var builder = new ConfigurationBuilder()
.SetBasePath(appEnv.ApplicationBasePath)
.AddJsonFile("appsettings.json")
.AddEnvironmentVariables();
Configuration = builder.Build();
}
public IConfigurationRoot Configuration { get; set; }
// This method gets called by the runtime.
public void ConfigureServices(IServiceCollection services)
{
// Add MVC services to the services container.
services.AddMvc();
}
// Configure is called after ConfigureServices is called.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.MinimumLevel = LogLevel.Warning;
loggerFactory.AddConsole();
loggerFactory.AddDebug();
// Configure the HTTP request pipeline.
// Add the platform handler to the request pipeline.
app.UseIISPlatformHandler();
// Add the following to the request pipeline only in development environment.
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
// Add Error handling middleware which catches all application specific errors and
// send the request to the following path or controller action.
app.UseExceptionHandler("/Home/Error");
}
// In dev mode, the JS/TS/etc is compiled and served dynamically and supports hot replacement.
// In production, we assume you've used webpack to emit the prebuilt content to disk.
if (env.IsDevelopment()) {
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
HotModuleReplacement = true,
ReactHotModuleReplacement = true
});
}
// Add static files to the request pipeline.
app.UseStaticFiles();
// Add MVC to the request pipeline.
app.UseMvc(routes =>
{
routes.MapSpaFallbackRoute(
name: "default",
defaults: new { controller="Home", action = "Index" });
});
}
}
}

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

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

2
samples/react/ReactGrid/Views/_ViewImports.cshtml
View File

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

9
samples/react/ReactGrid/package.json
View File

@@ -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": {

26
src/Microsoft.AspNet.SpaServices/Content/Node/prerenderer.js
View File

@@ -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);
return babelRcText ? JSON.parse(babelRcText) : {};
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;