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.

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


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

$ git clone 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

        _save: function() {
  2. Actions: The central module for actions we register on our UI elements

      create: function(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] =, 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) { = data;
  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) {


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, 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);
        ... (err) {

Passport and Notifier Configuration

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


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.


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


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.


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