How to Add Storybook to React to Test Component Library Locally
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Building a Company Component Library course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Building a Company Component Library, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

[00:00 - 00:12] In this lesson, we will be creating a new storybook environment in our codebase where we can document and visually test our components. To add Storybook to our library, we can use the Storybook CLI.
[00:13 - 00:26] This CLI will look at our dependencies and create a default Storybook configuration for a React and TypeScript codebase. So first, we need to run an MPX, Storybook, SB, in it.
[00:27 - 00:46] In this command, we'll create and modify several different files. So first, it's going to create a Storybook directory with a main JS and preview JS where it helps us identify where the stories are located, which add-ons that we're going to include, and some of the important things around how we render our examples.
[00:47 - 01:03] It's going to include a default Stories directory that includes some default configurations and examples for configuring things in Storybook. It's also going to include some new dependencies and MPM scripts for starting and building Storybook.
[01:04 - 01:10] So once that's finished, let's actually run MPM install one more time. Sometimes it isn't completely done with this.
[01:11 - 01:21] And then once we have everything installed, let's call MPM run Storybook. And this will start a local Storybook server on port 6006.
[01:22 - 01:29] And then once that's done, we should see this update. There we go.
[01:30 - 01:40] So by default, it includes several Stories that show, showcase how you can document, document different elements. There's several different tools and add-ons here by default.
[01:41 - 01:49] But we're actually going to remove all of these to begin with. So let's remove everything under the Stories directory.
[01:50 - 02:06] And then include a new introduction.stories.ndx file with this content. So this is an MDX file, which combines Markdown with JSX.
[02:07 - 02:24] And it's going to allow us to render the contents of a read new file at the root of the Storybook documentation. Next let's document our button component by creating a new button.stories.tsx file with the following content.
[02:25 - 02:33] And this is going to include some default configurations around the title. So where the story exists and the template for how it's rendered.
[02:34 - 02:48] So if we go to our button, we can see that it's showing our current button component. So hello world, and if we were to actually go into buttons and change the content to hello world one, two, three, we should see it update locally.
[02:49 - 02:52] There we go. So let's go and remove that change.
[02:53 - 03:05] So the components documented in Storybook are rendered within an iframe. This is really helpful for testing components in isolation, but it may not be an accurate representation of the environment that will be consuming the component eventually.
[03:06 - 03:19] So in our demo style guide example, the components are styled with custom SAS styles, but the environment, those styles are used and includes global bootstrap styling. These CSS resets affect how our component will be rendered.
[03:20 - 03:35] So we should be ensuring that our Storybook environment includes those same styles and resets. So to align our sort of environment with our consuming code base, let's add in a bootstrap dependency and include that styling in the preview.js file.
[03:36 - 03:46] So first, let's do Impium and Stahla, save dev bootstrap. And since this is only included in our Storybook styling, this is a dev dependency.
[03:47 - 04:06] And then in preview.js, we can import that bootstrap styling at the top. And then if we restart the Storybook server with Impium run Storybook, we should see the styling reflected here with the bootstrap global resets once that's finished.
[04:07 - 04:16] There we go. So you can see it now showing the bootstrap global resets as a default styling.
[04:17 - 04:30] There's a lot of different add-ons that you can include in Storybook. Some of the most popular ones are accessibility, console, figment designs, or story shots where you can do code snapshots from each story that you write.
[04:31 - 04:39] And they're really popular and really useful, but for this course, we're not going to be using them. Next, let's go and commit these changes and save our progress.
[04:40 - 04:44] And in the next lesson, we're going to be adding formatting and lint and utilities to our code base.