Let's see what this Storybook thing is all about. Run this command to start up the Storybook server (again, you can cancel the test runner and run this in the same session, or start a new one):
After some compiling you should get a message saying that Storybook has started and it's available at http://localhost:7910
If you poke around at the file tree on the left you'll see all of the components, cells, layouts and pages we created during the tutorial. Where did they come from? You may recall that every time we generated a new page/cell/component we actually created at least three files:
If you generated a cell then you also got a
.mock.jsfile (more on those later).
.stories.js files are what makes the tree on the left side of the Storybook browser possible! From their homepage, Storybook describes itself as:
"...an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient."
So, the idea here is that you can build out your components/cells/pages in isolation, get them looking the way you want and displaying the correct data, then plug them into your full application.
When Storybook opened it should have opened Components > BlogPost > Generated which is the generated component we created to display a single blog post. If you open
web/src/components/BlogPost/BlogPost.stories.js you'll see what it takes to explain this component to Storybook, and it isn't much:
You import the component you want to use and then all of the named exports in the file will be a single "story" as displayed in Storybook. In this case the generator named it "generated" which shows as the "Generated" story in the tree view:
This makes it easy to create variants of your component and have them all displayed together.
Where did that sample blog post data come from? We (the Redwood team) added that to the story in the
redwood-tutorialrepo to show you what a story might look like after you hook up some sample data. Several of the stories need data like this, some inline and some in those
mock.jsfiles. The rest of the tutorial will be showing you how to do this yourself with new components as you create them.