webpack-dev-server's HMR doesn't work when mounted in subdirectory

[sarink]

Bug report

Describe the bug

When the path of the admin ui is set to something other than /, like if you have mounted your app in a subdirectory and are using a reverse-proxy (eg nginx), there is no hook to change the webpack-dev-server's HMR path.

[sarink]

Workaround:

// Because we've mounted our app at /cms, we need to monkey-patch keystone's webpack config
// so that HMR on the webpack-dev-server works properly.
// They provide the hooks to change the root path of each app, but forgot about one
// for the weback-dev-server's HMR path.
// TODO keep this until this issue is resolved: https://github.com/keystonejs/keystone/issues/2183

const { AdminUIApp } = require('@keystonejs/app-admin-ui');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

// ---------OVERRIDE----------
// First, set the right path on the client's webpack config by overriding `getWebpackConfig`
const HMR_PATH = '/cms/__webpack_hmr';

function getWebpackConfig(args) {
  const origGetWebpackConfig = require('@keystonejs/app-admin-ui/server/getWebpackConfig');
  const origConfig = origGetWebpackConfig(args);
  if (origConfig.mode === 'development') {
    origConfig.entry.reverse();
    origConfig.entry[0] = `webpack-hot-middleware/client?path=${HMR_PATH}&reload=true`;
  }
  return origConfig;
}
// ---------/OVERRIDE----------

AdminUIApp.prototype.createDevMiddleware = function({ adminMeta }) {
  // ---------OVERRIDE----------
  // Then, set the same path on the server's webpack-hot-middleware config
  const webpackHotMiddlewareConfig = {
    log: null,
    path: HMR_PATH,
  };
  // The rest is a direct copy-paste from:
  // https://github.com/keystonejs/keystone/blob/36db0022743417e52f211e504f2a08642f0a2150/packages/app-admin-ui/index.js#L270
  // ---------/OVERRIDE----------

  const webpackMiddlewareConfig = {
    publicPath: this.adminPath,
    stats: 'none',
    logLevel: 'error',
  };

  const secureCompiler = webpack(
    getWebpackConfig({
      adminMeta,
      entry: 'index',
    })
  );

  const secureMiddleware = webpackDevMiddleware(secureCompiler, webpackMiddlewareConfig);
  const secureHotMiddleware = webpackHotMiddleware(secureCompiler, webpackHotMiddlewareConfig);

  if (this.authStrategy) {
    const publicCompiler = webpack(
      getWebpackConfig({
        // override lists so that schema and field views are excluded
        adminMeta: { ...adminMeta, lists: {} },
        entry: 'public',
      })
    );

    const publicMiddleware = webpackDevMiddleware(publicCompiler, webpackMiddlewareConfig);
    const publicHotMiddleware = webpackHotMiddleware(publicCompiler, webpackHotMiddlewareConfig);

    return [
      {
        secure: secureMiddleware,
        public: publicMiddleware,
      },
      {
        secure: secureHotMiddleware,
        public: publicHotMiddleware,
      },
    ];
  } else {
    return [
      {
        secure: secureMiddleware,
      },
      {
        secure: secureHotMiddleware,
      },
    ];
  }
};

module.exports = { AdminUIApp };

Usage:

const { AdminUIApp } = require('the-above-file');
module.exports = {
  keystone,
  apps: [
    // customize the following paths and the `const HMR_PATH` in the above file as appropriate to suit your needs
    new AdminUIApp({
      adminPath: '/cms/admin',
      apiPath: '/cms/api/graphql',
      graphiqlPath: '/cms/api/graphiql',
    }),
  ],
};

[stale]

It looks like there hasn't been any activity here in over 6 months. Sorry about that! We've flagged this issue for special attention. It wil be manually reviewed by maintainers, not automatically closed. If you have any additional information please leave us a comment. It really helps! Thank you for you contribution. :)

[bladey]

Keystone 5 has officially moved into active maintenance mode as we push towards the next major new version Keystone Next, you can find out more information about this transition here.

In an effort to sustain the project going forward, we're cleaning up and closing old issues such as this one. If you feel this issue is still relevant for Keystone Next, please let us know.