Angular and Storybook

Implementing Storybook in an Angular multi-application project

Hi everyone, in this article we will have a look at how to implement Storybook in an existing Angular multi-application project. The motivation behind this is the difficulty I had when implementing Storybook in a real Angular project, a 3 years old multi-application project that has been tooled and migrated from previous versions, creating a miss-match of Node packages versions that, even without causing a problem during installation, generated a number bugs when running Storybook, bugs that were not present in projects recently created by Angular CLI. So let’s roll.

We will see in this article:

Introduction

As an application grows in size and complexity its documentation starts to get sparsed, becoming harder to maintain as implementations differ from the application pather. This happens even if we don’t add the change in the stack, different versions, improvements, or changes in the development staff. It’s hard to prevent deviations from the applications pather without good documentation, this being a problem every company I worked in the past has faced.

Adding Storybook:

First step, let us install the dependencies:

npm install @storybook/angular --save-dev
npm install babel-loader @babel/core --save-dev
Storybook main folder (Author)
"storybook": "start-storybook"

Creating stories

In this section we will be following the Storybook quick tutorial, as we create two stories.

Storybook quick start tutorial (Storybook for Angular, 2020)
npm run storybook
Storybook running (Author)

Addons

Now, addons are like upgrades to your Storybook, they add new functionalities and workflows, in the Storybook addons page you can check a number of addons created by the community and by Storybook core maintainers team.

Storybook and angular.json

We can’t speak about using Storybook in an Angular project without glossing over how the two interact.

Bugs

One of the reasons I decided to write this article was the number of problems encountered during Storybook implementation. The three main problems were bugs during installation, that prevented Storybook from running and that affected Angular application build process.

Demo module error (Author, 2020)
Error building application (Author, 2020)

Wrapping up

With seeming integration possibility, addons support giving it comprehensive customization and with the community support, Storybook may become a compulsory choice to an Angular multi-application project.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store