React Storybooks meets Create React App

TLDR

npm i -g create-react-app getstorybook
create-react-app hello-react
cd hello-react
getstorybook
npm run storybook

If you have been following the React ecosystem recently, you’ve probably have seen the Create React App. It’s the easiest way to get started with React. It comes with a default webpack setup, which works for most use cases.

It has support for:

• Importing CSS files
• Importing media files
• ES2016+ syntax
• Eslint support

and much more.

Most importantly, it has a standardized base React build system, which everyone can rally around. Now, using React is no longer fatiguing.

So, what’s the deal with Storybook?

React Storybook always had a lot of ways it could be configured to suit your needs. It comes with a very basic webpack config, but you had to add a custom config to get CSS support and other features.

If you know how to configure webpack, that’s not a big deal. But still, it makes it a bit hard to get started with React Storybook.

BTW: What’s Storybook?
It’s a way to launch a visual development environment for your React component. Using it, you can build a component without running your app.

Updating the defaults

Recently, we’ve updated React Storybook’s default configurations to match with the Create React App’s (CRA) webpack setup. So, you can now work with any CRA-based app without worrying about any webpack stuff.

You can simply follow our getting started guide to add storybook support to a CRA-based app.

Here are the changes needed to add storybook support to such an app:

Add storybook support. · kadira-samples/hello-react@9792014

Introducing the “getstorybook” utility

With the updated default setup, adding a storybook won’t take much time. But it used to take a few minutes to add a few files and some NPM scripts.

However, now it takes just a few seconds. Here’s how:

First install the getstorybook npm utility globally:

npm i -g getstorybook

Then go to your React project and run:

getstorybook

That’s all.
It’ll detect the type for your project and it’ll add Storybook support.

Now, it’s time for you to work on your component and you don’t need to go about configuring stuff.

Subscribe to our Newsletter for more info about storybooks.