server rendering supports, resolved #68

hzspeed · Apr 5, 2016 · 0e60c18 · 0e60c18
1 parent 77c1adb
commit 0e60c18
Show file tree

Hide file tree

Showing 40 changed files with 1,056 additions and 43 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -6,7 +6,7 @@
         content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
   <meta charset="UTF-8">
   <title>Amaze UI React Examples</title>
-  <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.5.0/css/amazeui.min.css"/>
+  <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.6.0/css/amazeui.min.css"/>
 </head>
 <body class="am-padding">
   <h2>Amaze UI React Examples</h2>

diff --git a/examples/server-rendering/.babelrc b/examples/server-rendering/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ]
+}
diff --git a/examples/server-rendering/README.md b/examples/server-rendering/README.md
@@ -0,0 +1,10 @@
+# Amaze UI React 组件后端渲染示例
+
+查看方式：
+
+```
+cd examples/server-rendering
+npm install
+npm start
+open http://localhost:2046
+```
diff --git a/examples/server-rendering/client/entry.js b/examples/server-rendering/client/entry.js
@@ -0,0 +1,7 @@
+'use strict';
+
+import React from 'react';
+import {render} from 'react-dom';
+import routes from '../shared/routes';
+
+render(routes, document.getElementById('root'));
diff --git a/examples/server-rendering/nodemon.json b/examples/server-rendering/nodemon.json
@@ -0,0 +1,4 @@
+{
+  "verbose": true,
+  "ignore": ["client/**/*", "public/**/*"]
+}
diff --git a/examples/server-rendering/package.json b/examples/server-rendering/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "amazeui-react-server-rendering",
+  "version": "0.0.0",
+  "description": "Just another Amaze UI React example.",
+  "main": "index.js",
+  "scripts": {
+    "dev": "nodemon run.js",
+    "start": "node run.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.13.4",
+    "react": "^0.14.8",
+    "react-dom": "^0.14.8",
+    "react-router": "^2.0.1",
+    "serve-static": "^1.10.2"
+  },
+  "devDependencies": {
+    "babel-core": "^6.7.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-register": "^6.7.2",
+    "webpack": "^1.12.14",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.10.0"
+  }
+}
diff --git a/examples/server-rendering/public/css/app.css b/examples/server-rendering/public/css/app.css
@@ -0,0 +1,78 @@
+html,
+body,
+#root,
+.ask-page {
+  min-height: 100vh;
+  /*overflow: hidden;*/
+}
+.ask-page {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.ask-header {
+  margin-bottom: 0;
+}
+.ask-main {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.demo-content {
+  padding: 30px 0;
+  overflow: hidden;
+}
+
+.ask-banner {
+  background-color: #f8f8f8;
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+.ask-footer {
+  background-color: #555555;
+  color: #999999;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.ask-footer p {
+  font-size: 1.3rem;
+  margin: 0;
+}
+
+.scrollspy-nav {
+  top: 0;
+  z-index: 100;
+  background: #0e90d2;
+  width: 100%;
+  padding: 0 10px
+}
+
+.scrollspy-nav ul {
+  margin: 0;
+  padding: 0
+}
+
+.scrollspy-nav li {
+  display: inline-block;
+  list-style: none
+}
+
+.scrollspy-nav a {
+  color: #eee;
+  padding: 10px 20px;
+  display: inline-block
+}
+
+.scrollspy-nav a.am-active {
+  color: #fff;
+  font-weight: 700
+}
diff --git a/examples/server-rendering/public/i/favicon.png b/examples/server-rendering/public/i/favicon.png
diff --git a/examples/server-rendering/run.js b/examples/server-rendering/run.js
@@ -0,0 +1,5 @@
+'use strict';
+
+require('babel-register')();
+
+require('./server');
diff --git a/examples/server-rendering/server.js b/examples/server-rendering/server.js
@@ -0,0 +1,67 @@
+'use strict';
+
+import express from 'express';
+import hbs from 'express-handlebars';
+import serveStatic from 'serve-static';
+
+import webpack from 'webpack';
+import webpackDevMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+
+import React from 'react';
+import {renderToString} from 'react-dom/server';
+import {
+  match,
+  RouterContext,
+} from 'react-router';
+import routes from './shared/routes';
+import webpackConfig from './webpack.config.dev';
+
+const app = express();
+const compiler = webpack(webpackConfig);
+
+app.engine('html', hbs({extname: 'html'}));
+app.set('view engine', 'html');
+app.set('views', './server/views');
+app.locals.settings['x-powered-by'] = false;
+
+app.use(serveStatic('./public'));
+
+app.use(webpackDevMiddleware(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  stats: {
+    colors: true
+  }
+}));
+
+app.use(webpackHotMiddleware(compiler, {
+  log: console.log
+}));
+
+app.get('*', (req, res) => {
+  match({
+    routes,
+    location: req.url
+  }, (error, redirectLocation, renderProps) => {
+    if (error) {
+      res.status(500).send(error.message)
+    } else if (redirectLocation) {
+      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
+    } else if (renderProps) {
+      // You can also check renderProps.components or renderProps.routes for
+      // your "not found" component or route respectively, and send a 404 as
+      // below, if you're using a catch-all route.
+      res.render('layout', {
+        reactHtml: renderToString(<RouterContext {...renderProps} />)
+      });
+    } else {
+      res.status(404).send('Not found');
+    }
+  })
+});
+
+const server = app.listen(2046, function () {
+  const port = server.address().port;
+
+  console.log('Example app listening at http://localhost:%s', port);
+});
diff --git a/examples/server-rendering/server/views/layout.html b/examples/server-rendering/server/views/layout.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="description"
+        content="An Amaze UI React template that helps you build fast, modern mobile web apps.">
+  <meta name="viewport"
+        content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+  <title>Amaze UI React Starter Kit</title>
+
+  <!-- Set render engine for 360 browser -->
+  <meta name="renderer" content="webkit">
+
+  <!-- No Baidu Siteapp-->
+  <meta http-equiv="Cache-Control" content="no-siteapp" />
+
+  <link rel="icon" type="image/png" href="/i/favicon.png">
+  <link
+    rel="stylesheet"
+    href="http://cdn.amazeui.org/amazeui/2.6.0/css/amazeui.min.css"
+  />
+  <link rel="stylesheet" href="/css/app.css" />
+</head>
+<body>
+<div id="root">{{{reactHtml}}}</div>
+<script src="/js/bundle.js"></script>
+</body>
+</html>
diff --git a/examples/server-rendering/shared/components/AMUIReact.js b/examples/server-rendering/shared/components/AMUIReact.js
@@ -0,0 +1 @@
+export * from '../../../../src/AMUIReact';
diff --git a/examples/server-rendering/shared/components/App.js b/examples/server-rendering/shared/components/App.js
@@ -0,0 +1,81 @@
+'use strict';
+
+import React from 'react'
+import {
+  Link,
+} from 'react-router';
+
+import {
+  Topbar,
+  Nav,
+  NavItem,
+  CollapsibleNav,
+  Container,
+  GoTop,
+} from './AMUIReact';
+
+import {SiteFooter} from './index';
+import * as demos from './demos';
+
+export class App extends React.Component {
+  constructor(props, context) {
+    super(props);
+  }
+
+  renderDemoNav() {
+    return (
+      <Nav
+        className="demo-nav"
+        pills
+      >
+        {
+          Object.keys(demos).map((demo, index) => {
+            return (
+              <NavItem
+                key={index}
+                linkComponent={Link}
+                linkProps={{to: `/${demo}`}}
+                active = {this.context.router.isActive(`/${demo}`)}
+              >
+                {demo.charAt(0).toUpperCase() + demo.substring(1)}
+              </NavItem>
+            )
+          })
+        }
+      </Nav>
+    )
+  }
+
+  render() {
+    return (
+      <div className="ask-page">
+        <Topbar
+          className="ask-header"
+          brand="Amaze UI React Server Rendering"
+          brandLink="/"
+          inverse
+        >
+          <CollapsibleNav>
+            <Nav topbar>
+            </Nav>
+          </CollapsibleNav>
+        </Topbar>
+        <Container className="ask-main">
+          <p className="am-margin-top-lg">
+            Amaze UI React 组件后端渲染测试
+          </p>
+          {this.renderDemoNav()}
+          <div className="demo-content">
+            {this.props.children}
+          </div>
+        </Container>
+        <SiteFooter />
+        <GoTop theme="fixed" autoHide icon="arrow-up" />
+      </div>
+    );
+  }
+}
+
+App.contextTypes = {
+  router: React.PropTypes.object.isRequired
+};
diff --git a/examples/server-rendering/shared/components/ComponentDemo.js b/examples/server-rendering/shared/components/ComponentDemo.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import * as components from './demos';
+
+export class ComponentDemo extends React.Component {
+  render() {
+    const component = this.props.params.component;
+    const Component = components[component] || React.createClass({
+          render() {
+            return (
+              <h3>
+                Not found.
+              </h3>
+            );
+          }
+        });
+    return <Component />;
+  }
+}
diff --git a/examples/server-rendering/shared/components/SiteFooter.js b/examples/server-rendering/shared/components/SiteFooter.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+  Container,
+} from './AMUIReact';
+
+const year = new Date().getFullYear();
+
+export const SiteFooter = React.createClass({
+  render() {
+    return (
+      <footer className="ask-footer">
+        <Container>
+          <p>© {year} AllMobilize, Inc. Licensed under MIT license.
+            Developed with WebStorm.</p>
+        </Container>
+      </footer>
+    );
+  },
+});
diff --git a/examples/server-rendering/shared/components/Welcome.js b/examples/server-rendering/shared/components/Welcome.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {
+  Button,
+  ButtonToolbar,
+} from './AMUIReact';
+
+export class Welcome extends React.Component {
+  render() {
+    return (
+      <div>
+        <h2>
+          请点击上面的链接查看演示。
+        </h2>
+      </div>
+    );
+  }
+}