I decided to build the reusable components that we just created using Storybook.
This lesson is a great opportunity to show you the different approaches to Storybook configuration on NX mono repositories.

Storybook configuration in NX is strictly connected to one application.
If you keep multiple applications in a mono repository, it might be a problem.
For example, consider a case with two applications and three libraries.
One library is shared between both apps; the other two libraries are exclusive, one per application.
In this case, no application contains all possible components.
This means that if you want to have a Storybook that presents all possible components,
you will import a library that is not used by the production code.

The solution I like is to create a new, separate application that will be used only for Storybook.
It will import all components.
The main difference is that it's not production code,
so you can import whatever you want, and it won't hurt your build time.

So, let's add a new application and let's initialize Storybook for that application.

---
title: Adding Storybook to monorepo - different approach
description: How to add Storybook to monorepo
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-angular-applications-with-nx-app/-/tree/main/manuscript/code/04.07-storybook?ref_type=heads
privateVideoUrl: https://stream.mux.com/1s9fla302bhpGaCYLzElopaKlnkziET9kAEPMs4TGiU00.m3u8
---

I decided to build the reusable components that we just created using Storybook.
This lesson is a great opportunity to show you the different approaches to Storybook configuration on NX mono repositories.

## The problem

Storybook configuration in NX is strictly connected to one application.
If you keep multiple applications in a mono repository, it might be a problem.
For example, consider a case with two applications and three libraries.
One library is shared between both apps; the other two libraries are exclusive, one per application.
In this case, no application contains all possible components.
This means that if you want to have a Storybook that presents all possible components,
you will import a library that is not used by the production code.

galczo5

Adding Storybook to monorepo - different approach

In next few lessons we are going to use Storybook to develop reusable

Storybook configuration in NX is strictly connected to one application.

So we have to specify which application will be the root of our Storybook

And we have three applications. We have back-end one and two front-end

admin and room. So we need to decide which application

admin or room will contain Storybook configuration.

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

and room front-end application is the root of the Storybook,

we will have a connection between admin and room front-end applications.

And it's bad. Of course we can add Storybook to both applications, to admin

and room front-end application. And I think it's not a good way because you

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

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

leaps. So all we need to do is to add a new application to our an exponent repo

So let's generate it, yarn and x generate and the app is apps/storybook.

So this application is only for Storybook stories.

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

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

do we want to use interaction tests? Yes, why not?

Now we need to choose Storybook framework that we are going to use and we are

And basically that's it. Now we need to wait for a few seconds for Storybook to

and then we can start. Okay, let's check what is inside our Storybook

Storybook. And as you can see, we have that Storybook directory, which means

for this application. So before we get our hands dirty with code, I want to say

In the last few lessons, we went through a design overview and we have prepared

to start coding. And the only thing to do is to start coding. I believe that

we are trying to approach our goal of two front-end applications working in an

provided backend application in a very organized way. So that's why we

uh, in advance, so we can just focus on the code. And for coding lessons, we're

the same organized way. We'll start with components. First, we will start with

buttons and list component. Then with more complex ones, like room list

background component, and so on. Then we're going to create necessary services.

business logic that we need to have in our application. And only then we will

the whole application using smaller parts. That's why we generated Storybook in

We're going to use it to create components and not think on the big

Right now we are focusing on the smaller parts that are necessary to build

Once we will have components, services, applications, we will try to configure

without network. It's called Progressive Web Apps, and we want to do this in

In the next lesson, we're going to add components like card, button, input,

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript