DEV Community

Cover image for Using Storybook with Angular and Vite 🎨
Brandon Roberts
Brandon Roberts

Posted on • Edited on

Using Storybook with Angular and Vite 🎨

#angular #storybook

Storybook is a frontend workshop for building UI components and pages in isolation.

By default, Angular and Storybook uses Webpack to build and serve the Storybook application. Angular has already switched over to using Vite as a development server, so you may be interested in using Vite for other parts of your development workflow.

This post guides you through the process of switching to building and serving your Storybook with Angular using Vite. This process can be applied to any Angular project using Storybook.

Setting up Storybook

If you don't have Storybook setup already, run the following command to initialize Storybook for your project:

npx storybook@latest init --type angular
Enter fullscreen mode Exit fullscreen mode

This installs the necessary Storybook dependencies, and sets up a Storybook with a few example components.

Follow the provided prompts, and commit your changes.

Installing the Storybook and Vite Integration

Next, install the AnalogJS Storybook Angular integration using your preferred package manager:

npm install @analogjs/storybook-angular --save-dev
Enter fullscreen mode Exit fullscreen mode

Configuring Storybook

Update the .storybook/main.ts file to use the @analogjs/storybook-angular package.

import { StorybookConfig } from '@analogjs/storybook-angular';

const config: StorybookConfig = {
  // other config, addons, etc.
  framework: {
    name: "@analogjs/storybook-angular",
    options: {},
  },
  docs: {},
};

export default config;
Enter fullscreen mode Exit fullscreen mode

Remove the existing webpackFinal config function if present.

Update the angular.json or project.json storybook targets to use the @analogjs/storybook-angular builders:

    "storybook": {
      "builder": "@analogjs/storybook-angular:start-storybook",
    },
    "build-storybook": {
      "builder": "@analogjs/storybook-angular:build-storybook"
    }
Enter fullscreen mode Exit fullscreen mode

Remove any webpack-specific config options.

If necessary, add the /storybook-static folder to your .gitignore file.

Setting Up Global Styles

To register global styles, add them to the @analogjs/storybook-angular builder options in the angular.json or project.json.

    "storybook": {
      "builder": "@analogjs/storybook-angular:start-storybook",
      "options": {
        // ... other options
        "styles": [
          "src/styles.css"
        ]
      }
    },
    "build-storybook": {
      "builder": "@analogjs/storybook-angular:build-storybook",
      "options": {
        // ... other options
        "styles": [
          "src/styles.css"
        ]
      }
    }
Enter fullscreen mode Exit fullscreen mode

Running Storybook

Use the existing scripts to run your storybook in development.

npm run storybook
Enter fullscreen mode Exit fullscreen mode

Building Storybook

Run the storybook commands for building the storybook.

npm run build-storybook
Enter fullscreen mode Exit fullscreen mode

Storybook is a great way to build and iterate on your components in isolation before integrating them into your application.

If you enjoyed this post, click the ❤️ so other people will see it. Follow me on X and subscribe to my YouTube Channel for more content!

Top comments (4)

Collapse
 
andykono profile image
Andy Kononenko •

Thank you Brandon.

Did you know if storybook for angular support signals input?

Collapse
 
brandontroberts profile image
Brandon Roberts •

It should. Did you run into an issue?

Collapse
 
aelbore profile image
Info Comment hidden by post author - thread only accessible via permalink
Jay •

does the "framework" is mandatory property?

Collapse
 
brandontroberts profile image
Brandon Roberts •

Yes, you should keep the framework section with @storybook/angular

  framework: {
    name: "@storybook/angular",
    options: {},
  },
Enter fullscreen mode Exit fullscreen mode

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more