Installation of EXT:storybook and storybook

install EXT:storybook

installation of EXT:storybook is done via composer:

install via composer
```
composer req andersundsehr/storybook --dev
```
Copied!
It is also possible to install EXT:storybook in legacy mode, but this is not recommended. https://extensions.typo3.org/package/storybook

Tip

You still need to use npm so you should also use composer.
install storybook

install via npm
```
npm install @andersundsehr/storybook-typo3 --save-dev
# or
yarn add @andersundsehr/storybook-typo3 --dev
```
Copied!
Caution

make sure you install the same version for both:
- composer andersundsehr/storybook
- npm/yarn @andersundsehr/storybook-typo3

create /.storybook/ directory

create a .storybook directory besides your package.json file.

you need to update your STORYBOOK_TYPO3_ENDPOINT to your TYPO3 instance URL:

/.storybook/main.ts

import type { StorybookConfig } from '@andersundsehr/storybook-typo3';

const config: StorybookConfig = {
  framework: '@andersundsehr/storybook-typo3',

  stories: [
    "../src/**/*.mdx",
    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],

  core: {
    disableTelemetry: true,
  },

  env: (envs) => {
    return {
      STORYBOOK_TYPO3_ENDPOINT: 'http://localhost:8011/_storybook/',
      // do not set your api key here! https://www.deployhq.com/blog/protecting-your-api-keys-a-quick-guide
      ...envs, // envs given to storybook have precedence
    };
  },
};
export default config;

/.storybook/preview.ts

import type { Preview } from '@andersundsehr/storybook-typo3';

const preview: Preview = {
  tags: ['autodocs'],
};
export default preview;

configure package.json

add the scripts to your package.json file:

/package.json

{
  "name": "storybook-minimal",
  "scripts": {
    "storybook": "storybook dev -p 8080 --ci",
    "build-storybook": "storybook build",
    "preview-storybook": "npx -y http-server storybook-static"
  },
  "dependencies": {
    "@andersundsehr/storybook-typo3": "file:vendor/andersundsehr/storybook/the-npm-package"
  },
  "devDependencies": {
    "@playwright/test": "^1.54.1"
  }
}

# Now you have a working Storybook setup!

You can now run Storybook with the following command:

start storybook
```
npm run storybook
```
Copied!
This will start the Storybook server and open it in your default browser.

You can now start creating stories for your TYPO3 Fluid components!