Using Storybook for your components is like having your tools neatly organized on a board. It’s easy to find a component whenever you need it and you won’t end up with duplicated code as you won’t buy the same tool twice.
You can use Storybook directly in your project or in a component library and with any framework. In this article we’ll create a React component library, but if React is not your framework of choice, you can take a similar approach with your favorite one.
Let’s start with the dessert, so here’s a demo of what you can obtain at the end of this article. React demo storybook.
How to create a component library
You can create a npm package from scratch, but using a starter kit will save you time. Create-react-library (CRL) is similar to create-react-app which is often used to start a React application.
Just type
> npx create-react-library [your_library_name]
and after answering some questions your library is good to go. Here we’ll assume you chose npm as a package manager for your library. CRL, among other things, creates a React application within the library where you can import and test your library before publishing it.
You can start writing components and running
> npm run build
will create a dist folder.
In this article we’ll not cover how to publish your package to a registry. For NPM registry you can read more about it here.
Storybook
Next we add Storybook to the application within the library (i.e. example folder).
> cd example > npx -p @storybook/cli sb init --type react
To locally run the storybook type
> npm run storybook
By default, two files with stories will be created and after you play a bit with them you can delete and write your own. The convention is to create files like ComponentName.stories.js that will contain stories for a specific component. A story is a single state of your component. For instance, for a button you might have a story for the primary button and one for the secondary button.
Path of least resistance
“If something’s hard to do, then it’s not worth doing” – Homer Simpson.
Your storybook should be easily accessible by just clicking on a bookmark from your browser. In the long run, no developer will locally run the storybook just to see the components.
You can easily deploy your storybook using Netlify, free of charge. Netlify is a platform that helps us deploy web applications as long as we have a git repository.
You only have to do two things:
- Connect your git repository to your Netlify account
- Specify how Netlify should build your application (“npm run build” or something similar)
That’s it. Everytime a new commit is pushed to the master branch a new build is triggered and deployed to “https:// _editable-text_ . netlify.app”. You can edit the Netlify URL or use your custom domain.
Conclusion
Let’s wrap things up:
- Use create-react-library to easily create a React library.
- Add Storybook in your workflow to keep your components organized.
- Use Netlify to quickly deploy a web application (a storybook with components in this case)
Cover photo by Barn Images on Unsplash