Feature: custom proxy settings

First of all, great work with react-story book! I love how I can now jump between different states of my components quickly, and work on the visual changes.

So I have a component that fetches data from an api, and plots it onto a chart. Although I can write a story and feed mocked data into the component, sometimes it’s helpful to render the “smart” version of the component and see it in real action. Problem is, I used to setup my own express server with webpackDevMiddleware, and then configure proxies so I can redirect api calls to another port. I couldn’t find a way to setup similar configuration when using react-storybook. I ended up with a hack by going into node_modules/.bin/start-storybook and put my proxy settings there.

I’m not sure if this is a use case the authors intended to support, but I think it’ll be really nice if I can use react-storybook as a playground for all sorts of components, whether they’re dumb or smart. To achieve that, we would need a way to support custom proxy settings.

[indiesquidge]

@ndelangen, just when I saw your message I was able to find a solution to my problem using the awesome middleware customization roughly outlined in #435.

It is a very similar solution to @yianL’s solution above, only I am not creating my own Express server and instead leveraging Storybook’s router handler in the middleware.

I have the following in .storybook/middleware.js

const proxy = require('http-proxy-middleware')

module.exports = function expressMiddleware (router) {
  router.use('/api', proxy({
    target: 'https://api-endpoint.com',
    changeOrigin: true
  }))
}

This has a dependency on the http-proxy-middleware package.

It uses a proxy function to map a context (“/api”) to a target (“api-endpoint.com”). One thing to note is that the changeOrigin option must be explicitly set to true in order for the origin of the host header to be changed to the target URL. The proxy function can be used for any number of proxies.

Thank y’all so much for exposing the middleware custom config in Storybook, that is a very helpful feature indeed 💛

[japboy]

It is cool if devServer.proxy would work just like webpack-dev-server. I’m using Storybook w/ Vue