Storybook runs alongside your app in development mode. It helps you build UI components isolated from the business logic and context of your app. This edition of Learn Storybook is for React; other editions exist for React Native, Vue, Angular, Svelte and Ember.
We’ll need to follow a few steps to get the build process set up in your environment. To start with, we want to use Create React App (CRA) to setup our build system, and enable Storybook and Jest testing in our created app. Let’s run the following commands:
# Create our application: npx create-react-app taskbox cd taskbox # Add Storybook: npx -p @storybook/cli sb init
yarnto run the majority of our commands. If you have Yarn installed, but prefer to use
npminstead, don't worry, you can still go through the tutorial without any issues. Just add the
--use-npmflag to the first command above and both CRA and Storybook will initialize based on this. Also while you progress through the tutorial, don't forget to adjust the commands used to their
In the root folder of the project add a new file called
.env with the following:
Now we can quickly check that the various environments of our application are working properly:
# Run the test runner (Jest) in a terminal: yarn test --watchAll # Start the component explorer on port 6006: yarn storybook # Run the frontend app proper on port 3000: yarn start
--watchAllflag to our test command, don't worry it's intentional, this small change will ensure that all tests run and everything is ok with our application. While you progress through this tutorial you will be introduced to different test scenarios, so probably you might want to consider and add the flag to your test script in your
package.jsonto ensure your entire test suite runs.
Our three frontend app modalities: automated test (Jest), component development (Storybook), and the app itself.
Depending on what part of the app you’re working on, you may want to run one or more of these simultaneously. Since our current focus is creating a single UI component, we’ll stick with running Storybook.
To match the intended design, you'll need to download both the font and icon directories and place its contents inside your
src/assets folder. Issue the following commands in your terminal:
npx degit chromaui/learnstorybook-code/src/assets/font src/assets/font npx degit chromaui/learnstorybook-code/src/assets/icon src/assets/icon
That's it. We've successfully configured our app.
When our project was initialized, Create React App (CRA) already created a local repository for us. At this stage it's safe to add our files to the first commit.
Run the following commands to add and commit the changes we've done so far.
$ git add .
$ git commit -m "first commit"
Let's start building our first component!