Storybook Available in Canary!

If you’re watching the redwoodjs/redwood repo, you might’ve noticed that Storybook just got merged, closing an issue opened all the way back in March. :exploding_head:

Storybook is part of the Redwood dream. Quoting from the introduction:

An ideal development flow starts with Storybook entries and Jest tests, so Redwood closely integrates both, making it easy to do the right thing.

(Note that Jest testing is already available for the web side, and that the api side is almost upon us.)

For those unfamiliar with Storybook, it lets you develop frontend components in isolation. As far as development workflows go, it’s a real game changer.

You’ll have to wait for a new release for it to be included in yarn create redwood-app installs. But you can still try it now by upgrading a Redwood app to the canary version and installing @storybook/react (WARNING: yarn rw upgrade --tag=canary is a force upgrade):

cd redwood-app
yarn rw upgrade --tag=canary
yarn workspace web add -D @storybook/react

Then run:

yarn rw storybook

And that’s it! Storybook should now be running at http://localhost:7910/.

In this canary version, the component, cell, and page generators all create a stories.js file too, making it a breeze to get started:

~/redwood-app$ yarn rw g page home /
yarn run v1.22.4
$ /redwood-app/node_modules/.bin/rw g page home /
  ✔ Generating page files...
    ✔ Writing `./web/src/pages/HomePage/HomePage.stories.js`...
    ✔ Writing `./web/src/pages/HomePage/HomePage.test.js`...
    ✔ Writing `./web/src/pages/HomePage/HomePage.js`...
  ✔ Updating routes file...
Done in 1.00s.

Try it out and let us know what you think!

7 Likes

Thanks for writing the quick intro @dom and thanks @peterp for getting it running :rocket:

We use Styleguidist at work, but I’ve never played with Storybook, so it will be interesting to see how they compare

2 Likes

This has been a pain point to me for weeks, what a relief! It will definitely improve my experience on Redwood :slight_smile:

Big fan.

2 Likes