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: Add angular builder to start + build storybook #15061

Merged
merged 4 commits into from
Jun 1, 2021
Merged

Conversation

ThibaudAV
Copy link
Contributor

@ThibaudAV ThibaudAV commented May 27, 2021

Issue: #3995
Other :
#12058
#12232

To bring Storybook closer to angular, add 2 builders, one to start the application and one for the build

Both builders have a required option browserTarget which allows storybook to use the configs usually defined for the browser builder (@angular-devkit/build-angular:browser) of Angular. This way "reflects" the one already used by angular-cli for the builder serve, extract-i18n.

What I did

The builder allows to add a "architect" in angular.json to start or build storybook
config ex :

        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "browserTarget": "angular-cli:build", 
            "staticDir": ["src/assets"]
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "browserTarget": "angular-cli:build",
            "staticDir": ["src/assets"]
          }
        }

cmd : ng run angular-cli:storybook or ng run angular-cli:build-storybook

With this solution it is possible to have several angular projects using different assets and style

How to test

  • Is this testable with Jest or Chromatic screenshots?
    Yes
  • Does this need a new example in the kitchen sink apps?
    na
  • Does this need an update to the documentation?
    maybe

@nx-cloud
Copy link

nx-cloud bot commented May 27, 2021

Nx Cloud Report

CI ran the following commands for commit ccc4ef1. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status Command
#000000 nx run-many --target=prepare --all --parallel --max-parallel=15

Sent with 💌 from NxCloud.

Copy link
Member

@kroeder kroeder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM so far 👍


beforeEach(async () => {
const registry = new schema.CoreSchemaRegistry();
registry.addPostTransform(schema.transforms.addUndefinedDefaults);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this for? (15 and 16) I do lots of stuff with schematics but never have I seen this in tests, I'm curious 🙂

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this add all default props set in schema.json to test it

I was inspired by https://angular.io/guide/cli-builder#testing-a-builder ^^

@ThibaudAV ThibaudAV requested a review from kroeder May 31, 2021 15:20
@ThibaudAV ThibaudAV changed the title Angular: add angular builder to start storybook Angular: add angular builder to start + build storybook May 31, 2021
The builder allows to add a "architect" in angular.json to start storybook
config ex :
```
"storybook": {
 "builder": "@storybook/angular:start-storybook",
  "options": {
  "browserTarget": "angular-cli:build",
  "port": 4400
}
```
cmd : `ng run angular-cli:storybook`

With this solution it is possible to have several angular projects using different assets and style
The builder allows to add a "architect" in angular.json to build storybook
config ex :
```
"build-storybook": {
 "builder": "@storybook/angular:build-storybook",
  "options": {
    "browserTarget": "angular-cli:build"
  }
}
```
cmd : `ng run angular-cli:build-storybook`

With this solution it is possible to have several angular projects using different assets and style
@shilman shilman changed the title Angular: add angular builder to start + build storybook Angular: Add angular builder to start + build storybook Jun 1, 2021
@shilman shilman marked this pull request as ready for review June 1, 2021 15:14
Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking great

@bjornharvold
Copy link

Great PR - Should be incorporated into nx.dev workflow asap

@ThibaudAV
Copy link
Contributor Author

If I have the time I'll go tease them with a PR 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants