Release/5.0.0

.babelrc

@@ -5,9 +5,10 @@
   ],
   "plugins": [
     "react-hot-loader/babel",
+    "transform-es2015-modules-commonjs",
     "transform-class-properties",
     "transform-decorators",
-    "transform-object-rest-spread",
-    ["resolver", { "resolveDirs": ["common"] }]
+    "transform-export-extensions",
+    "transform-object-rest-spread"
   ]
 }

.gitignore

@@ -1,8 +1,12 @@
+npm-error.log
 .env
 node_modules
 npm-debug.log*
 .DS_Store
 
 # ignore built static files
-dist/
-webpack-assets.json
+/dist
+/webpack-assets.json
+
+# webpack-built server files
+server/renderer/*.built.js

README.md

@@ -11,31 +11,30 @@ promise that future updates will not break your existing application.**
 
 ## Get started
 
-Install [yarn](https://github.com/yarnpkg/yarn) if you don't have it already:
-```
-npm install -g yarn
-```
-
-Then copy environment variables and edit them if necessary:
+Copy environment variables and edit them if necessary:
 ```
 cp .env.example .env
 ```
 
 Then:
 ```
-yarn install
-yarn start
+npm install
+npm start
 ```
 
 Direct your browser to `http://localhost:3000`.
 
 For production builds:
 
 ```
-yarn run prod:start
+npm run prod:build
+npm run serve
 ```
 
-Note: pm2 must be installed to run production builds.
+For Heroku, simply add a `Procfile`:
+```
+web: npm run serve
+```
 
 ## Directory Structure
 ```
@@ -93,13 +92,13 @@ Make sure you have it installed:
 npm install -g mocha
 ```
 
-Tests should reside alongside the component/module/selector/etc that it is
-testing. For example:
+Tests should reside in `test/spec` in their appropriate folders:
 
 ```
-├── reducers
-│   ├── todos.js
-│   ├── todos.test.js
+├── test
+│   ├── spec
+│   │   ├── api
+│   │   │   ├── todos.test.js
 ```
 
 Tests can be written with ES2015, since it passes through `babel-register`.

client/index.js

@@ -10,12 +10,6 @@ import App from 'containers/App';
 
 const history = createHistory();
 
-/* Images
- * This space is reserved for images that are required by server rendering,
- * e.g. the favicon and any other images that need to be in the base HTML file.
- */
-import '../common/images/favicon.png';
-
 // The root element of your app
 const rootElement = document.getElementById('app');
 
@@ -25,7 +19,7 @@ const initialState = window.__INITIAL_STATE__;
 const store = configureStore(initialState, history);
 
 const render = (Component) => {
-  ReactDOM.render(
+  ReactDOM.hydrate(
     <Provider store={store}>
       <AppContainer>
         <ConnectedRouter history={history}>

common/css/base/_fonts.scss

@@ -0,0 +1,2 @@
+// Import fonts here, from google, or whereever.
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

common/css/base/_styles.scss

@@ -0,0 +1,19 @@
+html, body {
+  height: 100%;
+  font-family: 'Open Sans', sans-serif;
+
+  p {
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
+body {
+  background-color: $white;
+}
+
+#app {
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+}

common/css/base/_vendors.scss

@@ -0,0 +1,9 @@
+// Import bootstrap-sass as needed
+$bootstrap-sass-asset-helper: true;
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
+
+$screen-lg-min: $app-max-width !global;
+$container-lg: $app-max-width !global;
+
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";

common/css/base/index.scss

@@ -0,0 +1,9 @@
+// Vendors and resource files (.e.g. variables, mixins, etc)
+@import '../resources/variables';
+@import 'vendors';
+@import '../resources/mixins';
+
+// The following are non-vendor, non-resource files.
+@import 'fonts';
+@import 'overrides';
+@import 'styles';

common/css/resources/_colors.scss

@@ -0,0 +1,2 @@
+$white: #fff;
+$dark-gray: #333;

common/js/actions/todos.js

@@ -2,8 +2,8 @@ import {
   ADD_TODO, REMOVE_TODO, TOGGLE_TODO,
   FETCH_TODOS_REQUEST, FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE
 } from 'constants/index';
-import { fetch } from 'lib/api';
-import generateActionCreator from 'lib/generateActionCreator';
+import api from 'helper/api';
+import generateActionCreator from 'helper/generateActionCreator';
 
 export const addTodo = generateActionCreator(ADD_TODO, 'text');
 export const removeTodo = generateActionCreator(REMOVE_TODO, 'id');
@@ -14,15 +14,19 @@ export const fetchTodosSuccess = generateActionCreator(FETCH_TODOS_SUCCESS, 'tod
 export const fetchTodosFailure = generateActionCreator(FETCH_TODOS_FAILURE, 'error');
 
 export const fetchTodos = () => {
-  return async (dispatch) => {
+  return (dispatch) => {
     dispatch(fetchTodosRequest());
 
-    try {
-      const response = await fetch('/api/todos', { method: 'GET' });
-      const todos = await response.json();
-      dispatch(fetchTodosSuccess(todos));
-    } catch (e) {
-      dispatch(fetchTodosFailure(e.message));
-    }
+    return api.get('/api/todos')
+      .then(todos => {
+        dispatch(fetchTodosSuccess(todos));
+
+        return Promise.resolve(todos);
+      })
+      .catch(error => {
+        dispatch(fetchTodosFailure(error));
+
+        return Promise.reject(error);
+      });
   };
 };

common/js/components/common/RouteWithSubRoutes/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Route } from 'react-router';
+
+const RouteWithSubRoutes = props => {
+  const {
+    path,
+    computedMatch,
+    component: Component,
+    routes,
+    restProps
+  } = props;
+
+  return (
+    <Route
+      path={path}
+      render={props => {
+        // pass the sub-routes down to keep nesting
+        return (
+          <Component
+            {...props}
+            {...restProps}
+            match={computedMatch}
+            routes={routes}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default RouteWithSubRoutes;

common/js/components/common/index.js

@@ -0,0 +1,4 @@
+export { default as ErrorPage } from './ErrorPage';
+export { default as Footer } from './Footer';
+export { default as Header } from './Header';
+export { default as RouteWithSubRoutes } from './RouteWithSubRoutes';

common/js/containers/App/index.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { RouteWithSubRoutes } from 'components/common';
 import { Container } from 'semantic-ui-react';
-import Header from 'components/Header';
-import Footer from 'components/Footer';
+import { Header, Footer } from 'components/common';
 import routes from 'routes';
 
 const App = () => (
   <Container fluid={false}>
     <Header />
     <Switch>
-      {routes.map(route => <Route key={route.path} {...route} />)}
+      {routes.map(route => (
+        <RouteWithSubRoutes key={route.path} {...route} />
+      ))}
     </Switch>
     <Footer />
   </Container>

common/js/containers/Home/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import css from './index.scss';
 
@@ -10,6 +11,15 @@ export default class HomeContainer extends Component {
           <title>Home</title>
         </Helmet>
         <h1>It Works!</h1>
+        <p>
+          You've successfully started up your first universally rendered react
+          and redux app.<br />
+          Hint: Try View Source on this page to see that it was
+          rendered on the server as well.
+        </p>
+        <p>
+          Check out the <Link to='/todos'>todos list</Link>.
+        </p>
       </div>
     );
   }

common/js/containers/Home/index.scss

@@ -1,5 +1,5 @@
 .home {
   h1 {
-    font-size: 50px;
+    font-size: 30px;
   }
 }

common/js/helper/api.js

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+const headers = { 'Content-Type': 'application/json' };
+const baseURL = process.env.APPLICATION_BASE_URL || '';
+const api = axios.create({ baseURL, headers, timeout: 200000 });
+
+api.interceptors.response.use(
+  (response) => Promise.resolve(response.data)  ,
+  (err) => Promise.reject(err.response.data)
+);
+
+module.exports = api;

common/layouts/server.html → common/templates/layouts/application.html

@@ -4,7 +4,7 @@
   <%= helmet.title %>
   <meta charset="utf-8" />
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width height=device-height" />
-  <link rel="shortcut icon" type="image/x-icon" href="<%= favicon %>">
+  <link rel="shortcut icon" type="image/x-icon" href="/dist/images/favicon.png">
   <link type="text/css" rel="stylesheet" href="<%= vendorCss %>" />
   <link type="text/css" rel="stylesheet" href="<%= appCss %>" />
 </head>

nodemon.json

@@ -3,6 +3,6 @@
     "server/**/*.js",
     "server/**/*.json",
     "common/js/**/*.js",
-    "common/layouts/server.html"
+    "common/templates/**/*.html"
   ]
 }