@neubau-kompass/storybook-symfony-webpack

Webpack framework package for neubau-kompass/storybook-bundle.

This package supports projects that need Storybook's Webpack 5 builder because they rely on Webpack-specific loaders, plugins, or Storybook customization. New projects can use either builder, with Vite generated by default.

Most users should install the Composer bundle and run:

bin/console storybook:init --builder=webpack

That command writes the Storybook config and points the project at this package:

"@neubau-kompass/storybook-symfony-webpack": "^0.1.0"

This package targets Webpack 5 because Storybook 10's Webpack builder is Webpack 5.

Configuration

import type { StorybookConfig } from '@neubau-kompass/storybook-symfony-webpack';

const config: StorybookConfig = {
    stories: ['../templates/components/**/*.stories.[tj]s'],
    addons: ['@storybook/addon-docs'],
    framework: {
        name: '@neubau-kompass/storybook-symfony-webpack',
        options: {
            symfony: {
                server: 'http://localhost:8000',
                proxyPaths: ['/assets', '/_components'],
                additionalWatchPaths: ['assets'],
            },
        },
    },
};

export default config;

The symfony.server option is required while running Storybook in development because the preview sends Twig render requests to Symfony. It can be omitted for production builds when the deployed static Storybook is served behind a reverse proxy to Symfony.

Exported Types

import type { StorybookConfig, Preview } from '@neubau-kompass/storybook-symfony-webpack';

Use StorybookConfig in .storybook/main.ts and Preview in .storybook/preview.ts.

Development

From the repository root:

npm run build --workspace packages/webpack
npm run test --workspace packages/webpack

The package consumes shared internals from packages/shared during development. Published output in dist/ inlines those internals, so consumers do not install the shared package.