I’ve been having some great productivity gains recently by adopting Storybook in the workplace recently, and can’t sing it’s virtues enough. We started small, by breaking up existing designs into individualised components as devs, and now we’re looking at how we can bring the process forward into the design phase.
Starting with your Storybook config directory, typically found at
.storybook/ in the root of your project, we’re going to create a file called
preview-head.html. Take the BugHerd generated code, and paste it into this file with the
<script> tags in place.
That’s it, Storybook handles the rest! A quick peak at the documentation tells us that we can also add the script to the manager, by calling the file
manager-head.html, but as a point of personal preference I found it works better in the preview window as placing it in the manager may interfere with BugHerd’s ability to highlight the elements in the preview window.
You can read the well put together documentation here.