From 11a6755189718696687bec6b080bd8f2c28b50e5 Mon Sep 17 00:00:00 2001 From: jedireza Date: Mon, 7 Sep 2015 13:53:13 -0700 Subject: [PATCH] added examples --- .eslintignore | 1 + .gitignore | 1 + README.md | 40 ++++++++++++++++ examples/layout/server.js | 48 +++++++++++++++++++ examples/layout/views/about.jsx | 17 +++++++ examples/layout/views/home.jsx | 17 +++++++ examples/layout/views/layout.jsx | 25 ++++++++++ examples/remount/client.js | 10 ++++ examples/remount/components/app.jsx | 14 ++++++ examples/remount/components/html.jsx | 27 +++++++++++ examples/remount/server.js | 69 ++++++++++++++++++++++++++++ examples/remount/webpack.js | 17 +++++++ examples/simple/server.js | 39 ++++++++++++++++ examples/simple/views/home.jsx | 21 +++++++++ package.json | 10 +++- 15 files changed, 354 insertions(+), 2 deletions(-) create mode 100644 .eslintignore create mode 100644 examples/layout/server.js create mode 100644 examples/layout/views/about.jsx create mode 100644 examples/layout/views/home.jsx create mode 100644 examples/layout/views/layout.jsx create mode 100644 examples/remount/client.js create mode 100644 examples/remount/components/app.jsx create mode 100644 examples/remount/components/html.jsx create mode 100644 examples/remount/server.js create mode 100644 examples/remount/webpack.js create mode 100644 examples/simple/server.js create mode 100644 examples/simple/views/home.jsx diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..7721e9d --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +examples/remount/assets diff --git a/.gitignore b/.gitignore index 3c3629e..24f2577 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +examples/remount/assets diff --git a/README.md b/README.md index 805156b..ae677c7 100644 --- 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 new file mode 100644 index 0000000..4e44eef --- /dev/null +++ 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 new file mode 100644 index 0000000..14edaba --- /dev/null +++ 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 ( + +

About the plot device.

+ + ); + } +}); + + +module.exports = Component; diff --git a/examples/layout/views/home.jsx b/examples/layout/views/home.jsx new file mode 100644 index 0000000..e7735d5 --- /dev/null +++ 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 ( + +

Welcome to the plot device.

+ + ); + } +}); + + +module.exports = Component; diff --git a/examples/layout/views/layout.jsx b/examples/layout/views/layout.jsx new file mode 100644 index 0000000..e7794c3 --- /dev/null +++ b/examples/layout/views/layout.jsx @@ -0,0 +1,25 @@ +var React = require('react'); + + +var Component = React.createClass({ + render: function () { + + return ( + + + {this.props.title} + + + {this.props.children} +
+

+ Home | About Us +

+ + + ); + } +}); + + +module.exports = Component; diff --git a/examples/remount/client.js b/examples/remount/client.js new file mode 100644 index 0000000..537fc6c --- /dev/null +++ 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 new file mode 100644 index 0000000..1cbe411 --- /dev/null +++ b/examples/remount/components/app.jsx @@ -0,0 +1,14 @@ +var React = require('react'); + + +var Component = React.createClass({ + render: function () { + + return ( +
Foo: {this.props.foo}
+ ); + } +}); + + +module.exports = Component; diff --git a/examples/remount/components/html.jsx b/examples/remount/components/html.jsx new file mode 100644 index 0000000..481e742 --- /dev/null +++ b/examples/remount/components/html.jsx @@ -0,0 +1,27 @@ +var React = require('react'); + + +var Component = React.createClass({ + render: function () { + + return ( + + + Remount Example + + +
+
+ + + + + ); + } +}); + + +module.exports = Component; diff --git a/examples/remount/server.js b/examples/remount/server.js new file mode 100644 index 0000000..ce61d01 --- /dev/null +++ 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 new file mode 100644 index 0000000..26c0771 --- /dev/null +++ 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 new file mode 100644 index 0000000..6fb3b98 --- /dev/null +++ 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 new file mode 100644 index 0000000..8448343 --- /dev/null +++ b/examples/simple/views/home.jsx @@ -0,0 +1,21 @@ +var React = require('react'); + + +var Component = React.createClass({ + render: function () { + + return ( + + + {this.props.title} + + +

Activate the plot device.

+ + + ); + } +}); + + +module.exports = Component; diff --git a/package.json b/package.json index b9eead8..73fa51b 100644 --- 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" } }