Storybook: Angular - Passing CLI Parameters with storybook

[jakobgn]

When building and running storybook I would like to be able to pass parameters for angular.json. For instance injecting configurations in Angular is done with "ng serve -c my-config" or "ng build -c my-config" and I would like to do the same when running Angular inside storybook.

As Angular does not support environment variables that is not an option.

[kroeder]

Interesting idea. Do you need -c in particular? Storybook doesn't use the angular CLI. I think we would need to pick certain CLI features and integrate them in storybook if possible

-c could be something that is possible to integrate for example. Right now storybook is already looking for a "storybook" project in the angular.json. That would be equivalent to -c storybook, right? (I never used -c before)

Can you specify what exactly you need? Maybe add a short real-world use-case snippet as a comment?

[jakobgn]

H @kroeder , thanks for looking in to this.
Yes I would only need the -c, (--configuration)

I am building a white-labeled app, that can support custom SCSS, assets, and other client configurations based on a configuration parameter. The below configuration, set in angular.json, is applied by running -c client1 or --configuration=client1.

      "configurations": {
        "production": {...   },
        "client1": {
          "stylePreprocessorOptions": {
            "includePaths": ["theming/client1"]
          },
          "fileReplacements": [
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "app:build"
      },
      "configurations": {
        "production": {
          ...
        },
        "client1": {
          "browserTarget": "app:build:client1"
        }
      }
    }

So in storybook I would like to do the same, i.e. npm run storybook -c client1 (or with an env variable that hooks into the angular -c), but I would imagine it could be difficult if you are not wrapping the CLI already.

[kroeder]

A short insight of how storybook currently extracts a project from the angular.json: https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/angular-cli_config.ts#L60

It's this order: return projects.storybook || fallbackProject || firstProject;

1. Is there a storybook project defined in angular.json
2. Is there a defaultProject defined in angular.json
3. Take the first project found in the angular.json

I think having a way of choosing a certain project with something like start-storybook --ngCliProject client1 with a default project set to --ngCliProject storybook could be useful! Especially for managing multiple storybooks in one mono-repo

@shilman @ndelangen this wouldn't be framework agnostic, though. Do we even have non-framework agnostic code in the storybook CLI? This seems to be a very small change to @storybook/angular (see the link above, shouldn't take much code) but I'm not sure about the CLI implementation 🤔

Are there alternatives?

[jakobgn]

Thats a really cool insight, I was not aware it would prioritize a storybook project. Is it possible to have a library as a project?

For my use case though I am requesting something a bit different. The "project" consist of shared configurations for multiple clients, and the "configuration" is client specific. So I would want to run start-storybook --ngCliProject storybook --ngCliConfiguration client1 i.e. to show client1 themed ui components in isolation.

A solution could be to override the options in
const { options: projectOptions } = project.architect.build;

Instead it would be something like
const configuration: projectConfiguration = project.architect.build.configurations[] || {};
const { options: projectOptions } = {...project.architect.build, ...configuration};

[NikolaRusakov]

A short insight of how storybook currently extracts a project from the angular.json: https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/angular-cli_config.ts#L60

It's this order: return projects.storybook || fallbackProject || firstProject;

1. Is there a storybook project defined in angular.json
2. Is there a defaultProject defined in angular.json
3. Take the first project found in the angular.json

I think having a way of choosing a certain project with something like start-storybook --ngCliProject client1 with a default project set to --ngCliProject storybook could be useful! Especially for managing multiple storybooks in one mono-repo

@shilman @ndelangen this wouldn't be framework agnostic, though. Do we even have non-framework agnostic code in the storybook CLI? This seems to be a very small change to @storybook/angular (see the link above, shouldn't take much code) but I'm not sure about the CLI implementation 🤔

Are there alternatives?

@kroeder I'm more than interested in contribution to this feature.

We're working in monorepo setup, Nrwl Nx tooling and having multiple projects requires to run different configurations which resulted running into dead end. The dirtiest way would be simple file replacement inside angular.json, in our case defaultProject before each script which runs storybook instance.

But I'm not a fan of the solution, I'd rather see some mechanism which scales and it's easily testable.
From what I saw in @storybook/angular codebase, framework-preset-angular-cli.js only passes path to getAngularCliWebpackConfigOptions.

I would expect as a developer either to have an opportunity to write some custom Webpack plugin which would be responsible for the getLeadingAngularCliProject functionality or passing param to cli.

If there's no easy solution/answer to this, do you advice to go for the quick and dirty file replacement of defaultProject before script runs?

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.22 containing PR #12565 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.