How to enable and integrate Storybook for the NX projects

Prerequisites

• The NX workspace is already created and configured
• The NX project that you want to enable Storybook for already exists (i.e. frontend)

Step by Step

1. Install the storybook dependencies

npm install --dev @nrwl/storybook

2. Configure Storybook for your NX project

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

3. Run Storybook to see if it is working properly

nx run project-name:storybook

4. Create the stories for your components

For each component that should be visible in storybook, it is neccessary to create a stories file (i.e. component-name.component.stories.ts).

This File should contain all the storybook configuration for your component.

Example:

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

export default {
  title: 'Components/HeaderComponent',
  component: HeaderComponent,
  decorators: [
    moduleMetadata({
      declarations: [HeaderComponent],
    }),
  ],
} as Meta<HeaderComponent>;

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

export const emptyHeader = Template.bind({});
emptyHeader.args = {
  title: undefined,
  size: undefined,
};
export const setHeader = Template.bind({});
setHeader.args = {
  title: 'Home Page',
  size: 'large',
};

After creating the stories file, the component should be visible in storybook.