first commit, publishing to github

Author: Maxime Tyler

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+npm-debug.log
+dist
+.tmp
+.DS_Store

README.md

@@ -0,0 +1,39 @@
+# ISO-React: Isomorphic ReactJS Boilerplate
+
+> A complete **[isomorphic](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/)** Facebook **[React](https://facebook.github.io/react/)** boilerplate.
+
+This project is still under development, contributions are welcome!
+
+## Libraries
+
+* [react](https://facebook.github.io/react/)
+* [react-router](https://github.com/rackt/react-router)
+* [expressjs](http://expressjs.com/)
+* [browserify](http://browserify.org/)
+
+## Installation / How-to
+
+I recommend to use [io.js](https://iojs.org/) to take advantages of `ES6` without `--harmony` flag on `NodeJS`.
+
+It's super easy to do with [nvm](https://github.com/creationix/nvm):
+
+* `$ nvm install iojs`
+* `$ nvm use iojs`
+* `$ nvm alias default iojs` (to make `node` default to `iojs`)
+
+After that, you will just need to clone the repo and install dependancies:
+
+* `$ git clone https://github.com/iam4x/iso-react.git`
+* `$ cd iso-react && npm install`
+
+To run the project:
+
+* `$ npm start`
+
+Open your browser to `http://localhost:3000` and you will see the magic happens! Try to disable JavaScript in your browser, you will still be able to navigate between pages of the application. Enjoy the power of isomorphic applications!
+
+## TODO
+
+* Switch to gulp.
+* Flux, Fluxxor or Reflux?
+* Add async data retrieval before server rendering, currently all the Ajax calls that will change the state of a components are made on the client after rendering. (Still exploring many way to achieves this, because it breaks the Flux architecture).

app/app.jsx

@@ -0,0 +1,12 @@
+'use strict';
+
+const React = require('react');
+const Router = require('react-router');
+
+const routes = require('./routes.jsx');
+
+const content = document.getElementById('content');
+
+Router.run(routes, Router.HistoryLocation, (Handler) => {
+  return React.render(<Handler/>, content);
+});

app/components/app.jsx

@@ -0,0 +1,22 @@
+'use strict';
+
+const React = require('react');
+const {RouteHandler, Link} = require('react-router');
+
+const App = React.createClass({
+  render() {
+    return (
+      <div>
+        <header>
+          <ul>
+            <li><Link to='app'>Home</Link></li>
+            <li><Link to='guides'>Guides</Link></li>
+          </ul>
+        </header>
+        <RouteHandler/>
+      </div>
+    );
+  }
+});
+
+module.exports = App;

app/components/guides.jsx

@@ -0,0 +1,16 @@
+'use strict';
+
+const React = require('react');
+
+const Guides = React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>Guides</h1>
+        <p>Coming soon...</p>
+      </div>
+    );
+  }
+});
+
+module.exports = Guides;

app/components/home.jsx

@@ -0,0 +1,13 @@
+'use strict';
+
+const React = require('react');
+
+const Home = React.createClass({
+  render() {
+    return (
+      <h1>Home</h1>
+    );
+  }
+});
+
+module.exports = Home;

app/routes.jsx

@@ -0,0 +1,16 @@
+'use strict';
+
+const React = require('react');
+const Router = require('react-router');
+const {Route, DefaultRoute} = Router;
+
+const App = require('./components/app.jsx');
+const Home = require('./components/home.jsx');
+const Guides = require('./components/guides.jsx');
+
+module.exports = (
+  <Route name='app' path='/' handler={App}>
+    <DefaultRoute name="home" handler={Home} />
+    <Route name="guides" handler={Guides} />
+  </Route>
+);

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "iso-react",
+  "version": "0.0.1",
+  "description": "An isomorphic ReactJS boilerplate",
+  "main": "app.js",
+  "scripts": {
+    "watch": "./node_modules/.bin/watchify ./app/app.jsx -o ./dist/app.js -v",
+    "start": "npm run watch & ./node_modules/.bin/nodemon server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iam4x/iso-react.git"
+  },
+  "homepage": "https://github.com/iam4x/iso-react",
+  "bugs": "https://github.com/iam4x/iso-react/issues",
+  "author": "iam4x",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.11.1",
+    "express-handlebars": "^1.1.0",
+    "react": "^0.12.2",
+    "react-router": "^0.11.6"
+  },
+  "devDependencies": {
+    "browserify": "^8.1.1",
+    "node-jsx": "^0.12.4",
+    "nodemon": "^1.3.2",
+    "reactify": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "browserify": {
+    "transform": [
+      [
+        "reactify",
+        {
+          "es6": true
+        }
+      ]
+    ]
+  },
+  "tags": [
+    "react",
+    "react-router",
+    "isomorphic",
+    "express",
+    "browserify",
+    "jsx",
+    "es6"
+  ],
+  "keywords": [
+    "react",
+    "isomorphic",
+    "spa",
+    "ssr",
+    "express",
+    "browserify",
+    "jsx",
+    "es6"
+  ]
+}

router.jsx

@@ -0,0 +1,13 @@
+'use strict';
+
+const React = require('react');
+const Router = require('react-router');
+
+const routes = require(__dirname + '/app/routes.jsx');
+
+module.exports = (req, res) => {
+  Router.run(routes, req.url, (Handler) => {
+    let content = React.renderToString(<Handler/>);
+    return res.render('main', {content});
+  });
+};

server.js

@@ -0,0 +1,25 @@
+'use strict';
+
+// Install `.jsx` into node
+require('node-jsx').install({
+  extension: '.jsx',
+  harmony: true
+});
+
+const express = require('express');
+const exphbs = require('express-handlebars');
+
+const router = require('./router');
+
+const app = express();
+
+app.engine('handlebars', exphbs({defaultLayout: 'index'}));
+app.set('view engine', 'handlebars');
+
+app.use('/assets/images', express.static(__dirname + '/app/assets/images'));
+app.use('/assets/javascript', express.static(__dirname + '/dist/'));
+
+app.use(router);
+app.listen(3000);
+
+console.log('Application started on port 3000');