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
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 packages
Next, install the AnalogJS Vite Plugin for Angular and the Vite Builder for Storybook using your preferred package manager:
npm install @analogjs/vite-plugin-angular @storybook/builder-vite --save-dev
Configuring Storybook to use the Vite Builder
Update the .storybook/main.ts
file to use the @storybook/builder-vite
and add the viteFinal
config function to configure the Vite Plugin for Angular.
import { StorybookConfig } from '@storybook/angular';
import { StorybookConfigVite } from '@storybook/builder-vite';
import { UserConfig } from 'vite';
const config: StorybookConfig & StorybookConfigVite = {
// other config, addons, etc.
core: {
builder: {
name: '@storybook/builder-vite',
options: {
viteConfigPath: undefined,
},
},
},
async viteFinal(config: UserConfig) {
// Merge custom configuration into the default config
const { mergeConfig } = await import('vite');
const { default: angular } = await import('@analogjs/vite-plugin-angular');
return mergeConfig(config, {
// Add dependencies to pre-optimization
optimizeDeps: {
include: [
'@storybook/angular',
'@storybook/angular/dist/client',
'@angular/compiler',
'@storybook/blocks',
'tslib',
],
},
plugins: [angular({ jit: true, tsconfig: './.storybook/tsconfig.json' })],
});
},
};
Remove the existing webpackFinal
config function if present.
Next, Update the package.json
to run the Storybook commands directly.
{
"name": "my-app",
"scripts": {
"storybook": "storybook dev --port 4400",
"build-storybook": "storybook build"
}
}
You can also remove the Storybook targets in the angular.json
If you're using Nx, update your project.json
storybook targets to run the Storybook commands:
"storybook": {
"executor": "nx:run-commands",
"options": {
"cwd": "apps/my-app",
"command": "storybook dev --port 4400"
}
},
"build-storybook": {
"executor": "nx:run-commands",
"options": {
"cwd": "apps/my-app",
"command": "storybook build --output-dir ../../dist/storybook/my-app"
}
}
If necessary, add the /storybook-static
folder to your .gitignore
file.
Running Storybook
Run the storybook commands directly for running the development server.
npm run storybook
Building Storybook
Run the storybook commands for building the storybook.
npm run build-storybook
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)
Thank you Brandon.
Did you know if storybook for angular support signals input?
It should. Did you run into an issue?
does the "framework" is mandatory property?
Yes, you should keep the
framework
section with@storybook/angular
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