Installing Storybook

Learn how to install Storybook into an existing Ember application so you can start building out your component library.

Summary

We’ll start out by using the command recommended by Storybook in their quick start guide:

npx -p @storybook/cli sb init

Next, we’ll install the Storybook Ember Addon that hooks into Ember CLI:

ember install @storybook/ember-cli-storybook

Now let's go over what's changed in our project. We’ll see two new directories in the root of our project — .storybook/ and stories/. In our package.json file we’ll see come changes as well. There’s some npm packages installed by Storybook, along with two new npm run scripts.

// package.json
{
  "scripts": {
    ...
    "storybook": "start-storybook -p 6006 -s dist",
    "build-storybook": "build-storybook -s dist"
  }
}

Inside the .storybook/ directory we’ll see one file, main.js:

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
}

This is the entry point for storybook and provides some basic configuration, like where to find the stories we want to load. Now we're ready to run Storybook locally. First you’ll start your Ember server – Storybook needs this to be running so it can load your Ember components:

ember s

After your server is up and running we'll see a new file, .storybook/preview-head.html. This file is auto generated by the ember-cli-storybook addon and keeps our Ember and Storybook server in sync. Next run the Storybook server in a second terminal window using our new npm run script.

npm run storybook

Our Storybook server is now running on localhost:6006!

Installing Storybook

Summary

Questions?