Add a Welcome Page with Sequential Stories to a React Storybook

Share this video with your friends

Published 6 years ago

Updated 5 years ago

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to add a landing/welcome page to your Storybook, so that first-time viewers get to read a message from you or have some orientation around the structure of the Storybook you are building. We also introduce the idea of sequential additions to your Storybook config so you can get a sense of how to modify it for your own needs.

View code on GitHub

Instructor: [00:00] We are going to add a welcome page of our storybook, almost like any other page, except we are going to add it in the storybook folder.

[00:10] In here, we are going to import the usual React and storybook/react, imports. We are going to define the story, much like we do everywhere else. We add the module, then we say, "To your new storybook," with a ta-da emoji -- that's very important -- and then a little welcome message, "Welcome to your new storybook."

[00:43] Now, all you do to set it up is head to the config, and notice how we didn't name it .stories.js. We just named it welcome story. That's enough because we can just add it here. Because it's sequentially above the rest of the stories, it's always going to show up first.

[01:03] When I run the storybook, and I refresh it on the screen, it's going to show the welcome page. It's going to be the first thing that any user sees when they see the storybook.