Interaction between React and Storybook

Question

We already know that Storybook is for building UI components and keeping them isolated from the business logic. I have implemented some basic examples of StoryBook.

Now I am very curious to know about the Storybook internal behavior means how it interacts with the react main application, the workflow of the Storybook after executing the npm run storybook command starting from the entry point to exit?

I'd also like to know why we don't use npm start for running the storybook?

Thanks :)

Answer 1

Storybook doesn't interact with your react application.
It is just a library for components in your project.

It gives you a variety set of tools to create examples of components usage.
This is why you need to write stories separately from actual react application. And all these stories have no any intersection with your app.

Command npm run storybook just build all the stories that you've written and build useful ui for that so you can browse them easily. That becomes extremely useful when you have a big code base.
Because it is difficult to know every component you have in project and how it works. And Storybook provides us with an instrument to have all components more structured.

You can also use npm start for that. It is just about how you configure scripts in package.json.

Answer 2

Storybook doesn't interact with the main React Application.

Storybook is only used for building UI components and keeping them isolated from the react application(business logic). These components can be easily visualized when you run the storybook through this npm run storybook (windows) or yarn storybook(mac/ubuntu) command. It runs on a different port unlike npm start runs on the 3000 port by default.

These components are then imported into the main react application. React will use these components based on the requirement. Storybook gives you the ability to browse all the UI components that you have built and then later react will use it. This allows you to develop one component at a time.

What will happen when you execute the command npm run storybook?

This command at first will search for main.js and if found it will look for all the file which extends with stories.js which is nothing but the stories that you have built. It will then create a list of stories in any order or specified order which will be shown in the storybook webpage at 6006 port by default.

Why we don't use npm start for running the storybook?

We can use npm start for running the storybook but you need to configure it in the package.json file under the "scripts" as shown below.

"scripts": {
    "start": "start-storybook -p 6006 -s public"
  }

Here public means that this storybook doesn't require any authentication for running it. Now if you do npm start it will only run the storybook for you, not the react application. This storybook can be used later in different react applications.

I'll recommend that if you are implementing some basic concept of storybook then it is better to run both separately on a different port.