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.

  1. I have visited Quick Start guide
  2. I had to try npx -p @storybook/cli sb init
  3. 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.4
Options:
-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

--

--

--

I’m front-end developer and really passionate programmer, caring husband and pancake baker on Sundays. School teacher of computer studies in the past.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Progressive web app using vue3

Basic Vanilla Javascript Single Page App Set-Up

Replacement for git clone — degit

Migrating to Vue from AngularJS. MedUX approach.

Enabling Firebase authentication in Angular 9

Introduction To Nextjs

Day 57 Training at Ryaz: Learning Debugging and starting new project.

“A Zero in setTimeout” said JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ilya Zykin

Ilya Zykin

I’m front-end developer and really passionate programmer, caring husband and pancake baker on Sundays. School teacher of computer studies in the past.

More from Medium

Setup testing with Jest and Enzyme.

Frontend tests structure

Writing elegant codes; Linters.

Moving Resdex to SPA