Storybook-HTML Tutorial – Part 1 – Project Setup

My motivation for a Storybook Workflow with pure HTML / HandlebarJS Templates is written down in the previous blog post. Please check it out, if you want to know more about it.

This blog post explains, how you can get a Storybook-html with some useful addons build up. Storybook-html is the most basic version of Storybook. All other VueJS, Polymer, React Versions are more or less derivativ from this version. If you want to integrate you own Framework Version of Storybook, then Storybook-html is a great starting point.

Nevertheless, the kitchen sink example project proivided by the Storybook Community is great as a starter as well. Their example projects contain the most common Addon-Ons, plus their code examples reveal very well the possibilities of Storybook. This kind of example project encouraged me the most to tinker around. According to my positive experience with it, I have chosen to extend the Storybook kitchen sink example for this tutorial series.

If you want to have a clean Storybook-html setup, please follow the Quick Start Guide by Storybook.

Download Storybook and setup html-kitchen-sink

As a small disclaimer for this tutorial series, you can follow me step by step, or just jump to a certain tutorial point. I created a few Github branches and commits, which you can checkout. You can start from these and then follow the further explanations.

Let’s start! For the beginning, I downloaded the Storybook Repo Version 4.2.14 from Github (A newer version is available, but the principles stays the same). Afterwards, I copied the Storybook html-kitchen-sink example from the repo folder in my project folder.

If you have download and moved all files, we can start with the installation. Unfortunately, the combination of “npm install” and “npm run storybook” fails, due to missing dev-dependencies… So let add them and install those:

The storybook interface should now run without any problem and it is supposed to look like this screenshot:

One caveat exist while I was using the kitchen example via copy and paste. I was not able to the fix the configuration for the command “npm run generate-addon-jest-testresults”. A Test driven development with Jest doesn’t work yet, because of some missing configuration knowledge by myself. If you have some experience with Jest configs, some help would be great.

However, Storybook is running now and we reached the first milestone of this tutorial. All changes and procedures are committed on Github and directly available in branch setup-init.

Download Project via terminal commands

If this was too complicated, please download directly my project from Github via your terminal:

Next Steps

Part 2 deals with the creation of Styleguide Skeleton within Storybook. Stay tuned!