RENO - React Express Node mOngoDB

RENO is an example app that demonstrates how to set up a full stack React.js app. See it live at reno-demo.herokuapp.com.

Install

Create a new directory and run the follwing command in your shell.

$ git clone git://github.com/SFDevLabs/reno.git
$ npm install
$ npm start

Then visit http://localhost:3000/. This starts the Express powered API and the Webpack-dev-server. Webpack will bundle the front end JSX/JS every time you make a file change in the "app/js" folder.

What's in the box?

1. React.js / Flux Front End (Look in the directory /app/js)
2. CRUD API built in Express.js and MongoDB
3. Webpack configuration
4. Passport.js authentication
5. CDN image upload via Imager
6. Application emails via Notifier
7. Lots of tests

##Why RENO? Because we need a good simple example of an end-to-end React app. Motivated by the javascript fatigue some new developers face.

Front End Application Event Flow

When a user interacts wth RENO (i.e. creates a post) data flows through a series of steps. These steps mirror the folders structure located at app/js.

1. Components: The React classes and JSX that declare our UI elements

     React.createClass({
       ...
       _save: function() {
         Actions.create(this.state);
       }
     })

2. Actions: The central module for actions we register on our UI elements

     ...
     create: function(obj) {
       ArticleApi.postEntityData(obj);
     }

3. API: The XHR module where we make GET/POST/PUT/DELETE requests

     ...
     postEntityData: function(data) {
   	...
   	const key = Constants.POST_ARTICLE_DATA;
       _pendingRequests[key] = RequestAPI.post(url, params).end(
         RequestAPI.makeResponseCallback(key, params)
       );
     }

4. Dispatch: The Flux dipatcher that fires the callback when we call the dispatcher's dispatch methode

     makeResponseCallback: function(){
       ...
       dispatch(key, res, params);
     }
     ...
     function dispatch(key, response, params, data) {
   	  var payload = {actionType: key, response: response};
   	  if (params) {
   	    payload.params = params;
   	  }
   	  if (data) {
   	    payload.data = data;
   	  }
   	  AppDispatcher.dispatch(payload);
     }

5. Store: The data model where we set new data and then emit events to re-render our components with the new data

     AppDispatcher.register(function(action) {
       ...
       case Constants.POST_ARTICLE_DATA:
         var article = action.response.body
   	   if (article) {
   	     set(article);
   	     ArticleStore.emitChange();
   	   }
   	  break;
     })

CRUD API

The application Express.js has three components.

1. Our Express server is kicked of at the /server.js file

2. A route config file can be found at /config/routes.js

     app.post(path, auth.requiresLogin, articleCrud.getCreateController);

3. These routes map to our CRUD api found at /app/api/

     exports.getCreateController = function (req, res) {
       var m = new Article(req.body);
       ...
       m.save(function (err) {
       ...
        res.send(m);
       }
     };

Passport and Notifier Configuration

You can configure the application variables for Passport.js at /config/env/ and Notifier.js at /config/config.js.

Heroku

To run the app on Heroku you must set the environment variables for the app.

1. Set NODE_ENV to 'production'
2. Set all the required variables in /config/env/production.js to empty string or live keys
3. Deploy your app

*You can set config variables on Heroku with this tool.

Tests

You can find the application's tests in Two places:

1. Front End tests are in the _tests_ folders located in same directory of the modules they cover
2. Back end tests are located in the test directory

Run the tests with the command:

$ npm test

Building

In production the static assets are served from the "/build" folder (In development they are served by webpack-dev-server). To use Webpack to build the JS and JSX assets into "/build/js/bundle.js" run the following:

$ npm run build

*Running build is required for changes to be seen on a production environment.

CREDIT

The server and mongoose models are based on those found in node-express-mongoose-demo. (Thanks to madhums)

License

MIT