We have written stories for just a couple of our components, but that will do for our purposes. To start the Storybook server, you'll have to run one of the scripts we created earlier in this section:

npm run storybook

After some work, you'll get the following screen:

You can select any component in the left sidebar (or even use the Filter text box), and you'll get the individual stories for it. Clicking on a story will show the corresponding component on the right. You can work with the component and see how it looks and performs... and if you are not satisfied, you can dynamically change its source code, and immediately see the results!

To finish, let's build a separate showcase application:

$ npm run build-storybook

> [email protected] build-storybook /home/fkereki/JS_BOOK/modernjs/chapter06
> build-storybook -s public -o out_sb

info @storybook/react v3.4.8
info
info => Loading custom addons config.
info => Using default webpack setup based on "Create React App".
info => Copying static files from: public
info Building storybook ...
info Building storybook completed.

After this, in the /out_sb directory, we will have a full standalone version of our showcase. To see how it works, we can use the Web Server for Chrome application (search for it in the Chrome extensions) and choose the output directory:

If you open the web server URL that is shown onscreen, you'll get exactly the same output as earlier – but now you could copy the out_sb directory elsewhere, and use it as a showcase tool, with independence from the developers.