[Feature Request] use different projects for configuring storybook

[sroettering]

Prerequisites

Please answer the following questions for yourself before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• I am running the latest version
• I checked the documentation (nx.dev) and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

In my monorepo setup I have multiple angular projects all using the same UI library but with different theming that is realized by importing scss partials.
When running storybook for the UI library I would like an easy was to switch between themes. Not necessarily during runtime some config option would suffice.
Right now I get the following output in the console:
info => Using angular project 'some-project-name' for configuring Storybook.
So I guess it would be enough to have an option for saying which project storybook should use.

Or maybe there is already a way to do this and I couldn't find it?

[juarezpaf]

I have a similar configuration over here. I configured the Storybook to run inside of the UI library when I run the command nx run ui:storybook I get the info => Using angular project 'portal' for configuring Storybook. where portal is the first app configured inside of the angular.json file.
Why do we even need a project to run the storybook inside of a library?

[rhutchison]

This is an issue with @storybook/angular not nx.

https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/angular-cli_config.ts#L73

My hack (add to anuglar.json)

    "storybook": {
      "projectType": "application",
      "root": "",
      "architect": {
        "build": {
          "options": {
            "tsConfig": "tsconfig.json"
          }
        }
      }
    }

[spaceribs]

@rhutchison could you please describe where you inserted your hack? Thank you

[douglasward]

Looks like there is a related issue open in the storybook repo: storybookjs/storybook#10302

[spaceribs]

Just to follow up, any project named "storybook" will take precedence over the default application. Add the above under your projects and it will use the tsconfig.json you specify.

[sroettering]

For my use case creating such a dummy project called storybook would suffice, thus I close this issue.

[Mubramaj]

Starting at version 6.1.0 of storybook was introduced an env variable named STORYBOOK_ANGULAR_PROJECT .

In the main.js config of any .storybook folder you can set this env variable with the angular project you need, just like this:

process.env.STORYBOOK_ANGULAR_PROJECT = 'your-project-name';

Here is the link to the pull request that introduced this feature:

storybookjs/storybook#12565

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.