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|stories.@(mdx|js|jsx|mjs|ts|tsx))",
  ],

  core: {
    disableTelemetry: true,
  },

  env: (envs) => {
    return {
      STORYBOOK_TYPO3_ENDPOINT: 'http://localhost:8011/_storybook/', // if you use DDEV: process.env.DDEV_PRIMARY_URL
      STORYBOOK_TYPO3_WATCH_ONLY_STORIES: '0', // set to '1' If you already use vite in your TYPO3 with HMR
      // 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"
  }
}

DDEV configuration

if you are using DDEV you need to add the following to your .ddev/config.yaml file:

.ddev/config.yaml
```
web_extra_exposed_ports:
- name: storybook
  container_port: 8080
  http_port: 8081
  https_port: 8080
```
Copied!
# Now you have a working Storybook setup!

You can now run Storybook with the following command:

start storybook
```
npm run storybook
# or
yarn storybook
```
Copied!
This will start the Storybook server. You can than access it in your browser at your configured URL.

Tip

If you are using vite in your Project, it can interfere with Storybook. You can read more about this in the `how to use vite with storybook <

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