Tutorial

How To Build JS Components with Storybook

Updated on March 31, 2021
Default avatar

By Egwuenu Gift

How To Build JS Components with Storybook

Introduction

Storybook is an open-source tool for developing UI (user interface) components in isolation.

This means developers can create UI components in an environment separate from the application without worrying about flaky data, unfinished APIs, or business logic. This allows you to ship components with confidence.

Screenshot of the Storybook landing page.

Storybook has integrations with most front-end frameworks including React, Vue, and Angular.

In this article, you will be introduced to using Storybook for your projects.

Examining Use Cases for Storybook

There are several use cases for adopting Storybook:

  • Component Library: With the way Storybook works, you can maintain a component library by utilizing this process of having all components in your application in one location with the ability to test each state of the component.
  • Design Systems: A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale. With Storybook, you get a design system out-of-the-box.
  • Visual Testing: With Storybook addons, you can integrate visual regression testing in order to test and keep your component library consistent no matter how big it is.
  • Share across teams: Storybook can be shared across teams because of the way it can be deployed as a static site functioning solely on its own. It can be shared amongst designers and project managers in a team to give feedback or comments on the current design of the components which improves collaboration within teams.

Several teams rely on Storybook to do the heavy lifting of composing a component library and also as a building block for their design systems. Companies like Salesforce, Artsy, GOV.UK, and GitHub use Storybook to build and distribute UI components that impact millions of people.

Writing Stories with Storybook

A Storybook is a combination of different stories for different components. Stories are functions that return something that can be rendered to the screen. A story can contain a single state of one component or can be seen as a visual representation of a component.

Building UI components with Storybook means you have all the components in your application isolated so that they function regardless of the connection between them, and can be tested as separate UI components.

When building with Storybook there are several ways to structure and organize stories within your application.

Here is an example of a directory origination strategy with stories.js files inside a component directory:

.
 └── src/
  └── components/
   └── button
    └── button.js
    └── button.stories.js

Here is an example of a second directory organization strategy with stories directory outside the src directory:

.
 └── src
  └── components
   └── button.js
 └── stories
  └── button.stories.js

Here is an example of a third directory organization strategy with stories subdirectory in a component directory:

.
 └── src/
  └── components/
   └── button
    └── button.js
    └── stories
     └── button.stories.js

Following any of these methods is a matter of choice. It’s up to you to pick what works best for you and your team.

Integrating Storybook with Other Frameworks

Storybook supports almost all the frontend frameworks available and in order for you to integrate with either of these frameworks a guide has been written by the storybook team that you can follow to setup storybook for individual frameworks and they include:

Support for other frameworks is made possible with community addons:

  • Ember
  • HTML
  • Mithril
  • Marko
  • Svelte
  • Riot
  • Preact
  • Rax

Using Storybook Addons

Addons extend the features and behavior of Storybook.

An example is the @storybook/addon-actions addon, this helps with logging the data received by event handlers in Storybook.

There is a suite of essential addons that are pre-installed. And many third-party addons provided by the community.

A list of all addons curated by Storybook team can be found on this addons page.

Deploying Storybook as a Static App

Storybook can be used alongside the project you are developing because it gives a great developer experience with features, like hot-reloading via Webpack HMR. But you can also extend this further by deploying the Storybook as a static site on its own. This will enable you to showcase your components to everyone as a style guide reference.

This will require you to configure your Storybook using this script:

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

Now when you run npm run build-storybook or yarn build-storybook this will build the Storybook configured in the storybook directory into a static web app and place it inside the directory called out. Then, you can deploy that directory using services like GitHub Pages, Netlify, or Now.

Conclusion

In this article, you learned what Storybook is all about and when it is useful to take advantage of when building web applications.

Storybook works for a lot of use cases and integrating it into your workflow will enable you to build comprehensive UI components for your applications in isolation.

Continue your learning with a tutorial on how to build an interactive UI component using React and Storybook.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Egwuenu Gift

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel