React-Express-Node-mOngoDB - React.js app wth a Node.js API.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

React Express Node mOngoDB

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

Codeship Status for SFDevLabs/RENO

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