Any idea how to launch this on docker where is no php executable?

[vytenis-sciukas-nfq]

=> Failed to build the preview
Error: Symfony console failed with exit status 127:
CMD: 'php' 'bin/console' 'debug:container' '--parameter=kernel.project_dir' '--format=json' '-v'
Output:
Error output: /bin/sh: 1: php: not found

Seems like php executable is hardcoded and there is no way to launch this properly on docker. I was unable to find information on docs how to resolve this, but this is a major blocker.

[jon-ht]

Hi, unfortunatly it's not possible

I'm working on a rework of internal JS commands to not depend on PHP binary here #47

This is still a draft, as I am waiting for maintainers to accept this solution.

In the meantime, you would have to download PHP on your machine, or use your own Storybook setup

[stu-ad]

After a fair bit of fighting, I was able to get this working with our Dockerized app. It's far from perfect, performance isn't great but it does work. I am running Storybook on the same container as the Symfony application and exposing the port in docker-compose.yml - This is obviously tailored to our setup with Traefik but hopeful someone finds this helpful as a starter. With the below setup I can access the Storybook manager at localhost:6006 running against my app exposed on dev-server.test

I've tried to just include the relevant parts below:

php:
        image: ghcr.io/our-private-image-with-node-installed
        container_name: php83
        volumes:
            - ~/local-dirs:/volumes/exposed/from-container
        ports:
            - "3000:3000"  // exposed to access pentatrion vite bundle dev server
            - "6006:6006" // exposed to access storybook
        networks:
            - traefik
reverse-proxy:
        image: traefik:v2.9.8
        container_name: traefik
        networks:
            traefik:
                aliases:
                    - "dev-server.test"

In the storybook main.ts file.

const config: StorybookConfig = {
    stories: ['../stories/**/*.stories.[tj]s', '../stories/**/*.mdx'],
    addons: [
        '@storybook/addon-essentials',
    ],
    framework: {
        name: '@sensiolabs/storybook-symfony-webpack5',
        options: {
            symfony: {
                server: 'dev-server.test',
                proxyPaths: ['/images', '/assets', '/_components', '/Fonts', '/dist', '/css'],
                additionalWatchPaths: [
                    'assets',
                ]
            }
        },
    },
    docs: {
        autodocs: 'tag',
    },
}

We have a little python helper to make it more convenient to run but essentially we ssh into the php container and run the following from the app route directory:

npx storybook dev -p 6006 -h 0.0.0.0 --no-open --disable-telemetry --config-dir .storybook

[jon-ht]

Hi @stu-ad, thanks for sharing your setup !

I've also though of having an image with Node + PHP, but like you said : this is not what we want.

By any chance, could you try using #47 in your composer.json ? You will have to update your main.ts according to new options. Here is mine

import 'dotenv/config';
import type { StorybookConfig } from '@sensiolabs/storybook-symfony-webpack5';
import path from 'path';

const config: StorybookConfig = {
    stories: [
        '../templates/components/**/*.stories.[tj]s'
    ],
    addons: [
        '@storybook/addon-webpack5-compiler-swc',
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
    ],
    framework: {
        name: '@sensiolabs/storybook-symfony-webpack5',
        options: {
            // 👇 Here configure the framework
            symfony: {
                projectDir: '/application/front',
                storybookCachePath: path.resolve(__dirname, `../var/cache/${process.env.APP_ENV}/storybook`),
                server: process.env.FRONT_URL,
                proxyPaths: [
                    '/dist',
                ],
                additionalWatchPaths: [
                    path.resolve(__dirname, '../assets'),
                ],
                projectPathAliases: {
                    [path.resolve(__dirname, '..')]: '/application/front',
                }
            }
        },
    },
};

export default config;

Important

You need to remove your node_modules and run yarn/npm install before running Storybook command

[stu-ad]

Hi @jon-ht - Thanks, your contribution looks very promising. Great work!

It might take me a little time to get back to you but I'm keen to help out and test when I get the chance. We've got quite a lot of other custom stuff going on to support our application so I'd like to run against a stripped back personal project. That way I'm also free to share more code.

[vytenis-sciukas-nfq]

Ive just created separate docker image with a sandbox bundle, that worked perfectly my app renders twig via controller and sandbox works on separate container. I can paste main aspects of configuration tomorrow.