StoryBook. Installing to an existing project
I’m joining to a new project. I never did an installation of StoryBook myself. It’s time to check how difficult it can be, when you do it for an existing project.
- I have visited Quick Start guide
- I had to try npx -p @storybook/cli sb init
- I’ve got
Before me someone already tried to install StoryBook. The attempt failed. I’m trying to run the command with force key. Will see what will be changed on the project.
4. Some folders were created.
What I see at files
For now looks promising.
Running the StoryBook
After the installation in package.json I had some changes
Let’s try to run the command
$ yarn storybook
I have a problem
ERROR in ./.storybook/generated-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):Error: /Volumes/Data/MyNewProject/.storybook/generated-entry.js: 'loose' mode configuration must be the same for both @babel/plugin-proposal-class-properties and @babel/plugin-proposal-private-methods
It’s because the project already has configured webpack for compiling the assets. I’m dropping the first rule from webpack config and replace it with the simplest rule to make storybook’s examples work.
Adjusting to the project
In the project there was already an attempt to install StoryBook. It was done for a very specific part of the project and this installation and configuration file has some problems. My goal to bring to the project StoryBook for the main part of components. Previous installation has to be saved as well.
So. Looks like I need 2 StoryBooks on the same project.
I’ve checked CLI options. There is no chance to have 2 configuration files for different parts of the project. Ok. Not a problem. I’m creating 2 folders with main.js files. And providing to StoryBook’s run commands additional options.
$ yarn storybook --help
yarn run v1.22.4Options:
-V, --version
output the version number
-s, --static-dir <dir-names>
Directory where to load static files from-c, --config-dir [dir-name]
Directory where to load Storybook configurations from
-h, --help output usage information
Now I just need to provide proper options for run commands.
Next time I’ll import real components to the StoryBook. After that I’m planning to use Visual testing over the storybook with using Percy.io
Happy development! See you next time!
P.S.: https://levelup.gitconnected.com/a-killer-storybook-webpack-config-a0fd05dc70a4
