Dean Mraz

I am passionate about delivering ideas and spending most of my time on product management techniques.

January 22nd 2019

Ember Storybook Setup

Storybook is the UI Development Environment that I've been looking for. You can:

  • Visualize
  • Document
  • Manually Test
  • Automate Visual Test
  • Produce a Static output of the Storybook that can be hosted/shared
  • Plus much more with these addons or you can create your own

The Storybook devs have put in a good amount of effort but there were some issues on getting it working in Emberjs. I hope with this post, I can share my setup so we can make it easier in the future.

Notable links that helped me setup the project:

Example Project

Steps

  • Note yarn can be switched for npm run
  • Yarn scripts can be found in the package.json

1) Install the dependencies and add the scripts

2) Setup the Storybook config files

3) Write some stories

4) Run Ember and Run Storyboard

  • $ yarn start
  • $ yarn storybook
  • NOTE: had issues making this one command so thats why it they are separate commands that should be ran in different terminals.

5) Configure Jest & write some jest image snapshot tests

  • $ yarn jest:integration

6) Create a share able Storybook distribution

  • $ yarn storybook:dist

Addons

  • Knobs lets you create color pickers, dropdowns and ability to change text. Great for manual testing during development.
  • Notes Allows you to document the component
  • Viewport allows you to visualize the look on different screens.

Visual Testing

Still new to Storybook and know this wasn't an in depth tutorial so tweet at me if you need help or want to see more.

Lets chat on Twitter

Leave a comment by replying this tweet.