Added isomorphism, swig views, webpack configuration and separated JSX templates into separate file

Author: DanFMoore

.gitignore

@@ -1,3 +1,5 @@
 *~
 node_modules
 .DS_Store
+.idea
+npm-debug.log

README.md

@@ -1,55 +1,33 @@
-[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)
+# Isomorphic React and Express
 
-# React Tutorial
+This repository shows how React can be used with the Express framework isomorphically; that is to use the same code on both the server and browser. This uses the comment box example from the [React tutorial](http://facebook.github.io/react/docs/tutorial.html) but in addition to rendering the comment box in the browser, it pre-renders it on the server, using the same code.
 
-This is the React comment box example from [the React tutorial](http://facebook.github.io/react/docs/tutorial.html).
+There are also a few other additions. I've set up `webpack` so that it bundles up the code to be used in the browser. I also didn't particularly like the `JSX` template render methods being in the same file as the controller code (despite what React says, they are controllers; they behave exactly the same way as Angular's controllers). And lastly since I had to server-side rendering, I've had to use a view engine. I've chose `Swig` as unlike `Jade` it uses proper HTML and so means I have one fewer language to learn (which fits into the philosophy of isomorphism).
 
-## To use
-
-There are several simple server implementations included. They all serve static files from `public/` and handle requests to `/api/comments` to fetch or add data. Start a server with one of the following:
-
-### Node
-
-```sh
-npm install
-node server.js
-```
+Naturally this means all of the other server language implementations have been removed - Python, PHP etc.
 
-### Python
+## Implementation
 
-```sh
-pip install -r requirements.txt
-python server.py
-```
+The example file from the tutorial is now in a publicly-inaccessible location at `src/example.js`. The templates are in another file which is `require`d from there, `templates.jsx`.
 
-### Ruby
-```sh
-ruby server.rb
-```
+In the browser, the main entry point method which calls `ReactDOM.render`, is exported as `render` from `example.js`. This is made accessible as a window method in `src/index.js`, which is used as the entry script for `webpack`. This is all compiled into `public/scripts/bundle.js` which is what the browser includes. The settings for the `webpack` are found in `webpack.config.js`; several libraries like React itself and the markdown parser are set to be externals, which means they are not bundled up so that the browser can load those from a CDN (Content Delivery Network).
 
-### PHP
-```sh
-php server.php
-```
+On the browse, `example.js` itself is `require`d, after the `node-jsx` module is set up, in order that the JSX syntax can be understood. `example.js` also exports a `renderServer` which returns a static string after calling `ReactDOMServer.renderToString` from the `react-dom/server` module. The route for `/` simply calls this method and passes it as a variable to the `views/index.html` view.
 
-### Go
-```sh
-go run server.go
-```
-
-### Perl
-
-```sh
-cpan Mojolicious
-perl server.pl
-```
+## To use
 
-And visit <http://localhost:3000/>. Try opening multiple tabs!
+    npm install
+    
+Next, to compile the browser code into `public/scripts/bundle.js`:
 
-## Changing the port
+    npm run webpack-dev
+    
+Or if you want to compile it to a minified version without the source map:
 
-You can change the port number by setting the `$PORT` environment variable before invoking any of the scripts above, e.g.,
+    npm run webpack
+    
+And then start the server:
 
-```sh
-PORT=3001 node server.js
-```
+    npm start
+    
+And visit <http://localhost:3000/>.

package.json

@@ -5,12 +5,26 @@
   "main": "server.js",
   "dependencies": {
     "body-parser": "^1.4.3",
-    "express": "^4.4.5"
+    "express": "^4.4.5",
+    "marked": "^0.3.5",
+    "node-jsx": "^0.13.3",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "swig": "^1.4.2"
+  },
+  "devDependencies": {
+    "babel-core": "^6.4.5",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babelify": "^7.2.0",
+    "webpack": "^1.12.13"
   },
-  "devDependencies": {},
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
+    "start": "node server.js",
+    "webpack-dev": "webpack --watch --dev",
+    "webpack": "webpack"
   },
   "repository": {
     "type": "git",
@@ -27,7 +41,7 @@
     "url": "https://github.com/reactjs/react-tutorial/issues"
   },
   "homepage": "https://github.com/reactjs/react-tutorial",
-  "engines" : {
-    "node" : "0.12.x"
+  "engines": {
+    "node": "0.12.x"
   }
 }

public/scripts/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore