feat: use module-alias over app-module-path; use symbol-aliased paths (@, $) for less confusion

Author: calvinl

README.md

@@ -71,6 +71,30 @@ If using Heroku, simply add a `Procfile` in the root directory. The
 web: npm run serve
 ```
 
+## Path Aliases
+
+In `package.json`, there is a property named `_moduleAliases`. This object
+defines the require() aliases used by both webpack and node.
+
+Aliased paths are prefixed with one of two symbols, which denote different
+things:
+
+`@` - paths in the `common/` folder, e.g. `@components` or `@actions`, etc.
+`$` - paths in the `server/` folder
+
+Aliases are nice to use for convenience, and lets us avoid using relative paths
+in our components:
+
+```
+// This sucks
+import SomeComponent from '../../../components/SomeComponent';
+
+// This is way better
+import SomeComponent from '@components/SomeComponent';
+```
+
+You can add additional aliases in `package.json` to your own liking.
+
 ## Environment Variables
 
 In development mode, environment variables are loaded by `dotenv` off the `.env`

client/index.js

@@ -5,8 +5,8 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'react-router-redux';
 import createHistory from 'history/createBrowserHistory';
-import configureStore from 'store';
-import App from 'containers/App';
+import configureStore from '@store';
+import App from '@containers/App';
 import Loadable from 'react-loadable';
 
 // Hydrate the redux store from server state.

client/styles.js

@@ -2,4 +2,4 @@
 import 'semantic-ui-css/semantic.min.css';
 
 // Base styles
-import 'css/base/index.scss';
+import '@css/base/index.scss';

common/js/actions/todos.js

@@ -5,9 +5,9 @@ import {
   FETCH_TODOS_REQUEST,
   FETCH_TODOS_SUCCESS,
   FETCH_TODOS_FAILURE
-} from 'constants/index';
-import api from 'lib/api';
-import generateActionCreator from 'lib/generateActionCreator';
+} from '@constants/index';
+import api from '@lib/api';
+import generateActionCreator from '@lib/generateActionCreator';
 
 export const addTodo = generateActionCreator(ADD_TODO, 'text');
 export const removeTodo = generateActionCreator(REMOVE_TODO, 'id');

common/js/components/todos/TodoList/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { List } from 'semantic-ui-react';
-import { TodoItem } from 'components/todos';
+import { TodoItem } from '@components/todos';
 import classnames from 'classnames';
 import css from './index.scss';
 

common/js/components/todos/TodoList/index.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TodoList from './index';
+
+describe('TodoList', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<TodoList />, div);
+  });
+});

common/js/containers/App/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Switch } from 'react-router-dom';
-import { RouteWithSubRoutes } from 'components/common';
 import { Container } from 'semantic-ui-react';
-import { Header, Footer } from 'components/common';
+import { Header, Footer, RouteWithSubRoutes } from '@components/common';
 import { hot } from 'react-hot-loader';
-import routes from 'routes';
+import routes from '@routes';
 
 const App = () => (
   <Container fluid={false}>

common/js/containers/Todos/index.js

@@ -2,9 +2,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
-import * as actions from 'actions/todos';
+import * as actions from '@actions/todos';
 import { Container } from 'semantic-ui-react';
-import { TodoList, TodoForm } from 'components/todos';
+import { TodoList, TodoForm } from '@components/todos';
 
 class TodosContainer extends Component {
   static propTypes = {

common/js/pages/Todos/index.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import Loadable from 'react-loadable';
-import { Loading } from 'components/common';
-import { fetchTodos } from 'actions/todos';
+import { Loading } from '@components/common';
+import { fetchTodos } from '@actions/todos';
 
 // NOTE: To turn off dynamic imports, import this container normally using:
-// import TodosContainer from 'containers/Todos';
+// import TodosContainer from '@containers/Todos';
 const TodosContainer = Loadable({
   loader: () => import('../../containers/Todos'),
   loading: Loading

common/js/reducers/todos.js

@@ -1,7 +1,7 @@
 import {
   ADD_TODO, REMOVE_TODO, TOGGLE_TODO,
   FETCH_TODOS_REQUEST, FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE
-} from 'constants/index';
+} from '@constants/index';
 
 const defaultState = {
   todos: [],