Updates readme for above-the-fold + adds component

README.md

@@ -1,16 +1,17 @@
 # Electrode Boilerplate Universal React Node
 - This repo is a sample Electrode app with the following Electrode modules:
   - [Electrode Confippet](https://github.com/electrode-io/electrode-confippet)
-  - [Electrode CSRF JWT](https://github.com/electrode-io/electrode-csrf-jwt) 
+  - [Electrode CSRF JWT](https://github.com/electrode-io/electrode-csrf-jwt)
   - [Electrode Javascript Bundle Viewer](https://github.com/electrode-io/electrify)
   - [Electrode Redux Router Engine](https://github.com/electrode-io/electrode-redux-router-engine)
+  - [Electrode Above the Fold Rendering](https://github.com/electrode-io/above-the-fold-only-server-render)
 
 ## Install
 
 ```bash
 git clone https://github.com/electrode-io/electrode-boilerplate-universal-react-node.git
 cd hapiApp
-npm install 
+npm install
 ```
 
 ## Run
@@ -29,12 +30,12 @@ $ NODE_ENV=production gulp hot
 - Running in the selected environment should load the appropriate configuration settings
 
 ## Instructions
-- You can build the app from scratch by following the instructions below: 
+- You can build the app from scratch by following the instructions below:
   - [Electrode Confippet](#electrode-confippet)
   - [Electrode CSRF JWT](#csrf-jwt)
   - [Electrode Javascript Bundle Viewer](#bundle-viewer)
   - [Electrode Redux Router Engine](#redux-router-engine)
-  
+
 ---
 ## <a name="electrode-confippet"></a>Electrode Confippet ##
 - [Confippet](https://github.com/electrode-io/electrode-confippet) is a versatile utility for managing your NodeJS application configuration. Its goal is customization and extensibility, but offers a preset config out of the box.
@@ -188,7 +189,97 @@ Head over to the electrify [repository](https://github.com/electrode-io/electrif
 ## <a name="redux-router-engine"></a>Electrode Redux Router Engine ##
 - [Redux Router Engine](https://github.com/electrode-io/electrode-redux-router-engine) handles async data for React Server Side Rendering using [react-router], Redux, and the [Redux Server Rendering] pattern.
 
-### Install 
+### Install
 ```
 npm install --save electrode-redux-router-engine
 ```
+---
+## <a name="above-the-fold"></a>Electrode Above the Fold Server Rendering
+[Above the Fold Server Rendering](https://github.com/electrode-io/above-the-fold-only-server-render) is a React component for optionally skipping server side rendering of components outside above-the-fold (or outside of the viewport). This component helps render your components on the server that are above the fold and the remaining components on the client.
+
+[Above-the-fold-only-server-render](https://github.com/electrode-io/above-the-fold-only-server-render) helps increase performance both by decreasing the load on renderToString and sending the end user a smaller amount of markup.
+
+By default, the [above-the-fold-only-server-render](https://github.com/electrode-io/above-the-fold-only-server-render) component is an exercise in simplicity; it does nothing and only returns the child component.
+
+### Install
+- Add the `above-the-fold-only-server-render` component:
+
+```bash
+npm install above-the-fold-only-server-render --save
+```
+
+You can tell the component to skip server side rendering either by passing a `prop` `skip={true}` or by setting up `skipServerRender` in your app context and passing the component a `contextKey` `prop`.
+
+You can skip server side rendering by passing a `skip prop`, like `<your-electrode-app>/components/above-fold-simple.jsx`. You can comment out the `<AboveTheFoldOnlyServerRender skip={true}>` (skip prop) and closing tag to see how the `above-the-fold-only-server-render` component is working underneath:
+
+```js
+
+const YourComponent = () => {
+  return (
+    //comment out '<AboveTheFoldOnlyServerRender skip={true}>' tags to toggle SSR of this component'
+    <AboveTheFoldOnlyServerRender skip={true}>
+      <div>This will not be server side rendered.</div>
+    </AboveTheFoldOnlyServerRender>
+  );
+};
+
+```
+
+You can also skip server side rendering by `setting context in your app and passing a contextKey prop`. Here is an example:
+
+```js
+
+const YourComponent = () => {
+    return (
+      <AboveTheFoldOnlyServerRender contextKey="aboveTheFoldOnlyServerRender.SomeComponent">
+        <div>This will not be server side rendered based on the context.</div>
+      </AboveTheFoldOnlyServerRender>
+    );
+};
+
+class YourApp extends React.Component {
+  getChildContext() {
+    return {
+      aboveTheFoldOnlyServerRender: {
+        YourComponent: true
+      }
+    };
+  }
+
+  render() {
+    return (
+      <YourComponent />
+    );
+  }
+}
+
+YourApp.childContextTypes = {
+  aboveTheFoldOnlyServerRender: React.PropTypes.shape({
+    AnotherComponent: React.PropTypes.bool
+  })
+};
+```
+
+Navigate to `<your-electrode-app>/client/components/above-the-fold.jsx.` Following the instructions on how to manipulate the skip prop by directly commenting and uncommenting the `above-the-fold-only-server-render` [component](https://github.com/electrode-io/above-the-fold-only-server-render).
+
+```javascript
+import React from "react";
+import styles from "../styles/base.css";
+
+export class AboveFold extends React.Component {
+
+  render() {
+    return (
+      // <AboveTheFoldOnlyServerRender skip={true}>
+        <div className="renderMessage" style={{color: 'blue'}}>
+          <h3>Above-the-fold-only-server-render: Increase Your Performance</h3>
+          <p>This will skip server rendering if the 'AboveTheFoldOnlyServerRender' lines are present, or uncommented out.</p>
+          <p>This will be rendered on the server and visible if the 'AboveTheFoldOnlyServerRender' lines are commented out.</p>
+          <p>Try manually toggling this component to see it in action</p>
+          <p><a href="https://github.com/electrode-io/above-the-fold-only-server-render" target="_blank">Read more about this module and see our live demo</a></p>
+        </div>
+      //  </AboveTheFoldOnlyServerRender>
+    );
+  }
+}
+```

client/app.jsx

@@ -3,12 +3,11 @@ import { routes } from "./routes";
 import { Router } from "react-router";
 import { Resolver } from "react-resolver";
 import { createHistory } from "history";
-import "./styles/base.styl";
+import "styles/base.css";
 
 window.webappStart = () => {
   Resolver.render(
     () => <Router history={createHistory()}>{routes}</Router>,
     document.querySelector(".js-content")
   );
 };
-

client/components/above-the-fold.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export class AboveFold extends React.Component {
+
+  render() {
+    return (
+      // <AboveTheFoldOnlyServerRender skip={true}>
+        <div className="renderMessage" style={{color: "blue"}}>
+          <h3>Above-the-fold-only-server-render: Increase Your Performance</h3>
+          <p>This will skip server rendering if the 'AboveTheFoldOnlyServerRender'
+            lines are present, or uncommented out.</p>
+          <p>This will be rendered on the server and visible if the 'AboveTheFoldOnlyServerRender'
+            lines are commented out.</p>
+          <p>Try manually toggling this component to see it in action</p>
+          <p>
+            <a href="https://github.com/electrode-io/above-the-fold-only-server-render"
+              target="_blank">Read more about this module and see our live demo
+            </a>
+          </p>
+        </div>
+      //  </AboveTheFoldOnlyServerRender>
+    );
+  }
+}

client/components/home.jsx

@@ -8,6 +8,13 @@ export class Home extends React.Component {
         <h2>Demonstration Components</h2>
         <ul>
           <li><a href="/csrf">CSRF protection using electrode-csrf-jwt</a></li>
+          <li className="aboveFold">
+            <button>
+              <a href="/above-the-fold">
+                Above the Fold Render - increase your App's performance by using a skip prop
+              </a>
+            </button>
+          </li>
         </ul>
       </div>
     );

client/routes.jsx

@@ -2,10 +2,12 @@ import React from "react";
 import { Route, IndexRoute} from "react-router";
 import { Home } from "./components/home";
 import { CSRF } from "./components/csrf";
+import { AboveFold } from "./components/above-the-fold";
 
 export const routes = (
   <Route path="/">
     <IndexRoute component={Home} />
     <Route path="csrf" component={CSRF} />
+    <Route path="above-the-fold" component={AboveFold} />
   </Route>
 );

client/styles/base.css

@@ -0,0 +1,14 @@
+body {
+  font: 12px Helvetica;
+}
+
+.aboveFold {
+  margin: 20px 0;
+  border: 2px solid blue;
+  border-radius: 5px;
+  background-color: red;
+}
+
+.renderMessage {
+  color: red;
+}

package.json

@@ -23,7 +23,7 @@
     "coverage": "gulp check"
   },
   "dependencies": {
-    "bluebird": "^2.10.2",
+    "bluebird": "^3.0.0",
     "electrode-csrf-jwt": "^3.0.1",
     "electrode-redux-router-engine": "^1.0.0",
     "electrode-router-resolver-engine": "^1.0.0",
@@ -32,8 +32,8 @@
     "lodash": "^4.10.1"
   },
   "devDependencies": {
-    "electrode-archetype-react-app": "^1.0.0",
-    "electrode-archetype-react-app-dev": "^1.0.0",
+    "electrode-archetype-react-app": "^1.1.0",
+    "electrode-archetype-react-app-dev": "^1.1.0",
     "gulp": "^3.9.1"
   }
 }

server/index.js

@@ -7,6 +7,10 @@ process.on("SIGINT", () => {
 const config = require("electrode-confippet").config;
 const staticPathsDecor = require("electrode-static-paths");
 
+require.extensions[".css"] = () => {
+  return;
+};
+
 require("babel-register")({
   ignore: /node_modules\/(?!react\/)/
 });