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: [],

common/js/routes/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-import Home from 'pages/Home';
-import Todos from 'pages/Todos';
+import Home from '@pages/Home';
+import Todos from '@pages/Todos';
 
 export default [
   {

common/js/store/index.dev.js

@@ -1,6 +1,6 @@
 import { compose, createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-import rootReducer from 'reducers';
+import rootReducer from '@reducers';
 import { createLogger } from 'redux-logger';
 import { routerMiddleware } from 'react-router-redux';
 

common/js/store/index.prod.js

@@ -1,6 +1,6 @@
 import { compose, createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-import rootReducer from 'reducers';
+import rootReducer from '@reducers';
 import { routerMiddleware } from 'react-router-redux';
 
 export default function configureStore(initialState, history = null) {

config/index.js

@@ -1,3 +1,4 @@
+
 module.exports = {
   // Enable or disable server-side rendering
   enableSSR: true,
@@ -19,37 +20,6 @@ module.exports = {
    */
   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',
-    middleware: 'server/middleware'
-  },
-
   // Isomorphic configuration
   isomorphicConfig: {
     assets: {

package-lock.json

@@ -36,6 +36,26 @@
       "syntax-dynamic-import"
     ]
   },
+  "_moduleAliases": {
+    "@css": "common/css",
+    "@fonts": "common/fonts",
+    "@images": "common/images",
+    "@actions": "common/js/actions",
+    "@components": "common/js/components",
+    "@constants": "common/js/constants",
+    "@containers": "common/js/containers",
+    "@lib": "common/js/lib",
+    "@middleware": "common/js/middleware",
+    "@pages": "common/js/pages",
+    "@reducers": "common/js/reducers",
+    "@routes": "common/js/routes",
+    "@store": "common/js/store",
+    "$api": "server/api",
+    "$lib": "server/lib",
+    "$middleware": "server/middleware",
+    "$templates": "server/templates",
+    "$config": "config"
+  },
   "scripts": {
     "start": "better-npm-run dev:start",
     "prod": "better-npm-run prod:build && better-npm-run serve",
@@ -187,7 +207,6 @@
     "yn": "^2.0.0"
   },
   "dependencies": {
-    "app-module-path": "^2.2.0",
     "axios": "^0.17.1",
     "body-parser": "^1.18.2",
     "chokidar": "^2.0.0",
@@ -201,6 +220,7 @@
     "history": "^4.7.2",
     "include-media": "^1.4.9",
     "lodash": "^4.17.4",
+    "module-alias": "^2.0.6",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",

package.json

@@ -1,23 +1,13 @@
+// Register the `_moduleAliases` as defined in package.json.
+require('module-alias/register');
+
 const fs = require('fs');
 const path = require('path');
-const config = require('../config');
+const config = require('$config');
 const env = process.env.NODE_ENV || 'development';
-const { addPath } = require('app-module-path');
 const Loadable = require('react-loadable');
 const chokidar = require('chokidar');
 
-global.__basedir = path.join(__dirname, '..');
-
-// Lets us access module paths inside this server directory.
-addPath(path.join(__dirname));
-
-// Adds common/js to the app module path so we can access local modules without
-// having to use relative paths on the server-side. This is done on the client
-// side using webpack's `resolve`.
-addPath(path.join(__dirname, '../server'));
-addPath(path.join(__dirname, '../common'));
-addPath(path.join(__dirname, '../common/js'));
-
 // HTML files are read as pure strings
 require.extensions['.html'] = (module, filename) => {
   module.exports = fs.readFileSync(filename, 'utf8');

server/index.js

@@ -3,13 +3,13 @@ import { Provider } from 'react-redux';
 import { StaticRouter, matchPath } from 'react-router';
 import { setMobileDetect, mobileParser } from 'react-responsive-redux';
 import { renderToString } from 'react-dom/server';
-import { ErrorPage } from 'components/common';
+import { ErrorPage } from '@components/common';
 import { getBundles } from 'react-loadable/webpack';
 import Loadable from 'react-loadable';
 import render from './render';
-import routes from 'routes';
-import configureStore from 'store';
-import App from 'containers/App';
+import routes from '@routes';
+import configureStore from '@store';
+import App from '@containers/App';
 import config from '../../config';
 
 let stats = null;

server/lib/.gitkeep

@@ -3,7 +3,7 @@ import { template } from 'lodash';
 import { Helmet } from 'react-helmet';
 
 const { NODE_ENV } = process.env;
-const compile = template(require('templates/layouts/application.html'));
+const compile = template(require('$templates/layouts/application.html'));
 const env = NODE_ENV || 'development';
 
 export default function render(html, initialState = {}, bundles = []) {

server/renderer/handler.js

@@ -5,7 +5,7 @@ import compression from 'compression';
 import Api from './api';
 import cookieParser from 'cookie-parser';
 import ReactRenderer from './renderer';
-import { httpsRedirect } from 'middleware';
+import { httpsRedirect } from '$middleware';
 
 const env = process.env.NODE_ENV || 'development';
 const app = new express();

server/renderer/render.js

@@ -9,8 +9,10 @@ import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { ReactLoadablePlugin } from 'react-loadable/webpack';
 import { mapValues, keyBy } from 'lodash';
+import { _moduleAliases } from '../package.json';
 import config from '../config';
 
+let cwd = process.cwd();
 let ssr = yn(process.env.SSR) || false;
 let isoPlugin = new IsoPlugin(config.isomorphicConfig).development(isDev);
 let extractTextPlugin = new ExtractTextPlugin({
@@ -57,8 +59,8 @@ export default {
   output,
   resolve: {
     extensions: ['.js', '.jsx', '.scss'],
-    alias: mapValues(config.clientResolvePaths, str =>
-      path.join(process.cwd(), ...str.split('/'))
+    alias: mapValues(_moduleAliases, aliasPath =>
+      path.join(cwd, ...aliasPath.split('/'))
     )
   },
   module: {