DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Why and How to setup Storybooks with TypeScript
AryanshMahato
AryanshMahato

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Storybook Setup

Now storybook can handle the setup part, just run the below command.

npx sb init
Enter fullscreen mode Exit fullscreen mode

It will install storybook and add the necessary files for you to work with storybook.

Test

Run storybook using below command

npm run storybook
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

To run the build locally, use this command

npx http-server ./path/to/build
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
aryanshmahato profile image
AryanshMahato Author

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?

Collapse
 
thejsdeveloper profile image
Vikas yadav

Nice.

It will be wonderful if you can put some example:

  • Create one library component.
  • Include some repo on Codesandbox or git
Collapse
 
aryanshmahato profile image
AryanshMahato Author

Yup! Good Idea, will add those probably next part of this Blog! ThanksπŸ™ƒ

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›