The Wayback Machine - https://web.archive.org/web/20200201201314/https://github.com/storybookjs/storybook/issues/8652
Skip to content
Please note that GitHub no longer supports old versions of Firefox.

We recommend upgrading to the latest Safari, Google Chrome, or Firefox.

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular - Passing CLI Parameters with storybook #8652

Open
jakobgn opened this issue Oct 31, 2019 · 5 comments
Open

Angular - Passing CLI Parameters with storybook #8652

jakobgn opened this issue Oct 31, 2019 · 5 comments

Comments

@jakobgn
Copy link

@jakobgn jakobgn commented Oct 31, 2019

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.

@github-actions

This comment has been minimized.

Copy link

@github-actions github-actions bot commented Oct 31, 2019

Automention: Hey @MaximSagan @igor-dv @kroeder, you've been tagged! Can you give a hand here?

@kroeder

This comment has been minimized.

Copy link
Member

@kroeder kroeder commented Nov 6, 2019

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

This comment has been minimized.

Copy link
Author

@jakobgn jakobgn commented Nov 6, 2019

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

This comment has been minimized.

Copy link
Member

@kroeder kroeder commented Nov 6, 2019

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

This comment has been minimized.

Copy link
Author

@jakobgn jakobgn commented Nov 6, 2019

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[<INPUT_CONFIG_PARAM>] || {};
const { options: projectOptions } = {...project.architect.build, ...configuration};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.