Hi there! 👋
I have been working with Storybook as a layer of component management in projects for a while now. It is quite a nice tool when working with components as it makes it much easier for myself and the team to remember all the components we have already created and how to easily implement them in other parts of the platform. Recently, I started working on a new project, and even though the project already had Storybook installed, it was outdated and it wasn't running anymore. Because I believe that it is a tool that helps the workflow, I decided to fix it. The project is an nx monorepo and when trying to fix it on our project I learned that setting up Storybook for that sort of project has a few particularities. Maybe some of you will go through this as well, so I decided I could share a bit of my experience with it.
So here are some of my learnings:
1. The CLI Installation for Storybook doesn't work in monorepos
Ok, so my first idea was to just uninstall everything and run their CLI:
npx sb init
That is the first step for installation recommended in Storybook's official documentation and it is so beautiful when it works. Very elegant and simple ❤️
It works in most types of projects however with the nx monorepo it won't do the trick. The CLI will install storybook in your project and it will work at first, however with the CLI installation the monorepo folder structure won't be respected and you will have problems afterward when deploying it. Long story short, better just skip the CLI installation in that case, because it won't work in the long run.
2. You need to follow the documentation that is on the NX website
Well, when my first attempt following standard Storybook documentation didn't work I went to look if there is anything in the NX documentation. And, voilá, there is specific documentation about Storybook for Nx that you can check in this link.
It is a two-step process. First, you need to add the plugin.
npm add --dev @nrwl/storybook
And then, inside the app you want to have Storybook you need to generate the specific configuration.
nx g @nrwl/angular:storybook-configuration project-name
PS: the command above is for projects built in angular, if yours is in react just change the word "angular" in the line above to "react".
3. You need to install it for each app you wanna have Storybook inside your project
This is the biggest difference when running Storybook in a monorepo: you will have to install it in one specific app and it will only render stories that are inside such app. So, if you have inside your monorepo one library in which you keep your components that is probably the best one to install Storybook in.
Another important difference is that when launching storybook you will have to specify which project you want to launch with that. Imagining that you installed it in your component library that is called MyComponents, to launch it you would type in the command line something like with this:
npm run storybook:MyComponents
Of course, if you keep a different folder structure and actually each app has its own components inside your monorepo you will have to install it in each project and they will have to be run separately. In this case, it could possibly make your monorepo build slower if when you build it you also deploy a public version of your storybook, for example. So, keep it in mind as well.
Hope it helps!
Happy coding, everyone ✌️
Top comments (1)
Thanks for the great summary article! Just a small remark: after setting up our monorepo following your instructions I realized that the last command to run storybook should have arguments switched: npm run MyComponents:storybook. This is then also in line with the nx documentation, that you link further above. Cheers!