Why and How to setup Storybooks with TypeScript

Introduction

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

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.

Why use Storybook?

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.

React Prerequisite

Make sure you have installed or created a new react project with

npx create-react-app storybook-ts-blog

Storybook Setup

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.

Test

Run storybook using below command

npm run storybook

Wait, one more thing

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

Comments

[AryanshMahato]

I have taken a lot of inspiration from storybook's official docs. Also, this is my second blog, please let me know your feedback🙂

Also, should I make a blog on how to add basic authentication in front of any website?

[Vikas yadav]

Nice.

It will be wonderful if you can put some example:

• Create one library component.
• Include some repo on Codesandbox or git

[AryanshMahato]

Yup! Good Idea, will add those probably next part of this Blog! Thanks🙃