Use Storybook to Develop React Components in Nx

Instructor: [0:00] In our small demo application, we have at the very top our header bar, which displays the title of the application. This is something that can actually be reused across various applications, which is also the reason why we encapsulate it in its own library.

[0:14] For now, it lives still under that store, but it could easily be moved out into a more general purpose folder where all of our applications can import it very easily. Right now, the header is very hard-coded, so the name is directly embedded into the component.

[0:29] Let's change this a bit and make it more flexible. First of all, we add here a title, which will be of type string. Further down here, we then actually use the props.title to display the actual title that gets parsed in.

[0:47] We also need to adjust our code so we go to the app JSX file, where we have used here our header top here. We actually parsed in the title. If we save again, the compilation still takes place. If we refresh here, we see it still works.

[1:06] This type of development is one way of doing it. We actually go in, we change the component, we refresh our entire application, and we verify that our component actually works as we expect.

[1:18] There is a much nicer way to develop such components, which is Storybook. Storybook is a framework that allows you to develop such components, especially if they are shared components in isolation.

[1:30] There is a kind of a catalog to list off the components. It helps you visualize them, use that catalog to play around with the components and see how the component behaves based on different input.

[1:43] Since Nx aims to bundle the best tools on the market, it obviously also has support for Storybook. The first step is to add the nrwl/storybook support and we install it with Yarn in this case.

[1:56] Once we have installed that, we can actually have a look at the nrwl/react package. The nrwl/react package contains a schematic that is called Storybook configuration. This sets up Storybook for React library, which doesn't yet have Storybook configured.

[2:12] You can also see that there are different order schematics like component story, which generates basically a single story for a React component, or even just like stories in general, which simply parses your library and generates stories for all of the components that don't have stories yet.

[2:28] Let's explore the Storybook configuration. We want to create a Storybook for our shared component that lives here in our libs folder UI shared, especially for the header component. In order to add a Storybook configuration, we again use the Nx generate command, now React, and now use that storybook configuration.

[2:48] We need to give it a name of the product where we want to add the Storybook configuration, which in our case is Store UI shared. If you go again in our workspace JSON and then we search like Store UI shared, we can see that this is actually the name of our library.

[3:05] Furthermore, we also give it the flax configuration Cypress as well as generate stories. We want to explore this flax in more detail, but to generate stories flag for instance, already generates automatically stories for components that are already present in that shared UI library, which now encases that [inaudible 03.23] component.

[3:23] Just to be sure, let's use the dry run again to see what gets generated. You can see now we can confirm again like whether we want to run Cypress specs. As a result, you can see that in our store UI shared, we get a bunch of configuration files for storybook and then we get here already a story generated for our header component.

[3:42] Let's remove the dry run and run the command physically on our disc. Once installation completes, what you can see is that inside our UI shared, we get a such.storybook configuration folder, which contains a bunch of different storybook configuration files, which are specific to the version of storybook you're currently using.

[4:04] Also, there is a global storybook configuration file, which holds basically the configuration of the entire Nx workspace. Furthermore, what happened is if we scroll down again back into our UI shared is that we got as such header.stories.tsx file generated.

[4:21] This is a story that got generated for us based on what we have in our header.tsx component. As you can see here, we already automatically get title, which is one of the ample props of our component and this is already configured as a string [inaudible 04.36] then pops up properly in storybook.

[4:40] In order to launch storybook, we can again go into the workspace JSON and see what changed. Right now, in that store UI shared, we have the lint target, we have the test target, and now we got a new storybook target.

[4:53] We got one target basically for serving the storybook during development time, but we could also run build Storybook, which actually creates a build artifact, which you can deploy to some web server.

[5:04] Let's try out Storybook and run it. Again, we use Nx run store UI shared, and we use the target Storybook. Now import localhost:4400, we get Storybook served up. As you can see now our header component, I can add a title here.

[5:24] You can see how the actual title displays properly in our component at runtime. You can basically change the title dynamically here and we'll see the according effect live on our component.