Set up Storybook for Angular Projects

This guide will walk you through setting up Storybook for Angular projects in your Nx workspace.

Set up Storybook in your workspace

You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the Storybook plugin overview guide to get started.

Generate Storybook Configuration for an Angular project

You can generate Storybook configuration for an individual Angular project with this command:

nx g @nrwl/angular:storybook-configuration project-name

Auto-generate Stories

The @nrwl/angular:storybook-configuration generator has the option to automatically generate *.stories.ts files for each component declared in the library.

<some-folder>/
├── my.component.ts
└── my.component.stories.ts

You can re-run it at a later point using the following command:

nx g @nrwl/angular:stories <project-name>

Example

Let's take for a example a library in your workspace, under libs/feature/ui, called feature-ui. This library contains a component, called my-button.

The command to generate stories for that library would be:

nx g @nrwl/angular:stories feature-ui

and the result would be the following:

<workspace name>/
├── .storybook/
├── apps/
├── libs/
│   ├── feature/
│   │   ├── ui/
|   |   |   ├── .storybook/
|   |   |   ├── src/
|   |   |   |   ├──lib
|   |   |   |   |   ├──my-button
|   |   |   |   |   |   ├── my-button.component.ts
|   |   |   |   |   |   ├── my-button.component.stories.ts
|   |   |   |   |   |   └── etc...
|   |   |   |   |   └── etc...
|   |   |   ├── README.md
|   |   |   ├── tsconfig.json
|   |   |   └── etc...
|   |   └── etc...
|   └── etc...
├── nx.json
├── package.json
├── README.md
└── etc...

Cypress tests for Stories

The storybook-configuration generator gives the option to set up an e2e Cypress app that is configured to run against the project's Storybook instance.

To launch Storybook and run the Cypress tests against the iframe inside of Storybook:

nx run project-name-e2e:e2e

The url that Cypress points to should look like this:

'/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default'

buttoncomponent is a lowercase version of the Title in the *.stories.ts file.
primary is the name of an individual story.
style=default sets the style arg to a value of default.

Changing args in the url query parameters allows your Cypress tests to test different configurations of your component. You can read the documentation for more information.

Example Files

*.component.stories.ts file

import { moduleMetadata, Story, Meta } from '@storybook/angular';
import { ButtonComponent } from './button.component';

export default {
  title: 'ButtonComponent',
  component: ButtonComponent,
  decorators: [
    moduleMetadata({
      imports: [],
    }),
  ],
} as Meta<ButtonComponent>;

const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {
  text: 'Click me!',
  padding: 0,
  style: 'default',
};

Cypress test file

Depending on your Cypress version, the file will end with .spec.ts or .cy.ts

describe('shared-ui', () => {
  beforeEach(() =>
    cy.visit(
      '/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default'
    )
  );

  it('should render the component', () => {
    cy.get('storybook-trial-button').should('exist');
  });
});

Set up Storybook for Angular Projects

Generate Storybook Configuration for an Angular project

Auto-generate Stories

Cypress tests for Stories

Example Files

More Documentation

Migration Scenarios