Adding Storybook to monorepo - different approach

[00:00 - 00:09] In next few lessons we are going to use Storybook to develop reusable components in NX Monorappa. Storybook configuration in NX is strictly connected to one application.

[00:10 - 00:29] So we have to specify which application will be the root of our Storybook configuration. And we have three applications. We have back-end one and two front-end applications, admin and room. So we need to decide which application admin or room will contain Storybook configuration.

[00:30 - 00:46] And in my opinion there is no good application for that. So for example, if we are going to add a component to Storybook from admin front-end application and room front-end application is the root of the Storybook, we will have a connection between admin and room front-end applications.

[00:47 - 01:09] And it's bad. Of course we can add Storybook to both applications, to admin front-end application and room front-end application. And I think it's not a good way because you will have two instances of Storybook and you will need to switch context between both of them . So the solution for that is to add a new Angular application only for Storybook .

[01:10 - 01:31] So you will have separate application that will contain Storybook configuration and it will have connections to rest of the libraries and applications. In that way you avoid unnecessary connections between admin and room application and between leaps. So all we need to do is to add a new application to our an exponent repo .

[01:32 - 01:40] So let's generate it, yarn and x generate and the app is apps/storybook. So this application is only for Storybook stories.

[01:41 - 02:18] And of course it's an Angular application, right? All right. Now we can add necessary dependencies. So as previously yarn at minus capital D , nx/storybook, it might take a while. And now we can generate a Storybook configuration for our Storybook application. So let's generate yarn and x generate add nx/storybook configuration for Storybook. So we need to answer a few questions. First of all, do we want to use interaction tests? Yes, why not?

[02:19 - 02:50] Now we need to choose Storybook framework that we are going to use and we are going to use Storybook/Angela. And basically that's it. Now we need to wait for a few seconds for Storybook to initialize and then we can start. Okay, let's check what is inside our Storybook application. So we have Storybook. And as you can see, we have that Storybook directory, which means that Storybook is configured for this application. So before we get our hands dirty with code, I want to say a few words.

[02:51 - 03:54] In the last few lessons, we went through a design overview and we have prepared our workspace to start coding. And the only thing to do is to start coding. I believe that you noticed that we are trying to approach our goal of two front-end applications working in an x together with the provided backend application in a very organized way. So that's why we generated everything, uh, in advance, so we can just focus on the code. And for coding lessons, we're going to act in the same organized way. We'll start with components. First, we will start with the basic ones, like buttons and list component. Then with more complex ones, like room list component, room background component, and so on. Then we're going to create necessary services. So all the business logic that we need to have in our application. And only then we will go and we will complete the whole application using smaller parts. That's why we generated Storybook in this lesson.

[03:55 - 04:08] We're going to use it to create components and not think on the big applications at the moment. Right now we are focusing on the smaller parts that are necessary to build bigger applications.

[04:09 - 04:28] Once we will have components, services, applications, we will try to configure our application to work without network. It's called Progressive Web Apps, and we want to do this in this course. In the next lesson, we're going to add components like card, button, input, list, and list item.