Set up Storybook for React Projects

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

Generate Storybook Configuration for a React project

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

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

Nx React Storybook Preset

@nrwl/react ships with a Storybook preset to make sure it uses the very same configuration as your Nx React application. When you generate a Storybook configuration for a project, it'll automatically add the preset to your configuration.

1const rootMain = require('../../../.storybook/main');
2
3module.exports = {
4  ...rootMain,
5  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
6  ...
7};
8

Auto-generate Stories

The @nrwl/react: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/react:stories <project-name>

nx g @nrwl/react:stories feature-ui

<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

*.stories.tsx file

1import { Story, Meta } from '@storybook/react';
2import { Button, ButtonProps } from './button';
3
4export default {
5  component: Button,
6  title: 'Button',
7} as Meta;
8
9const Template: Story<ButtonProps> = (args) => <Button {...args} />;
10
11export const Primary = Template.bind({});
12Primary.args = {
13  text: 'Click me!',
14  padding: 0,
15  style: 'default',
16};
17

Cypress test file

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

1describe('shared-ui', () => {
2  beforeEach(() =>
3    cy.visit(
4      '/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default'
5    )
6  );
7
8  it('should render the component', () => {
9    cy.get('storybook-trial-button').should('exist');
10  });
11});
12

More Documentation

You can find all Storybook-related Nx topics here.

For more on using Storybook, see the official Storybook documentation.

Migration Scenarios

Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the official Storybook page

• Upgrading to Storybook 6
• Migrate to the Nrwl React Storybook Preset