The first step to using Storybook is installing the global command-line tool. It's installed as a global tool because it can be used with many projects at the same time, and it can be used to bootstrap new projects. Let's start with this first step:

npm install @storybook/cli -g

Once this installation is done, you have the command-line tool that's used to modify your package.json dependencies and generate boilerplate Storybook files. Let's assume that you've used create-react-app to create a new application. Change into your application directory, and use the Storybook command-line tool to add Storybook to your current project:

getstorybook

The getstorybook command does a number of things for you when you run it. Here's what you should see as the output when you run this command:

getstorybook - the simplest way to add a storybook to your project. 
 Detecting project type. 
 Adding storybook support to your "Create React App" based project. 
 Preparing to install dependencies. 

It will try to figure out what type of project you have before adding anything because different types of projects will have different organizational requirements. getstorybook takes this into account. Then, it'll install dependencies, boilerplate files, and add scripts to your package.json:

  Installing dependencies.
To run your storybook, type:
 npm run storybook 

The output tells you have to run the Storybook server within your project. Here's what the scripts section of your package.json should look like at this point:

"scripts": { 
  "start": "react-scripts start", 
  "build": "react-scripts build", 
  "test": "react-scripts test --env=jsdom", 
  "eject": "react-scripts eject", 
  "storybook": "start-storybook -p 9009 -s public", 
  "build-storybook": "build-storybook -s public" 
} 

We'll look at the build-storybook script later on in the chapter; you'll use the storybook script more often.

Next, let's look at the boilerplate files that getstorybook has created for you. First, you'll notice that there's a new .storybook directory in the top-level directory of your project:

.storybook/
├── addons.js
└── config.js

The two files added are as follows:

• addons.js: This file imports add-on modules for Storybook. By default, the actions and links add-ons are used, but these can be removed if they're not used.
• config.js: This file imports the stories for this project and configures Storybook to use them.

You'll also find a new directory called stories within your src directory:

src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── registerServiceWorker.js
└── stories
    └── index.js

Remember how getstorybook figured out that you're using create-react-app with your project? This is how it knows to put the stories directory under src. This is where you'll find two demo stories to help get you started:

import React from 'react'; 
 
import { storiesOf } from '@storybook/react'; 
import { action } from '@storybook/addon-actions'; 
import { linkTo } from '@storybook/addon-links'; 
 
import { Button, Welcome } from '@storybook/react/demo'; 
 
storiesOf('Welcome', module).add('to Storybook', () => ( 
  <Welcome showApp={linkTo('Button')} /> 
)); 
 
storiesOf('Button', module) 
  .add('with text', () => ( 
    <Button onClick={action('clicked')}>Hello Button</Button> 
  )) 
  .add('with some emoji', () => ( 
    <Button onClick={action('clicked')}></Button> 
  )); 

Don't worry about figuring out what's going on in this file just yet, we'll get there. These default stories will be replaced by stories that you come up with for your component. It's also helpful to have these default stories in place so that you have something to look at when you fire up the Storybook server for the first time. Let's do that now:

npm run storybook

After a few seconds, you should see console output that tells you where the server is running so that you can open it in your browser:

Storybook started on => http://localhost:9009/

Here's what you should see when you look at the Storybook app in your browser:

Here's a rough breakdown of what you're looking at:

• The left pane is where you'll find all of your stories. This is where the two default Storybook stories are displayed.
• The main pane is where you'll see rendered content from the selected story.
• The bottom actions pane is where you'll see triggered actions logged.

Let's try selecting a different story in the left pane:

As soon as you change story selections in the left pane, you'll see the rendered component output in the main pane. In this case, it's a basic button.