The Wayback Machine - https://web.archive.org/web/20200616130019/https://github.com/storybookjs/storybook/issues/8652
Skip to content
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 · 6 comments
Open

Angular - Passing CLI Parameters with storybook #8652

jakobgn opened this issue Oct 31, 2019 · 6 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
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
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
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
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
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};

@NikolaRusakov
Copy link

@NikolaRusakov NikolaRusakov commented Feb 18, 2020

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?

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.