refactor: improve overall dev experience and defaults

- Clean up webpack configurations:
  - Development: removed the need to pre-build a static development bundle
    by switching to css-hot-loader to avoid flashes of unstyled content.
    Dev environment boot up time is now much faster.
  - Production: Use the base configuration but override them depending
    on production.server (for SSR) and production.client builds.
- Refactor asset path handling as it relates to environment variables to be
  less confusing, and document it in the README.
- Other miscellaneous improvements.
- Clean up webpack/constants and move/rename it to config/index.js since
  the values in there are mostly application configuration level, which
  makes more sense.

Author: calvinl

.env.example

@@ -5,16 +5,14 @@ APPLICATION_PORT=3000
 # The absolute URL to the application.
 APPLICATION_BASE_URL=http://localhost:3000
 
-# The primary asset host for JS, CSS, and images.  This can be changed to a CDN
-# URL. If serving assets locally, it should be the same as WEBPACK_OUTPUT_PATH
-# below. This env variable only takes effect in production mode.
-ASSET_HOST=/dist
-
-# The output path for webpack builds.
-WEBPACK_OUTPUT_PATH=/dist/public
+# The output path of server and client files built by webpack and babel.
+OUTPUT_PATH=/dist
+PUBLIC_OUTPUT_PATH=/dist/public
 
 # Settings for webpack-dev-server.
 DEV_SERVER_PORT=3001
 DEV_SERVER_HOSTNAME=localhost
 DEV_SERVER_HOST_URL=http://localhost:3001
 
+# The primary asset path. Can be changed to be a CDN URL.
+PUBLIC_ASSET_PATH=/assets

.gitignore

@@ -7,6 +7,3 @@ npm-debug.log*
 # ignore built static files
 /dist
 /webpack-assets.json
-
-# webpack-built server files
-server/renderer/*.built.js

README.md

@@ -1,22 +1,19 @@
 # universal-react-redux
 
-A universal starter kit built with ES2015, react, react-router and redux. Server
+A simple, clean, React and Redux boilerplate with sensible defaults. Server
 rendering with react and express. Bundled with Webpack, with HMR transforms and
 support for `css-modules`.
 
-**NOTE: This repository is meant to be continually updated to use the latest in
-the react ecosystem. It is meant to be more of a guiding template for you to
-customize and build your own universal apps with React and Redux. I do not
-promise that future updates will not break your existing application.**
-
 ## Get started
 
 Copy environment variables and edit them if necessary:
+
 ```
 cp .env.example .env
 ```
 
 Then:
+
 ```
 npm install
 npm start
@@ -30,66 +27,84 @@ For production builds:
 npm run prod:build
 npm run serve
 ```
+
 Or simply
 
 ```
 npm run prod
 ```
 
 For Heroku, simply add a `Procfile`:
-```
-web: npm run serve
-```
 
-## Directory Structure
 ```
-├── client                         # Client-side code
-├── common                         # Shared code between client and server
-│   ├── css                        # CSS/Sass Resources
-│   ├── fonts
-│   ├── images
-│   ├── js
-│   │   ├── actions
-│   │   ├── components            # "Dumb" components
-│   │   ├── containers            # Smart containers
-│   │   ├── lib                   # Misc. libraries like helpers, etc.
-│   │   ├── middleware            # Middleware for redux
-│   │   ├── reducers              # Redux reducers
-│   │   ├── routes                # Routes each have an index.js which exports a react-router Route.
-│   │   └── store                 # Store configuration for production and dev.
-│   └── layouts                   # Layout files to be rendered by the server.
-├── server                        # Server-side code
-├── webpack                       # Webpack configuration files
+web: npm run serve
 ```
 
 ## CSS Modules
+
 This project uses [CSS Modules](https://github.com/css-modules/css-modules).
 Class names should be in `camelCase`. Place the css file as a sibling to the
 component with the same name, for example:
+
 ```
 ├── components
 │   ├── Header.js
 │   ├── Header.scss
 ```
 
+## Environment Variables
+
+In development mode, environment variables are loaded by `dotenv` off the `.env`
+file in your root directory. In production, you'll have to manage these
+yourself. In Heroku, this is simple as running:
+
+```
+heroku config:set FOO=bar
+```
+
 ## Redux Devtools
+
 This project supports the awesome [Redux Devtools Extension](https://github.com/zalmoxisus/redux-devtools-extension). Install the
 Chrome or Firefox extension and it should just work.
 
-## Server Side Rendering (SSR) and Asynchronous Data Fetching
+## Pre-fetching Data for Server Side Rendering (SSR)
+
 When rendering components on the server, you'll find that you may need to fetch
 some data before it can be rendered. The [server code](server/server.js) looks
 for a `fetchData` method on the container component and its child components,
 then executes all of them and only renders after the promises have all been
 resolved.
 
-See the [TodosContainer](common/js/containers/Todos/index.js) for an example.
+```
+//  As an ES6 class
+
+class TodosContainer extends React.Component {
+  static fetchData = ({ store }) => {
+    return store.dispatch(fetchTodos());
+  };
+}
+
+// As a functional stateless component
+
+const TodosContainer = (props) => {
+  const { todos } = props;
+  return (
+    // ...component code
+  );
+}
+
+TodosContainer.fetchData = ({ store }) => {
+  return store.dispatch(fetchTodos());
+}
+```
 
 ## Async / Await
+
 This project uses `async/await`, available by default in Node.js v8.x.x or
 higher. If you experience errors, please upgrade your version of Node.js.
 
-## Writing Tests
+## Testing
+
 The default testing framework is Mocha, though you can use whatever you want.
 Make sure you have it installed:
 
@@ -109,7 +124,9 @@ Tests should reside in `test/spec` in their appropriate folders:
 Tests can be written with ES2015, since it passes through `babel-register`.
 
 ## Running Tests
+
 To run a single test:
+
 ```
 npm test /path/to/single.test.js
 ```
@@ -126,7 +143,7 @@ To run all tests:
 npm run test:all
 ```
 
-This will run all files that are suffixed with a `.test.js`.
+This will run all tests in the `test/spec` directory.
 
 ## Running ESLint
 
@@ -136,16 +153,15 @@ npm run lint
 
 Check the `.eslintignore` file for directories excluded from linting.
 
-## Changing the Asset Host
+## Changing the public asset path
 
-In production scenarios, you may want your assets to be hosted elsewhere besides
-on your server. Just set an environment variable to point the asset host to
-where ever you want, as defaults to `localhost:3001`. Just set it to the CDN of
-your choice.
+By default, assets are built into `/dist/public`. This path is then served by
+express under the path `/assets`. This is the public asset path. In a production
+scenario, you may want your assets to be hosted on a CDN. To do so, just change
+the `PUBLIC_ASSET_PATH` environment variant.
 
 If you're using Heroku:
+
 ```
-heroku config:set ASSET_HOST=/dist/
-# OR
-heroku config:set ASSET_HOST=https://s3.amazonaws.com/mybucket/myasssets/
+heroku config:set PUBLIC_ASSET_PATH=https://my.cdn.com
 ```

common/js/actions/todos.js

@@ -1,23 +1,34 @@
 import {
-  ADD_TODO, REMOVE_TODO, TOGGLE_TODO,
-  FETCH_TODOS_REQUEST, FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE
+  ADD_TODO,
+  REMOVE_TODO,
+  TOGGLE_TODO,
+  FETCH_TODOS_REQUEST,
+  FETCH_TODOS_SUCCESS,
+  FETCH_TODOS_FAILURE
 } from 'constants/index';
-import api from 'helper/api';
-import generateActionCreator from 'helper/generateActionCreator';
+import api from 'lib/api';
+import generateActionCreator from 'lib/generateActionCreator';
 
 export const addTodo = generateActionCreator(ADD_TODO, 'text');
 export const removeTodo = generateActionCreator(REMOVE_TODO, 'id');
 export const toggleTodo = generateActionCreator(TOGGLE_TODO, 'id');
 
 export const fetchTodosRequest = generateActionCreator(FETCH_TODOS_REQUEST);
-export const fetchTodosSuccess = generateActionCreator(FETCH_TODOS_SUCCESS, 'todos');
-export const fetchTodosFailure = generateActionCreator(FETCH_TODOS_FAILURE, 'error');
+export const fetchTodosSuccess = generateActionCreator(
+  FETCH_TODOS_SUCCESS,
+  'todos'
+);
+export const fetchTodosFailure = generateActionCreator(
+  FETCH_TODOS_FAILURE,
+  'error'
+);
 
 export const fetchTodos = () => {
-  return (dispatch) => {
+  return dispatch => {
     dispatch(fetchTodosRequest());
 
-    return api.get('/api/todos')
+    return api
+      .get('/api/todos')
       .then(todos => {
         dispatch(fetchTodosSuccess(todos));
 

common/js/helper/api.js renamed to common/js/lib/api.js

@@ -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="/dist/images/favicon.png">
+  <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.png">
   <link type="text/css" rel="stylesheet" href="<%= vendorCss %>" />
   <link type="text/css" rel="stylesheet" href="<%= appCss %>" />
 </head>

common/js/helper/generateActionCreator.js renamed to common/js/lib/generateActionCreator.js

@@ -0,0 +1,64 @@
+const { mapValues, keyBy } = require('lodash');
+
+module.exports = {
+  // The env vars to expose on the client side.
+  clientEnv: mapValues(
+    keyBy([
+      // All CLIENT env vars that you wish to expose go here
+      // WARNING: Be careful not to expose any secrets here!
+      'NODE_ENV',
+      'APPLICATION_BASE_URL'
+    ]),
+    (env) => JSON.stringify(process.env[env])
+  ),
+
+  /* The identifier to use for css-modules.
+   */
+  cssModulesIdentifier: '[name]__[local]__[hash:base64:5]',
+
+  /* Paths for webpack to resolve into non-relative directories, so that instead
+   * of having to use relative paths:
+   *
+   * import SomeComponents from '../../../../SomeComponent';
+   *
+   * we can write this instead:
+   *
+   * import SomeComponent from 'components/SomeComponent';
+   */
+  clientResolvePaths: {
+    actions: 'common/js/actions',
+    components: 'common/js/components',
+    constants: 'common/js/constants',
+    containers: 'common/js/containers',
+    css: 'common/css',
+    fonts: 'common/fonts',
+    images: 'common/images',
+    lib: 'common/js/lib',
+    pages: 'common/js/pages',
+    reducers: 'common/js/reducers',
+    routes: 'common/js/routes',
+    store: 'common/js/store',
+    templates: 'common/templates'
+  },
+
+  serverResolvePaths: {
+    api: 'server/api',
+    constants: 'common/js/constants'
+  },
+
+  // Isomorphic configuration
+  isomorphicConfig: {
+    assets: {
+      images: {
+        extensions: [
+          'png',
+          'jpg',
+          'jpeg',
+          'gif',
+          'ico',
+          'svg'
+        ]
+      }
+    }
+  }
+};