added examples

jedireza · Sep 7, 2015 · 11a6755 · 11a6755
1 parent 16a189b
commit 11a6755
Show file tree

Hide file tree

Showing 15 changed files with 354 additions and 2 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+examples/remount/assets
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules
+examples/remount/assets
diff --git a/README.md b/README.md
@@ -127,6 +127,46 @@ server.render('template', context, renderOpts, function (err, output) {
 `server.render(template, context, [options], callback)` for complete details.](https://github.com/hapijs/vision/blob/master/API.md#serverrendertemplate-context-options-callback)
 
 
+## Examples
+
+Before you can run the examples, you need to clone this repo and install the dependencies.
+
+```bash
+$ git clone git@github.com:jedireza/hapi-react-views.git
+$ cd hapi-react-views
+$ npm install
+```
+
+### Rendering a simple page
+
+This example renders a simple component as HTML output. [View the
+code.](https://github.com/jedireza/hapi-react-views/tree/master/examples/simple)
+
+```bash
+$ npm run simple-example
+```
+
+### Rendering with layouts
+
+This example is renders simple components as HTML but adds the idea of using
+layouts. [View the
+code.](https://github.com/jedireza/hapi-react-views/tree/master/examples/layout)
+
+```bash
+$ npm run layout-example
+```
+
+### Remounting on the client (universal/isomorphic)
+
+This example demonstrates the idea of remounting client side in order to create
+universal/isomorphic applications. [View the
+code.](https://github.com/jedireza/hapi-react-views/tree/master/examples/remount)
+
+```bash
+$ npm run remount-example
+```
+
+
 ## License
 
 MIT

diff --git a/examples/layout/server.js b/examples/layout/server.js
@@ -0,0 +1,48 @@
+var Hapi = require('hapi');
+var Vision = require('vision');
+var HapiReactViews = require('../..');
+
+
+var server = new Hapi.Server();
+server.connection();
+server.register(Vision, function (err) {
+
+    if (err) {
+        console.log('Failed to load vision.');
+    }
+
+    server.views({
+        engines: {
+            jsx: HapiReactViews
+        },
+        relativeTo: __dirname,
+        path: 'views'
+    });
+
+    server.route({
+        method: 'GET',
+        path: '/',
+        handler: function (request, reply) {
+
+            reply.view('home');
+        }
+    });
+
+    server.route({
+        method: 'GET',
+        path: '/about',
+        handler: function (request, reply) {
+
+            reply.view('about');
+        }
+    });
+
+    server.start(function (err) {
+
+        if (err) {
+            throw err;
+        }
+
+        console.log('Server is listening at ' + server.info.uri);
+    });
+});
diff --git a/examples/layout/views/about.jsx b/examples/layout/views/about.jsx
@@ -0,0 +1,17 @@
+var React = require('react');
+var Layout = require('./layout.jsx');
+
+
+var Component = React.createClass({
+    render: function () {
+
+        return (
+            <Layout title="About Us">
+                <h1>About the plot device.</h1>
+            </Layout>
+        );
+    }
+});
+
+
+module.exports = Component;
diff --git a/examples/layout/views/home.jsx b/examples/layout/views/home.jsx
@@ -0,0 +1,17 @@
+var React = require('react');
+var Layout = require('./layout.jsx');
+
+
+var Component = React.createClass({
+    render: function () {
+
+        return (
+            <Layout title="Home Page">
+                <h1>Welcome to the plot device.</h1>
+            </Layout>
+        );
+    }
+});
+
+
+module.exports = Component;
diff --git a/examples/layout/views/layout.jsx b/examples/layout/views/layout.jsx
@@ -0,0 +1,25 @@
+var React = require('react');
+
+
+var Component = React.createClass({
+    render: function () {
+
+        return (
+            <html>
+                <head>
+                    <title>{this.props.title}</title>
+                </head>
+                <body>
+                    {this.props.children}
+                    <hr />
+                    <p>
+                        <a href="/">Home</a> | <a href="/about">About Us</a>
+                    </p>
+                </body>
+            </html>
+        );
+    }
+});
+
+
+module.exports = Component;
diff --git a/examples/remount/client.js b/examples/remount/client.js
@@ -0,0 +1,10 @@
+var React = require('react');
+var AppComponent = require('./components/app.jsx');
+
+
+var App = React.createFactory(AppComponent);
+var mountNode = document.getElementById('app-mount');
+var serverState = window.state;
+
+
+React.render(App(serverState), mountNode);
diff --git a/examples/remount/components/app.jsx b/examples/remount/components/app.jsx
@@ -0,0 +1,14 @@
+var React = require('react');
+
+
+var Component = React.createClass({
+    render: function () {
+
+        return (
+            <div>Foo: {this.props.foo}</div>
+        );
+    }
+});
+
+
+module.exports = Component;
diff --git a/examples/remount/components/html.jsx b/examples/remount/components/html.jsx
@@ -0,0 +1,27 @@
+var React = require('react');
+
+
+var Component = React.createClass({
+    render: function () {
+
+        return (
+            <html>
+                <head>
+                    <title>Remount Example</title>
+                </head>
+                <body>
+                    <div id="app-mount"
+                        dangerouslySetInnerHTML={{ __html: this.props.remount }}>
+                    </div>
+                    <script id="app-state"
+                        dangerouslySetInnerHTML={{ __html: this.props.state }}>
+                    </script>
+                    <script src="/assets/client.js"></script>
+                </body>
+            </html>
+        );
+    }
+});
+
+
+module.exports = Component;
diff --git a/examples/remount/server.js b/examples/remount/server.js
@@ -0,0 +1,69 @@
+var Path = require('path');
+var Hapi = require('hapi');
+var Inert = require('inert');
+var Vision = require('vision');
+var HapiReactViews = require('../..');
+
+
+var server = new Hapi.Server();
+server.connection();
+server.register([Inert, Vision], function (err) {
+
+    if (err) {
+        console.log('Failed to load plugins.');
+    }
+
+    server.views({
+        engines: {
+            jsx: HapiReactViews
+        },
+        relativeTo: __dirname,
+        path: 'components'
+    });
+
+    server.route({
+        method: 'GET',
+        path: '/assets/client.js',
+        handler: {
+            file: Path.join(__dirname, './assets/client.js')
+        }
+    });
+
+    server.route({
+        method: 'GET',
+        path: '/',
+        handler: function (request, reply) {
+
+            var appContext = {
+                foo: 'bar'
+            };
+            var renderOpts = {
+                runtimeOptions: {
+                    renderMethod: 'renderToString'
+                }
+            };
+
+            server.render('app', appContext, renderOpts, function (err, appOutput) {
+
+                var htmlContext = {
+                    remount: appOutput,
+                    state: 'window.state = ' + JSON.stringify(appContext) + ';'
+                };
+
+                server.render('html', htmlContext, function (err, htmlOutput) {
+
+                    reply(htmlOutput);
+                });
+            });
+        }
+    });
+
+    server.start(function (err) {
+
+        if (err) {
+            throw err;
+        }
+
+        console.log('Server is listening at ' + server.info.uri);
+    });
+});
diff --git a/examples/remount/webpack.js b/examples/remount/webpack.js
@@ -0,0 +1,17 @@
+var Path = require('path');
+
+
+module.exports = {
+    entry: Path.join(__dirname, './client.js'),
+    resolve: {
+        extensions: ['', '.js', '.jsx']
+    },
+    output: {
+        filename: Path.join(__dirname, './assets/client.js')
+    },
+    module: {
+        loaders: [
+            { test: /\.jsx$/, loader: 'jsx-loader' }
+        ]
+    }
+};
diff --git a/examples/simple/server.js b/examples/simple/server.js
@@ -0,0 +1,39 @@
+var Hapi = require('hapi');
+var Vision = require('vision');
+var HapiReactViews = require('../..');
+
+
+var server = new Hapi.Server();
+server.connection();
+server.register(Vision, function (err) {
+
+    if (err) {
+        console.log('Failed to load vision.');
+    }
+
+    server.views({
+        engines: {
+            jsx: HapiReactViews
+        },
+        relativeTo: __dirname,
+        path: 'views'
+    });
+
+    server.route({
+        method: 'GET',
+        path: '/',
+        handler: function (request, reply) {
+
+            reply.view('home');
+        }
+    });
+
+    server.start(function (err) {
+
+        if (err) {
+            throw err;
+        }
+
+        console.log('Server is listening at ' + server.info.uri);
+    });
+});
diff --git a/examples/simple/views/home.jsx b/examples/simple/views/home.jsx
@@ -0,0 +1,21 @@
+var React = require('react');
+
+
+var Component = React.createClass({
+    render: function () {
+
+        return (
+            <html>
+                <head>
+                    <title>{this.props.title}</title>
+                </head>
+                <body>
+                    <h1>Activate the plot device.</h1>
+                </body>
+            </html>
+        );
+    }
+});
+
+
+module.exports = Component;
diff --git a/package.json b/package.json
@@ -5,7 +5,10 @@
   "main": "index.js",
   "scripts": {
     "test": "./node_modules/lab/bin/lab -c -L",
-    "test-cover": "./node_modules/lab/bin/lab -c -r html -o ./test/artifacts/coverage.html && open ./test/artifacts/coverage.html"
+    "test-cover": "./node_modules/lab/bin/lab -c -r html -o ./test/artifacts/coverage.html && open ./test/artifacts/coverage.html",
+    "simple-example": "node ./examples/simple/server",
+    "layout-example": "node ./examples/layout/server",
+    "remount-example": "webpack --config ./examples/remount/webpack.js && node ./examples/remount/server"
   },
   "repository": {
     "type": "git",
@@ -32,8 +35,11 @@
   "devDependencies": {
     "code": "^1.x.x",
     "hapi": "^9.x.x",
+    "inert": "^3.0.1",
+    "jsx-loader": "^0.13.2",
     "lab": "^5.x.x",
     "react": "^0.13.x",
-    "vision": "^3.0.0"
+    "vision": "^3.0.0",
+    "webpack": "^1.12.1"
   }
 }