In this blog, we are going to look at, How to set up Storybooks with React and my all-time favourite language(TypeScript).
First of all, if you don't know what is Storybook.
Storybook is a UI development tool that lets you preview your components in a very rich library design that will help you to change all props for the component and test out your component in different scenarios.
Maybe you should only use storybook if you're creating a component library(Open Source or for organisation). As for me, I created a component library for my organisation which is supposed to be used across multiple react projects. There I implemented Storybook(in component library project) so that everyone can have a preview of all components provided by the internal-component-library and use it according to the (kind of) storybook generated docs based on props.
Make sure you have installed or created a new react project with
npx create-react-app storybook-ts-blog
Now storybook can handle the setup part, just run the below command.
npx sb init
It will install storybook and add the necessary files for you to work with storybook.
Run storybook using below command
npm run storybook
Maybe you should also host the component library even if it's an internal project as it will help anyone other than devs(designers, managers) to have a look at your mess🤪(just kidding, I mean your components), just add basic authentication(username+password) before showing the hosted website.
To generate HTML files to host, run the below command
npm run build-storybook -- -o ./path/to/build
To run the build locally, use this command
npx http-server ./path/to/build