How to configure electrode to use webpack's resolve alias

readme.md

How to configure electrode to use webpack's resolve alias

ISSUE DESCRIPTION

The electrode docs currently show incorrect instructions on how to do this.

SOLUTION

OVERRIDE ELECTRODE WEBPACK CONFIG

CREATE FILE STRUCTURE

archetype/config/webpack/
├── config-resolve-alias.js
├── webpack.config.dev.js
└── webpack.config.js

config-resolve-alias.js

const path = require("path");
const clientPath = path.resolve(__dirname, "../../../src/client");

module.exports = {
  resolve: {
    extensions: [".js", ".jsx"],
    alias: {
      actions: path.resolve(clientPath, "actions"),
      config: path.resolve(clientPath, "config"),
      containers: path.resolve(clientPath, "containers"),
      components: path.resolve(clientPath, "components"),
      constants: path.resolve(clientPath, "constants"),
      utils: path.resolve(clientPath, "utils"),
      reducers: path.resolve(clientPath, "reducers"),
      styles: path.resolve(clientPath, "styles"),
      store: path.resolve(clientPath, "store"),
      views: path.resolve(clientPath, "views")
    }
  }
};

webpack.config.dev.js AND webpack.config.js

module.exports = require("./config-resolve-alias");

DISABLE SERVER SIDE RENDERING

config/default.js // add serverSideRendering: false

module.exports = {
  plugins: {
    [...]
    webapp: {
      module: "electrode-react-webapp/lib/hapi",
      options: {
        pageTitle: "tools",
        htmlFile: "src/client/app.html",
        paths: {
          "/{args*}": {
            content: {
              module: "./{{env.APP_SRC_DIR}}/server/views/index-view"
            }
          }
        },
        serverSideRendering: false
      }
    }
  },
  [...]