Automatic setup

Manual setup

If you want to set up Storybook manually for your Angular project, this is the guide for you.

Add to your project. To do that, run:

    Add riot, @babel/core, and babel-loader

    Make sure that you have riot, @babel/core, and babel-loader in your dependencies as well because we list these as a peer dependencies:

    1. npm install riot babel-loader @babel/core --save-dev

    Step 2: Add a npm script

    Step 3: Create the config file

    For a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories.

    To do that, create a file at .storybook/config.js with the following content:

    1. import { configure } from '@storybook/riot';
    3. configure(require.context('../src', true, /\.stories\.js$/), module);

    That will load all the stories underneath your ../src directory that match the pattern . We recommend co-locating your stories with your source files, but you can place them wherever you choose.

    1. {
    2. "extends": "../tsconfig.json",
    3. "exclude": [
    4.   "../src/test.ts",
    5.   "../src/**/*.spec.ts",
    6.   "../projects/**/*.spec.ts"
    7. "include": [
    9.   "../projects/**/*"
    10. ]
    11. }

    Step 5: Write your stories

    Now create a ../src/index.stories.js file, and write your first story like this:

    Each story is a single state of your component. In the above case, there are two stories for the demo button component:

    1. My Component
    2. ├── Built With Tag
    3. ├── Built As String
    4. ├── Built From Raw Import
    5. ├── Built From Tags And Scenario

    Finally: Run your Storybook

    Now everything is ready. Run your storybook with:

    1. npm run storybook

    Now you can develop your components and write stories and see the changes in Storybook immediately since it uses Webpack’s hot module reloading.