Storybook for Ember tutorial

Setup Storybook in your development environment

Storybook runs alongside your app in development mode. It helps you build UI components isolated from the business logic and context of your app. This edition of Learn Storybook is for Ember; other editions exist for React, React Native, Vue, Angular and Svelte.

Storybook and your app

Setup Ember Storybook

We’ll need to follow a few steps to get the build process set up in your environment. To start with, we want to use ember-cli to setup our build system, and enable Storybook and Qunit testing in our app. Let’s run the following commands:

# Create our application:
ember new taskbox --yarn

cd taskbox

# Add Storybook:
npx -p @storybook/cli sb init

# Add Ember storybook adapter
ember install @storybook/ember-cli-storybook

At the time of writing this version of the tutorial, adding the @storybook/ember-cli-storybook will yield the following message:

The ember generate entity-name command requires an entity name to be specified. For more details, use ember help.

This is just a warning! Everything is properly installed and configured.

Throughout this version of the tutorial we'll be using yarn to run the majority of our commands. If you don't have yarn installed, you can still go through the tutorial without any issues. You'll need to adjust the commands to their npm counterparts.

We'll need to install some additional packages in our app, more specifically one Ember addon and one package. Run the following commands:

ember install ember-truth-helpers

Followed by:

yarn add -D npm-run-all

And finally make a small change to our package.json to allow Storybook to work properly with our Ember app.

Add the following entries to your scripts:

{
  "scripts": {
    "start": "ember serve",
    "storybook": "start-storybook -p 6006 -s dist --ci",
    "storybook-dev": "npm-run-all --continue-on-error --parallel start storybook",
    "prebuild-storybook": "ember build",
    "build-storybook": "build-storybook -s dist"
  }
}

These changes are necessary based on how both Storybook and Ember handle their build processes. Going over them:

  • storybook's script was updated to include the ci flag to prevent it from opening before Ember finishes building the app
  • Both storybook-dev and prebuild-storybook scripts were introduced to help streamline our workflow throughout the tutorial

Now we can quickly check that the various environments of our application are working properly:

# Run the test runner (Qunit) in a terminal:
ember test --server

# Start the component explorer on port 6006:
npm run storybook-dev

# Run the frontend app proper on port 4200:
ember start

Our three frontend app modalities: automated test (Qunit), component development (Storybook), and the app itself.

3 modalities

Depending on what part of the app you’re working on, you may want to run one or more of these simultaneously. Since our current focus is creating a single UI component, we’ll stick with running Storybook.

Reuse CSS

Taskbox reuses design elements from the GraphQL and React Tutorial example app, so we won’t need to write CSS in this tutorial. Copy and paste this compiled CSS into the app/styles/app.css file.

Taskbox UI

If you want to modify the styling, the source LESS files are provided in the GitHub repo.

Add assets

To match the intended design, you'll need to download both the font and icon directories and place its contents inside your app/styles folder. Issue the following commands in your terminal:

npx degit chromaui/learnstorybook-code/src/assets/font app/styles/font
npx degit chromaui/learnstorybook-code/src/assets/icon app/styles/icon
We use degit to download folders from GitHub. If you want to do it manually, you can grab them here.

After adding styling and assets, the app will render a bit strangely. That’s OK. We aren’t working on the app right now.

Commit changes

When our project was initialized, Ember's CLI already created a local repository for us. At this stage it's safe to add our files to the first commit.

Run the following commands to add and commit the changes we've done so far.

$ git add .

Followed by:

$ git commit -m "first commit"

That's it. Let's start building our first component!

Next Chapter
Simple component
Build a simple component in isolation