Host Storybook For Free with Chromatic

[00:00] Chromatic is a visual testing and review tool that scans every possible UI state across browsers to catch visual and functional bugs. Today, we're just gonna use it to host our storybook. Let's sign in. We can use GitHub, Bitbucket, GitLab or an email address. The benefit of using your git provider, like I'll do [00:20] here, is that you'll have access to all of your projects. Here, I'll go to Chantastic. To host my storybook, I first need to put it on GitHub. So let's open up our terminal. I'll use hub to create a new repo using the project that I'm in. It's called this testing chromatic. Push it to Chantastic and public is fine. That was successfully pushed to GitHub, which means that we should [00:39] be able to find it in Chromatic. Let's hit add a project, choose from GitHub. On this account, I should be able to see it. I don't, so I can hit refresh the list in case it hasn't been updated yet. And in a worst case scenario, I can just input the name manually. With our project connected, we can now install the Chromatic package. I'm using yarn, specifically [01:00] 3 or later. So I'll copy this yarn version, run it in my project, and Chromatic has been added. Next, we need to build and publish our story book to Chromatic. We do that by running this command. However, instead of npx, I'll use yarn run for this. We can then add a chromatic script, if we wanna make this easier next time. [01:19] But I generally recommend making this a private variable inside of a CI pipeline, so I'm gonna hit no for that. One nice thing is that this CLI will spit this out, so you can easily add it to your package JSON and privatize that key. Now let's see what happened in the UI. We published 3 components with 8 stories and it only took 30 seconds. [01:39] We're just here for the hosting right now. However, you can run through this tutorial to learn how the visual regression testing works. But we can just go to our project with this link at the bottom, find instructions for how to add this to our CI pipeline in the future, and our app build. One thing that I think is fun to point out here is that our logged in page [01:59] has both visual tests and interaction tests. So the visual snapshot that it automatically takes is showing that logged in state that we created through react testing library. That's pretty cool. Let's go to manage to get a URL for this. On the collaborate page we can find all of the URL's relevant to this project, which includes branched URL's [02:19] to our storybook. We're gonna paste this using the main branch and see our main deploy.