Retrofitting updates in React Storybook

Continuing on from the post about versioned Storybook releases, I hit upon a simple problem: how do I fix a bug in previously released style guides? What do I mean by that? Well:

  1. Let’s say we have 10 versions of our style guide released as static Storybook builds.
  2. These builds all use an addon (the versions one in our case).
  3. That the addon has a bug, which we have now fixed.
  4. That’s all very nice and we can now release a new version of our style guide with includes the addon with the fix.
  5. But what about the rest of the published guides with the buggy addon?

On the face of it, it looks like we’d have to go back and rebuild every single version. Luckily, that is not the case. When you create a static Storybook build, you end up with something like this:

Static Storybook build

What you’re getting in that build is, first the index.html which will load your style guide. That loads the static/manager.<hash>.bundle.js which is the main storybook interface, which in turns uses the iframe.html to display your stories. The stories are in static/preview.<hash>.bundle.js

As such, what we can do is replace index.html and static/manager... and that will have any updates we may have done in the packages and addons. However, since the configuration (what goes in .storybook/config.js) is bundled with the stories in the preview file, we cannot make any changes of that sort.

Overall, a nice thing to know as we can now retrofit updates to storybook and its addons without having to checkout and rebuild each older version of our style guide. Obviously there is the caveat of making changes to an addon that are incompatible with the stories, plus the usual dangers of retrofitting stuff to released software. But it can still be helpful to know all the above, when it comes to releasing bug fixes to our style guide. Hope this helps!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store