├── .gitignore ├── LICENSE ├── README.md └── examples ├── 00_browserify ├── README.md ├── index.html ├── index.js ├── lib │ ├── formulae.js │ └── sillystring.js └── package.json └── 01_react ├── client.js ├── components ├── App.jsx └── Faves.jsx ├── package.json ├── public └── .gitkeep └── server.js /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | *.sw? 10 | 11 | pids 12 | logs 13 | results 14 | 15 | npm-debug.log 16 | node_modules 17 | bundle.js 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2015 Spike Brehm 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Isomorphic Examples 2 | =================== 3 | 4 | Little examples demonstrating isomorphic tools. 5 | 6 | Checkout the `examples/` folder to see the good stuff. 7 | -------------------------------------------------------------------------------- /examples/00_browserify/README.md: -------------------------------------------------------------------------------- 1 | # Browserify 2 | 3 | Simple example showing how to use browserify to create a bundle. 4 | 5 | ## Install Browserify globally 6 | 7 | So we can use the commandline `browserify(1)` tool, install Browserify 8 | globally using NPM: 9 | 10 | $ npm install -g browserify 11 | 12 | ## Create a bundle 13 | 14 | To bundle up your CommonJS module into a single file, use the commandline tool: 15 | 16 | $ browserify index.js -o bundle.js 17 | 18 | Then view the `index.html` page: 19 | 20 | $ open index.html 21 | 22 | You can also enable source maps for easier debugging in the browser. Just add 23 | the `--debug` flag: 24 | 25 | $ browserify index.js -o bundle.js --debug 26 | -------------------------------------------------------------------------------- /examples/00_browserify/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /examples/00_browserify/index.js: -------------------------------------------------------------------------------- 1 | var sillystring = require('./lib/sillystring') 2 | // , formulae = require('./lib/formulae') 3 | ; 4 | 5 | console.log(sillystring('Browserify is fun!')); 6 | 7 | // console.log(formulae.makeBig(5, 10)); 8 | -------------------------------------------------------------------------------- /examples/00_browserify/lib/formulae.js: -------------------------------------------------------------------------------- 1 | var _ = require('underscore'); 2 | 3 | exports.makeBig = function(base, repeat) { 4 | var num = 0; 5 | _.times(repeat, function() { 6 | num += base; 7 | }); 8 | return num; 9 | }; 10 | -------------------------------------------------------------------------------- /examples/00_browserify/lib/sillystring.js: -------------------------------------------------------------------------------- 1 | module.exports = function sillystring(input) { 2 | return input.toUpperCase() + '!!!'; 3 | }; 4 | -------------------------------------------------------------------------------- /examples/00_browserify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "browserify-example", 3 | "version": "0.0.0", 4 | "dependencies": { 5 | "underscore": "~1.5" 6 | }, 7 | "private": true 8 | } 9 | -------------------------------------------------------------------------------- /examples/01_react/client.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var App = React.createFactory(require('./components/App.jsx')); 3 | 4 | var faves = [ 5 | 'Breaking Bad', 6 | 'burritos', 7 | 'bikes', 8 | ]; 9 | 10 | React.render(App({faves: faves}), document.body); 11 | -------------------------------------------------------------------------------- /examples/01_react/components/App.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Faves = require('./Faves.jsx'); 3 | var setCookie = require('set-cookie'); 4 | 5 | var App = React.createClass({ 6 | render: function() { 7 | this.setCurrentTimeCookie(); 8 | 9 | return
10 |
11 |

Welcome to my app!

12 |
13 |
14 | 15 |
16 |
; 17 | }, 18 | 19 | setCurrentTimeCookie: function() { 20 | var time = Date.now(); 21 | setCookie('the_time', time, {res: this.props.res}); 22 | }, 23 | }); 24 | 25 | module.exports = App; 26 | -------------------------------------------------------------------------------- /examples/01_react/components/Faves.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var Faves = React.createClass({ 4 | render: function() { 5 | return ; 10 | }, 11 | }); 12 | 13 | module.exports = Faves; 14 | -------------------------------------------------------------------------------- /examples/01_react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_react", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": { 7 | "browserify": "^8.1.3", 8 | "express": "^4.11.2", 9 | "morgan": "^1.5.1", 10 | "node-jsx": "^0.12.4", 11 | "react": "^0.12.2", 12 | "reactify": "^1.0.0", 13 | "set-cookie": "0.0.4" 14 | }, 15 | "devDependencies": {}, 16 | "scripts": { 17 | "test": "echo \"Error: no test specified\" && exit 1", 18 | "start": "node server.js", 19 | "browserify": "browserify --debug client.js > public/bundle.js" 20 | }, 21 | "author": "", 22 | "license": "MIT", 23 | "private": true, 24 | "browserify": { 25 | "transform": [ 26 | "reactify" 27 | ] 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/01_react/public/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spikebrehm/isomorphic-examples/cc9c34162af18feb018469fcaecf6c1cd5e718ad/examples/01_react/public/.gitkeep -------------------------------------------------------------------------------- /examples/01_react/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var morgan = require('morgan'); 3 | var React = require('react'); 4 | 5 | require('node-jsx').install({extensions: ['.jsx']}); 6 | 7 | var App = React.createFactory(require('./components/App.jsx')); 8 | 9 | var app = express(); 10 | 11 | // Logger. 12 | app.use(morgan('dev')); 13 | 14 | // Static files. 15 | app.use(express.static(__dirname + '/public')); 16 | 17 | var faves = [ 18 | 'pizza', 19 | 'Game of Thrones', 20 | 'sports', 21 | ]; 22 | 23 | app.use(function(req, res, next) { 24 | var html = React.renderToString(App({res: res, faves: faves})); 25 | res.send(wrapWithLayout(html)); 26 | }); 27 | 28 | app.listen(process.env.PORT || 3030); 29 | 30 | function wrapWithLayout(html) { 31 | return 'Isomorphic React!' + 32 | '' + html + '' + 33 | '' + 34 | ''; 35 | } 36 | --------------------------------------------------------------------------------