Storybook: Webpack dev server proxy failing

[majames]

Describe the bug

I am using storybook in full control mode and attempting to add a proxy to the webpack dev server for certain requests (as the backend API I'm querying is served off a different localhost port). This is failing to work.

To Reproduce

1. Setup storybook in full control mode
2. Mutate config with a devServer.proxy

Code snippets

// Note: storybook is served on PORT 9001
module.exports = async ({ config, mode }) => {
    config.devServer = {
      proxy: [
        {
          context: ["/requests"],
          target: "http://localhost"
        }
      ]
    };

    return config;
};

System:

• MacOS
• Framework: react
• Version: 5.0.10

Apologies if this is a duplicate, however https://github.com/storybooks/storybook/issues/208 and the other issues I found didn't seem to address this.

Any help would be much appreciated! 🙂

[majames]

Any update here? 🙏

[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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@majames Sorry for the late reply. Have you tried running with the --debug-webpack CLI option?

[ndelangen]

@majames You can use the middleware.js feature storybook has:
https://github.com/storybookjs/storybook/pull/435#issuecomment-366701274

The feature still needs documentation. We could use your help with that.

We don't use webpack-dev-server directly. We use the devMiddleware:
https://github.com/webpack/webpack-dev-middleware

which doesn't support proxies

[majames]

Thanks for following up @shilman and @ndelangen! I'll check it out and see whether it solves the problem for my use case! 🙂