chore(allTheThings): update to universal-redux npm module (react-router 2, redux-simple-router, babel 6)

.eslintrc

@@ -1,4 +1,5 @@
-{ "extends": "eslint-config-airbnb",
+{
+  "extends": "eslint-config-airbnb",
   "env": {
     "browser": true,
     "node": true,
@@ -27,15 +28,20 @@
   "settings": {
     "import/parser": "babel-eslint",
     "import/resolve": {
-      moduleDirectory: ["node_modules", "src"]
+      moduleDirectory: ["node_modules", "node_modules/universal-redux/node-modules", "src"]
     }
   },
   "globals": {
     "__DEVELOPMENT__": true,
     "__CLIENT__": true,
     "__SERVER__": true,
+    "__LOGGER__": false,
     "__DISABLE_SSR__": true,
     "__DEVTOOLS__": true,
+    "__META__": {},
+    "__API_ENDPOINT__": '',
+    "__API_HOST__": '',
+    "__API_PORT__": '',
     "socket": true,
     "webpackIsomorphicTools": true
   }

.gitignore

@@ -5,3 +5,4 @@ dist/
 webpack-assets.json
 webpack-stats.json
 npm-debug.log
+.DS_Store

README.md

@@ -24,7 +24,7 @@ This is a starter boilerplate app I've put together using the following technolo
 * [Webpack Hot Middleware](https://github.com/glenjamin/webpack-hot-middleware)
 * [Redux](https://github.com/rackt/redux)'s futuristic [Flux](https://facebook.github.io/react/blog/2014/05/06/flux.html) implementation
 * [Redux Dev Tools](https://github.com/gaearon/redux-devtools) for next generation DX (developer experience). Watch [Dan Abramov's talk](https://www.youtube.com/watch?v=xsSnOQynTHs).
-* [Redux Router](https://github.com/rackt/redux-router) Keep your router state in your Redux store
+* [Redux Simple Router](https://github.com/jlongster/redux-simple-router) Keep your router state in your Redux store
 * [ESLint](http://eslint.org) to maintain a consistent code style
 * [redux-form](https://github.com/erikras/redux-form) to manage form state in Redux
 * [lru-memoize](https://github.com/erikras/lru-memoize) to speed up form validation

api/api.js

@@ -1,13 +1,15 @@
 import express from 'express';
 import session from 'express-session';
 import bodyParser from 'body-parser';
-import config from '../src/config';
 import * as actions from './actions/index';
 import {mapUrl} from 'utils/url.js';
 import PrettyError from 'pretty-error';
 import http from 'http';
 import SocketIo from 'socket.io';
 
+const apiPort = process.env.APIPORT;
+const apiHost = process.env.APIHOST || 'localhost';
+
 const pretty = new PrettyError();
 const app = express();
 
@@ -24,7 +26,6 @@ app.use(session({
 }));
 app.use(bodyParser.json());
 
-
 app.use((req, res) => {
   const splittedUrlPath = req.url.split('?')[0].split('/').slice(1);
 
@@ -56,13 +57,13 @@ const bufferSize = 100;
 const messageBuffer = new Array(bufferSize);
 let messageIndex = 0;
 
-if (config.apiPort) {
-  const runnable = app.listen(config.apiPort, (err) => {
+if (apiPort) {
+  const runnable = app.listen(apiPort, (err) => {
     if (err) {
       console.error(err);
     }
-    console.info('----\n==> 🌎  API is running on port %s', config.apiPort);
-    console.info('==> 💻  Send requests to http://%s:%s', config.apiHost, config.apiPort);
+    console.info('----\n==> 🌎  API is running on port %s', apiPort);
+    console.info('==> 💻  Send requests to http://%s:%s', apiHost, apiPort);
   });
 
   io.on('connection', (socket) => {

bin/start.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+require('../server.babel'); // babel registration (runtime transpilation for node)
+require('./start_es6.js');

bin/start_es6.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+import path from 'path';
+import http from 'http';
+import { express, renderer } from 'universal-redux';
+import httpProxy from 'http-proxy';
+import config from '../config/universal-redux.config.js';
+import SocketIo from 'socket.io';
+
+const isProduction = process.env.NODE_ENV !== 'production';
+const apiPort = process.env.APIPORT;
+const apiHost = process.env.APIHOST || 'localhost';
+const apiEndpoint = '/api';
+
+function setupProxy(app) {
+
+  const proxy = httpProxy.createProxyServer({
+    target: 'http://' + apiHost + ':' + apiPort,
+    ws: true
+  });
+
+  // Proxy to API server
+  app.use(`${apiEndpoint}`, (req, res) => {
+    proxy.web(req, res);
+  });
+
+  // added the error handling to avoid https://github.com/nodejitsu/node-http-proxy/issues/527
+  proxy.on('error', (error, req, res) => {
+    let json;
+    if (error.code !== 'ECONNRESET') {
+      console.error('proxy error', error);
+    }
+    if (!res.headersSent) {
+      res.writeHead(500, {'content-type': 'application/json'});
+    }
+
+    json = {error: 'proxy_error', reason: error.message};
+    res.end(JSON.stringify(json));
+  });
+}
+
+const app = express(config);
+
+setupProxy(app);
+
+app.use(renderer(config));
+
+const server = new http.Server(app);
+
+if (!isProduction) {
+  const io = new SocketIo(server);
+  io.path(`${__API_ENDPOINT__}/ws`);
+}
+
+server.listen(config.server.port, (err) => {
+  if (err) {
+    console.error(err);
+  }
+  console.info('==> 🌎  API calls will be received at:', config.server.host + ':' + config.server.port + apiEndpoint);
+  console.info('==> 💻  Open http://localhost:%s in a browser to view the app.', config.server.port);
+});

config/meta.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  title: 'React Redux Example',
+  description: 'All the modern best practices in one example.',
+  meta: {
+    charSet: 'utf-8',
+    property: {
+      'og:site_name': 'React Redux Example',
+      'og:image': 'https://react-redux.herokuapp.com/logo.jpg',
+      'og:locale': 'en_US',
+      'og:title': 'React Redux Example',
+      'og:description': 'All the modern best practices in one example.',
+      'twitter:card': 'summary',
+      'twitter:site': '@erikras',
+      'twitter:creator': '@erikras',
+      'twitter:title': 'React Redux Example',
+      'twitter:description': 'All the modern best practices in one example.',
+      'twitter:image': 'https://react-redux.herokuapp.com/logo.jpg',
+      'twitter:image:width': '200',
+      'twitter:image:height': '200'
+    }
+  }
+}

config/universal-redux.config.js

@@ -0,0 +1,155 @@
+/* eslint-disable */
+const path = require('path');
+const isProduction = process.env.NODE_ENV === 'production';
+const projectRoot = path.resolve(__dirname, '..');
+const sourceRoot = path.resolve(__dirname, '../src');
+const apiPort = process.env.APIPORT;
+const apiHost = process.env.APIHOST || 'localhost';
+const meta = require('./meta.config.js');
+
+module.exports = {
+
+  /*
+  // Express configuration
+  */
+  server: {
+    /*
+    // The host to run the Express universal renderer. See src/server.js.
+    //
+    // Expects: String
+    */
+    host: process.env.HOST || 'localhost',
+
+    /*
+    // The port to run Express universal renderer will run on. See src/server.js.
+    //
+    // Expects: Number
+    */
+    port: process.env.PORT,
+
+    /*
+    // The path at which static assets are served from. If omitted, Express will
+    // not serve any static assets. Optional.
+    //
+    // Expects: String
+    */
+    staticPath: projectRoot + '/static',
+
+    /*
+    // The path at which a favicon image will be served from using the `serve-favicon`
+    // library. If omitted, Express will not serve a favicon. Optional.
+    //
+    // Expects: String
+    */
+    favicon: projectRoot + '/static/favicon.ico'
+  },
+
+  /*
+  // Globals available to both serverside and clientside rendering.
+  // You may also add your own here.
+  */
+  globals: {
+
+    /*
+    // Whether or not to run redux-logger
+    //
+    // Expects: Boolean
+    */
+    __LOGGER__: false,
+
+    /*
+    // Whether or not to run redux-devtools
+    //
+    // Expects: Boolean
+    */
+    __DEVTOOLS__: !isProduction,
+
+    __API_ENDPOINT__: '/api',
+    __API_PORT__: apiPort,
+    __API_HOST__: apiHost,
+    __META__: meta
+  },
+
+  /*
+  // Enable eslint checks per Webpack build. Will not be run
+  // on production.
+  //
+  // Expects: Boolean
+  */  
+  lint: {
+    enabled: false,
+    config: projectRoot + '/.eslintrc'
+  },
+
+  // babelConfig: projectRoot + '/.babelrc',
+
+  /*
+  // Enable native desktop notifications for Webpack build events.
+  // Will not be run on production.
+  //
+  // Expects: Boolean
+  */  
+  notifications: false,
+
+  /*
+  // Path to a file with customizations for the default
+  // webpack-isomorphic-tools configuration. Optional.
+  //
+  // Expects: String
+  */  
+  toolsConfigPath: __dirname + '/webpack-isomorphic-tools.config.js',
+
+  /*
+  // When eneabled, will output Webpack and Webpack Isomorphic
+  // Tools configurations at startup
+  //
+  // Expects: Boolean
+  */  
+  verbose: true,
+
+  /*
+  // The react-router Routes file, Required. Will be added to Webpack aliases.
+  */
+  routes: sourceRoot + '/routes.js',
+
+  redux: {
+    /*
+    // A path to an index of middleware functions. Optional.
+    //
+    // Expects: String
+    */
+    middleware: sourceRoot + '/redux/middleware/index.js'
+  },
+
+  /*
+  // The path to your replacement for the default HTML shell. Optional.
+  // If not provided, the default used will be that in src/helpers/Html.js.
+  // Will be added to Webpack aliases.
+  */
+  // htmlShell: sourceRoot + '/helpers/Html.js',
+
+  webpack: {
+
+    /*
+    // Webpack configuration cusomtizations. There are more parameters
+    // available than specified here. For the full list, see 
+    // https://webpack.github.io/docs/configuration.html.
+    */  
+    config: {
+
+      /*
+      // The Webpack devtool configuration. May affect build times.
+      // See https://webpack.github.io/docs/configuration.html#devtool
+      */
+      devtool: 'inline-eval-cheap-source-map',
+
+      entry: {
+        main: [
+          'bootstrap-sass!' + sourceRoot + '/theme/bootstrap.config' + (isProduction ? '.prod' : '') + '.js',
+          'font-awesome-webpack!' + sourceRoot + '/theme/font-awesome.config' + (isProduction ? '.prod' : '') + '.js'
+        ]
+      }
+    }
+  }
+};
+/* eslint-enable */