Src Resolver

README.md

@@ -94,6 +94,7 @@ src
 
 Gantry has a purposefully slimmer webpack configuration than some other starter kits to make it easier to extend without wondering what all of the individual loaders and plugins do, whether they're being used, or if they're even necessary. Some key points of our webpack configuration are below, see the TECH.md file for the full walkthrough.
 
+* Importing absolute paths are treated as if they start in `/src` or `/node_modules`.
 * JS is handled by babel, which is configured in the .babelrc file in the root of the project.
 * SCSS Modules with sass-resources-loader are pre-configured to use the `./styles/resources` directory to auto import the files there.
 * SCSS Modules is set up with source maps disabled for production mode.

TECH.md

@@ -2,6 +2,16 @@
 
 We use one file for both Production and Development webpack setups because of webpack v4's [new `--mode` flag](https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a). I followed [this tutorial](https://www.valentinog.com/blog/webpack-4-tutorial/) to get started with a basic webpack v4 config file.
 
+### Resolve
+```js
+resolve: {
+  modules: ['src', 'node_modules']
+},
+```
+Webpack's [`resolve` config](https://webpack.js.org/configuration/resolve/#resolve-alias) lets us tell it to look for absolute paths as if they were paths from `/src`.
+
+## Module
+
 Webpack's config maps different `tests` to different loaders, where the tests deal with filenames and match them with regex patterns. Each rule tests one thing and then uses the loader setup defined to handle that file type.
 
 ### JS
@@ -64,8 +74,8 @@ However, if an SVG is imported with a [resourceQuery](https://webpack.js.org/con
 #### Example SVG imports
 
 ```js
-import Crown from '../../assets/svg/crown.svg' // Will create a <Crown /> react component
-import crown from '../../assets/svg/crown.svg?external' // Will use the file loader
+import Crown from 'assets/svg/crown.svg' // Will create a <Crown /> react component
+import crown from 'assets/svg/crown.svg?external' // Will use the file loader
 // ...
 
 <Crown className={styles.crownBlue} /> // applies the className to the <svg> element and can thus manipulate the contents

config/webpack.config.js

@@ -96,6 +96,12 @@ module.exports = (env, argv) => {
     output: {
       publicPath: '/'
     },
+    /* This allows us to import things with absolute paths based on /src
+     * For example: import SomeComponent from 'components/someComponent'
+     */
+    resolve: {
+      modules: ['src', 'node_modules']
+    },
     module: {
       rules: [
         /* This will make the babel-loader handle all .js files. We have set up two presets in

jsconfig.json

@@ -0,0 +1,15 @@
+{
+  // This fixes VSCode's "Go To Definition" breaking with our absolute paths from src based on webpackconfig.resolve.modules
+  // https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases
+  "compilerOptions": {
+    // This must be specified if "paths" is set
+    "baseUrl": ".",
+    // Relative to "baseUrl"
+    "paths": {
+      "*": [
+        "*",
+        "src/*"
+      ]
+    }
+  }
+}

package.json

@@ -75,6 +75,7 @@
     ]
   },
   "jest": {
+    "moduleDirectories": ["node_modules", "src"],
     "moduleNameMapper": {
       "^.+\\.s?css$": "identity-obj-proxy",
       "^.+\\.svg\\?external$": "<rootDir>/config/fileMock.js"

src/containers/profile/profileContainer.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import {connect} from 'react-redux'
 import PropTypes from 'prop-types'
-import userActions from '../../redux/user/userActions'
+import userActions from 'redux/user/userActions'
 import styles from './profile-container.scss'
-import Avatar from '../../components/avatar/avatar'
-import Gear from '../../assets/svg/repairing-service.svg'
-import gearSrc from '../../assets/svg/repairing-service.svg?external'
+import Avatar from 'components/avatar/avatar'
+import Gear from 'assets/svg/repairing-service.svg'
+import gearSrc from 'assets/svg/repairing-service.svg?external'
 
 export class Profile extends React.Component {
   getProfileDetails = () => {

src/redux/user/userActions.js

@@ -1,4 +1,4 @@
-// import { getSkillsData } from '../../services/profile'
+// import { getSkillsData } from 'services/profile'
 import { sampleNames, sampleSkills } from '../../../testing/stubs'
 
 /* Action Type Constants */

src/redux/user/userReducer.js

@@ -1,4 +1,4 @@
-import createReducer from '../../utils/createReducer'
+import createReducer from 'utils/createReducer'
 import {types} from './userActions'
 
 /* State Shape

src/views/home/home.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styles from './home.scss'
-import Profile from '../../containers/profile/profileContainer'
+import Profile from 'containers/profile/profileContainer'
 
 class HomeRoute extends React.Component {
   render () {