Setup Angular Storybook in your development environment
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 Angular.
Setup Angular Storybook
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 the @angular/cli to setup our build system, and enable Storybook and Jest testing in our created app. Let’s run the following commands:
# Create our application (using less as the style pre processor): npx -p @angular/cli ng new taskbox --style less cd taskbox # Add Storybook: npx -p @storybook/cli sb init
We can quickly check that the various environments of our application are working properly:
# Run the test runner (Karma) in a terminal (we will add Jest along the way): yarn test # Start the component explorer on port 6006: yarn run storybook # Run the frontend app proper on port 4200: yarn start
yarn testthrows an error, you may need to install
watchmanas advised in this issue.
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.
Taskbox reuses design elements from the GraphQL and React Tutorial example app, so we won’t need to write CSS in this tutorial. We’ll simply include the LESS files in our app and import them inside
We also need to add the font and icon directories to the
assets/ folder. After adding styling and assets, the app will render a bit strangely. That’s OK. We aren’t working on the app right now. We’re starting off with building our first component!