Storybook: Change HMR middleware path?

[ericclemmons]

Hi! Loving react-storybook so far!

I have this:

const storybook = require("@kadira/storybook/dist/server/middleware").default;

app.use("/stories/", storybook(".storybook"));

The problem is that HMR fails because the hot-update modules are on /, not /stories/.

Is there a way to fix this?

[ericclemmons]

By manually changing the entry to require.resolve('webpack-hot-middleware/client') + '?path=/stories/__webpack_hmr&reload=true' I was able to get this working.

Perhaps this should be added at config-time (just like custom addons.js) with config.output.publicPath taken into account?

${require.resolve('webpack-hot-middleware/client')}?path=${config.output.publicPath}/__webpack_hmr&reload=true

[ericclemmons]

I ended up going for "full control" to accomplish this:

https://getstorybook.io/docs/react-storybook/configurations/custom-webpack-config

module.exports = function(config, ENV) {
  config.entry.preview = config.entry.preview.map(function(entry) {
    if (entry.includes("webpack-hot-middleware")) {
      return `${require.resolve('webpack-hot-middleware/client')}?path=/stories/__webpack_hmr&reload=true`;
    }

    return entry;
  });

  config.module.loaders.push({
    test: /\.json$/,
    loader: require.resolve("json-loader"),
  });

  return config;
};

But also, I had to add this to config.js:

// Required for Webpack HMR to work, since storybook is under a path
__webpack_public_path__ = "/stories/";

[jimmiebtlr]

Are you certain about

"The problem is that HMR fails because the hot-update modules are on /, not /stories/."

As far as I can tell it's on the full directory, I'm getting changes triggered from my stories without them being in the /stories directory.

[ericclemmons]

@jimmiebtlr In my scenario, Storybook is running as a middleware within an existing app under /stories.

When they're on the root (e.g. /), everything's fine. But I had to do the stuff for HMR to work when storybook was _not_ on the root.

Does that make more sense?

There was a good deal of trial-and-error to reach the resolution I did. Having it in the lib would've shaved off an hour or two of debugging...

[ndelangen]

In my scenario, Storybook is running as a middleware within an existing app under /stories.

That is interesting! Can you maybe write a blogpost about that? I think that's rarely how storybook is used, but it's quite interesting!

[ericclemmons]

@ndelangen So I hear! The reason is so that stories are part of the docs & overall app (at least for internal, logged in users), instead of hidden behind a developer-only experience.

Feel free to close if no one else cares :)

[ndelangen]

I care about storybook integrating into whatever you have so it provides maximum value to you.

Running storybook inside a route in your own app, is an option I had not yet considered before, but would be happy to have and support.

Would you be interested in opening a PR that would allow it?
You seem to have a setup that will allow you to test it.

Would you be able to extract that what you have into a demo?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[kersh]

Hi everyone! Thanks for making Storybook, I really appreciate the work you put into this project!

I was wondering if anyone can give me an advice or help with the following issue:
I'm working on a setup where our storybook is running on /product-storybook/ path. So what I done so far:

1. Using custom webpack config I've set storybookBaseConfig.output.publicPath = '/product-storybook/';
2. I've took @ericclemmons approach so I set:

return `${require.resolve('webpack-hot-middleware/client')}?path=/product-storybook/__webpack_hmr&reload=true`;

1. Same as @ericclemmons recommended I've set:

__webpack_public_path__ = '/product-storybook/';

However this didn't work. My __webpack_hmr is still served from http://localhost:6006/__webpack_hmr but I need to have http://localhost:6006/product-storybook/__webpack_hmr.

I've checked source code of storybook and found that:

node_modules/@storybook/vue/dist/server/middleware.js:42:

router.use((0, _webpackHotMiddleware2.default)(compiler));

Doesn't have any options passed into webpack-hot-middleware.

So when I pass path option it works as expected:

router.use((0, _webpackHotMiddleware2.default)(compiler, {
  path: '/product-storybook/__webpack_hmr'
}));

Also according to webpack-hot-middleware API client and middleware options must match:
https://github.com/glenjamin/webpack-hot-middleware#middleware