Course Introduction

Introduction

Let's understand what this tool is all about.

What is Storybook? Better React UI Component Development

Storybook and Component Driven, Atomic Design in React

Let's learn about the installation process of Storybook.

How to Install Storybook and Add Stories to React Components

Let's learn about the very basics of Storybook stories

Intro to Storybook Component Story Format and args

Let's understand what Storybook decorators are and how to create them.

How to use Storybook Decorators to Style Components

Let's dive into the addons that come with the default Storybook template.

The 9 Best Storybook Addons to Build Better Story Workflows

Let's customize Storybook theme to match our brand!

How to Customize the Storybook React Theme for Your Brand

We have finished the first module! Let's discuss what we learned.

Wrapping up

Storybook - How it works

Now that you've learned the basics, it's time to start working on MealDrop, the main project of this course.

Section overview

We will be looking at the template project that we will use in this course.

Accessing the project

Breaking down our use-case

How to Write an Atomic Component in Storybook

Adding styled components support in Storybook.

How to Add Styled Component Themes to Storybook

Making decorators smarter with the use of globals and parameters to allow for an interactive theme switching experience.

Set Storybook Themes With Decorator Global Values and Parameters

How to Connect Storybook to Figma

How to Compose Components in Storybook

Finalizing the feature and integrating it into the app.

How to Integrate Storybook Components Into a React App

We have finished the second module! Let's discuss what we learned.

Starting the main project

It is time to learn how to deal with components that do fetch requests.

Using a container pattern to deal with complex components.

Fetch Data for Storybook Components With Container Pattern

Using conditional logic to deal with fetch requests.

Add Conditional Logic to Storybook Compontent Data Fetching

How to Mock Storybook Data Fetching Requests With MSW

Conclusion on data fetching strategies in Storybook.

Dealing with fetch requests

Let's learn how to work with page components on Storybook.

Let's add the page templates to Storybook.

Adding PageTemplate and Redux support to Storybook

Let's analyze the HomePage component and add it to Storybook.

How to add Complex Components to Storybook

Let's analyze the restaurant detail page component and add it to Storybook, including deeplinking and React portals support.

How to Add Deeplinking and React Portals to Storybook

How to Mock Storybook App Loading Scenarios With MSW

Adding Pages to Storybook

It is time to learn testing strategies in Storybook.

Let's add the official Storybook ESLint plugin

How to Install the Storybook ESLint plugin

Let's write some interaction tests directly in Storybook!

How to Use React Testing Library and Interactions in Storybook

Let's use the Storybook test runner to automate our tests!

How to Automate Storybook Testing With Test Runner

How to Run Accessibility Testing in Storybook With Addon-a11y

We have finished the fifth module! Let's discuss what we learned.

Storybook and testing

Using Chromatic for automatic Storybook deployment.

Deploy Storybook on Chromatic for Integrated Development

Using Chromatic and Storybook for visual regression testing.

Visual Regression Testing with Storybook and Chromatic

We have finished the sixth module! Let's discuss what we learned.

Deploying our Storybook

Conclusion and extra resources

Final thoughts

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase, but separately from your application. It's like a sandbox, allowing you to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and many others!

With Storybook, you can ease the development of a design system and share a common language with designers. QA's can get an overview and test functionalities in isolation. Stakeholders can use it for demo purposes. Overall, Storybook helps connect all of these people, greatly improving collaboration!

In this course, we will unleash the full potential of Storybook for React apps. We start from the basics of Storybook and later switch to a real world application, learning how to develop features directly in Storybook, saving lots of development time and at the same time, creating a living documentation of components and features.

You will learn how to break down features into atomic and composite components using [Component Driven Development](https://www.componentdriven.org/)

![Showing a component breakdown process](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.03/public/assets/component-breakdown.png)

You will see the power of addons, and how they help improve the development experience and the end quality of components. We will connect design tools, test accessibility, and much more.

![Figma connected to Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.06/public/assets/figspec-view.png)

You will also learn how to mock fetch requests, add Redux, theming and routing support to Storybook, and add full pages to it. You're going to even add entire pages to Storybook, allowing you to simulate all use cases you want in isolation for easy access!

![Full page in Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_04/lesson_04.04/public/assets/modal-working.gif)

On top of that, you'll be using the latest features of Storybook such as interactions, combining the power of Storybook wrappers for Testing library and Jest that run in the browser to write stories with automated interactions!

![Storybook test runner](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_05/lesson_05.04/public/assets/click-to-debug.gif)

Finally, you'll be setting up Chromatic, a cloud based tool that improves your Storybook experience by bringing you Storybook hosting and visual regression tests, in a way that will help you catch regressions but also improve the collaboration between you and your colleagues while making pull requests.

![Chromatic dashboard](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/first-build.gif)

By the end of this course, you will be able to use Storybook to develop and document components, features, and pages in your work.
You'll also learn how Storybook helps you collaborate with your colleagues, both technical and non-technical (like designers and stakeholders)!

This is a course which will show you how to unleash the full potential of Storybook in the context of React applications.

Storybook for React Apps

Unleash the full potential of Storybook, adding features and pages

Tools to improve designer-developer collaboration

Throughout this course, we learned that without Storybook, in order to build a feature in the app, the developers have to develop 

 integrate at the same time. This might result in bigger changes, and once they make a PR, they need to deploy the entire app and go through it until they find the feature to test, even with the smallest change.

With Storybook however, the development starts focused and isolated, and only after you integrate. This allows for faster, more concise changes:

But so far, we have been using Storybook locally; we don’t have a way to publish it yet. In this lesson, we will be setting up a cloud based service that integrates perfectly with Storybook, and is called 

Chromatic is a cloud solution for Storybook that offers:

Having all of these features in an easy-to-integrate environment makes our lives easier, and most of the functionality is free! In fact, for a project the size of MealDrop, Chromatic's free tier will suffice very nicely.

 page from Chromatic and following the steps:

Cool! We now have a new project on chromatic.com. 

The next step is to integrate the Chromatic library into our project. In the next screen, you will see your project token:

Now it's time to install Chromatic in the project:

If you have uncommitted changes in your repository, now is the time to commit them. This way, we have a clean git status for the upcoming commits we'll be making.

Let's get the project token provided in that screen and save it as a 

 file, and Chromatic will identify it automatically when we run its command. Go ahead and store the token in the 

 file at the root level of your repository:

// .env
CHROMATIC_PROJECT_TOKEN=your-token-here

// package.json
{
  "scripts": {
    "chromatic": "chromatic --exit-zero-on-changes"
  }
}

 so that Chromatic won't fail our CI pipeline in case there are visual changes.

Now let's make a commit for the changes we just did.

---
title: Deploy Storybook on Chromatic for Integrated Development
slug: setting-up-chromatic
description: Using Chromatic for automatic Storybook deployment.
privateVideoUrl: https://fullstack.wistia.com/medias/ashgc45jjw
isPublicLesson: false
---

Throughout this course, we learned that without Storybook, in order to build a feature in the app, the developers have to develop _and_ integrate at the same time. This might result in bigger changes, and once they make a PR, they need to deploy the entire app and go through it until they find the feature to test, even with the smallest change.

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/storybook-dev-and-integration.png)

With Storybook however, the development starts focused and isolated, and only after you integrate. This allows for faster, more concise changes:

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/storybook-dev-then-integration.png)

But so far, we have been using Storybook locally; we don’t have a way to publish it yet. In this lesson, we will be setting up a cloud based service that integrates perfectly with Storybook, and is called [Chromatic](https://www.chromatic.com/).

## Why Chromatic?

Chromatic is a cloud solution for Storybook that offers:

-   Free Storybook hosting, allowing you to publish your Storybooks with local or remote changes. 
-   Visual regression testing with cross-browser support.
-   DOM snapshots to pick code changes.
-   UI review tool, improving collaboration between technical and non-technical people.
-   CI integration, so that every time you make a pull request, there will be a deployed version of your Storybook accessible to anyone in your team, and the review process will be triggered automatically. This works exceptionally well to collaborate with designers!
-   Chromatic is made by Storybook maintainers. As it's a tool tailored for Storybook, it integrates without any effort and will always support the latest features of Storybook!

Having all of these features in an easy-to-integrate environment makes our lives easier, and most of the functionality is free! In fact, for a project the size of MealDrop, Chromatic's free tier will suffice very nicely.

## Getting started with Chromatic

We start by accessing the [Get started now](https://www.chromatic.com/start) page from Chromatic and following the steps:

1.  **Sign in with GitHub**
2.  **Authorize Chromatic**
3.  **Select "Choose from GitHub" then "Storybook for react apps" from your GitHub projects**

Cool! We now have a new project on chromatic.com. 

The next step is to integrate the Chromatic library into our project. In the next screen, you will see your project token:

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/chromatic-access-token.png)

Now it's time to install Chromatic in the project:

> **Important**:
>
> If you have uncommitted changes in your repository, now is the time to commit them. This way, we have a clean git status for the upcoming commits we'll be making.

```sh
yarn add -D chromatic
```

Let's get the project token provided in that screen and save it as a `CHROMATIC_PROJECT_TOKEN` environment variable in the `.env` file, and Chromatic will identify it automatically when we run its command. Go ahead and store the token in the `.env` file at the root level of your repository:

    // .env
    CHROMATIC_PROJECT_TOKEN=your-token-here

Add a `chromatic` command to your `package.json`:

```js
// package.json
{
  "scripts": {
    "chromatic": "chromatic --exit-zero-on-changes"
  }
}
```

> Note:
>
> Foreshadowing a bit, we use `--exit-zero-on-changes` so that Chromatic won't fail our CI pipeline in case there are visual changes.

Now let's make a commit for the changes we just did.

```sh
git add .
git commit -m "add chromatic"
```

Next, let's run Chromatic:

```sh
yarn chromatic
```

In Chromatic, you will receive a confirmation of your first ever published Storybook!

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/chromatic-confirmation.png)

Cool! Let's understand what just happened. First of all, click on the **Go to your project** link at the bottom of the screen. You will be redirected to the project screen with a list of builds. Every time Chromatic runs, a new build is generated. The build contains a deployed Storybook based on the recent changes and a list of visual changes. 

Yann Braga

In this course, we learned that without Storybook, in order to build a feature,

have to develop AND integrate it at the same time, and sometimes the feature is

And at the end, they have to make a pull request, which could be pretty big,

have to publish the entire application to test environments so that they could

But with Storybook, the flow is a little different and much simpler.

Your development is focused, and then you integrate into the app.

But for now, you can build and document the entire component in isolation in

And then you can publish your Storybook so your colleagues can review the

But so far, we have been using Storybook locally.

But in this lesson, we will be setting up a cloud-based service that integrates

with Storybook, and that is called Chromatic.

Chromatic is a free service for publishing your Storybook made by Storybook

It offers a lot of interesting features, such as you can publish your Storybook

run visual regression tests on it, which can be reviewed by your team, and can

So with Chromatic, you can deploy your Storybook for every single commit, PR,

It can either be publicly available or private under authentication, like email

And it offers a paid visual regression testing service that takes snapshots,

love each Story and compares them with the previous versions.

If there are changes, the team gets notified and they can be reviewed.

It also has a free plan that offers 5,000 snapshots a month, which is more than

for you to try out a service and see if it's a good fit.

And Chromatic has a process called UI review, which highlights and shows the

all organized in a single page, and that allows non-technical folks like

to become reviewers and easily identify what changed.

And they can give feedback by adding comments, denying, or approving your

And all of these things, the deployment, the visual tests, and the UI review

And this workflow works exceptionally well in collaboration with designers and

To get started with Chromatic, all you have to do is go to chromatic.com and

Once you connect to your GitHub account, you should be redirected to this page.

In this page, you can choose a project from GitHub, so click here and then

And then once this is chosen, you're going to get the steps to go further.

And then all we have to do is to install the chromatic dependency in our

run this command with this project token.

And this token is quite important because it's going to identify your project

And if you have Storybook running, just stop it.

And because the project token is quite sensitive, let's just not use it like

Let's add it to a environment variable so that we can store this safely and

Over here, we're going to set a Chromatic project token.

And then you set the value that you just got there.

And instead of running this one off, what we can do is we can go into our

and then under the scripts, we can add a new section called chromatic.

And over here, we can type the command traumatic.

And also because we're going to be setting this up in the future in CI, we don

the CI to fail in case there are changes.

Just bear with me and do dash dash exit zero on changes.

So we just installed the library, we set up the token in the M file and added

Let's save all of that work in a git commit.

So let's just add everything and then put a new commit called add chromatic.

So once we have a commit for this, all we have to do is run yarn chromatic.

And what this command is going to do is authenticate with chromatic using the

in the M file and then chromatic will build and publish your storybook on the

And after that is done, it will take snapshots of each story in that published