feat(storybook): allow to specify angular target project for storybook #4099

hiepxanh · 2020-11-17T08:50:41Z

feat(storybook): adding enviroment variable which allow storybook get angular project target

Since this PR storybookjs/storybook#12565 already merge, and going to release with storybook 6.1.
As he said: "Basically, we now verify if there is an environment variable called "STORYBOOK_ANGULAR_PROJECT". If so, we use its value as the project name."
This PR going to add an enviroment variable call "STORYBOOK_ANGULAR_PROJECT" and the storybook going to catch that enviroment variable. Then it can recognize the project name correctly.
This PR only to work with the new storybook version, so why we not release the update first, then after they release it. Every body automatic got this feature :D voila

Current Behavior

Using "default" project from angular.json to run storybook

Expected Behavior

Using project target while using storybook

Related Issue(s)

Fixes #3655 #4305

nx-cloud · 2020-11-17T09:15:07Z

Nx Cloud Report

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

Status	Command	Start Time
	`nx build-base angular`	1/13/2021, 2:41:34 PM
	`nx build-base create-nx-plugin`	1/13/2021, 2:41:42 PM
	`nx build-base create-nx-workspace`	1/13/2021, 2:41:28 PM
	`nx build-base cypress`	1/13/2021, 2:41:21 PM
	`nx build-base dep-graph-client --configuration release`	1/13/2021, 2:40:21 PM
	`nx build-base eslint-plugin-nx`	1/13/2021, 2:41:28 PM
	`nx build-base express`	1/13/2021, 2:41:51 PM
	`nx build-base jest`	1/13/2021, 2:41:21 PM
	`nx build-base linter`	1/13/2021, 2:41:21 PM
	`nx build-base nest`	1/13/2021, 2:41:51 PM
	`nx build-base next`	1/13/2021, 2:41:57 PM
	`nx build-base node`	1/13/2021, 2:41:34 PM
	`nx build-base nx-plugin`	1/13/2021, 2:41:27 PM
	`nx build-base react`	1/13/2021, 2:41:51 PM
	`nx build-base storybook`	1/13/2021, 2:41:41 PM
	`nx build-base web`	1/13/2021, 2:41:34 PM
	`nx run-many --target=build --all --parallel`	1/13/2021, 2:40:00 PM
	`nx run-many --target=e2e --projects=e2e-storybook`	1/13/2021, 2:40:34 PM
	`nx run-many --target=lint --all --parallel`	1/13/2021, 2:42:05 PM
	`nx run-many --target=test --all --parallel`	1/13/2021, 2:37:46 PM

Sent with 💌 from NxCloud.

hiepxanh · 2020-11-17T15:42:59Z

Sad, why I just add only 1 enviroment variable but it can make the test failing?

hiepxanh · 2020-11-21T09:02:57Z

@juristr hello sir, can you help me to verify the new code? storybook 6.1 has been release and it should work with my new code, but I dont understand, why it fail

juristr · 2020-11-21T13:12:25Z

Hey thx for the contribution. I'll give it a look next week

juristr · 2020-11-27T21:23:05Z

@hiepxanh the problem why the build fails is due to the git commit message check:

Can you squash your two commits and use this message:

feat(storybook): adding environment variable for storybook to find correct angular project target

Thx :)

hiepxanh · 2020-11-28T02:26:49Z

@juristr yes sir, I already pushed new commit

hiepxanh · 2020-11-29T02:51:56Z

@juristr I already follow the instruction, why it still fail sir?

hiepxanh · 2020-11-30T12:39:53Z

@juristr my yarn verified it

juristr · 2020-11-30T13:41:59Z

@hiepxanh they aren't failing due to the commit message this time. There was some error in the pipeline, might have been a CircleCI issue. I'll restart them and then we'll see.

hiepxanh · 2020-11-30T15:49:17Z

thank you sir

…rrect angular project target

juristr · 2020-11-30T21:14:59Z

@hiepxanh looks like something went wrong with your original rebase. Anyway, I fixed it and pushed again to your branch. The PR looks good to me. I'll give it a test run and then merge it.

I just want to get the upgrade to Storybook v6.1 in first as well before I merge this one.

Thx for your contribution :)

hiepxanh · 2020-12-01T02:51:45Z

wow! thank you so much sir, sorry for my clumsy

hiepxanh · 2020-12-11T02:43:32Z

@juristr dont you mind if you take a look with my PR?

juristr · 2020-12-11T08:58:40Z

I did, but I have to think this through more deeply. Your PR works on apps, however needs some improvements when you run storybook in libs.

Right now we're busy on preparing the Nx 11 release. I'll take a closer look immediately after that

hiepxanh · 2020-12-28T09:36:32Z

:D resolved conflict

juristr · 2021-01-08T20:53:51Z

@hiepxanh I'm looking at your PR right now. The main issue here is that in this way when you generate a storybook config for an Nx library, the according "build" won't be found, thus you get something like

ERR! architect.build is not defined for project 'ui'.

(where ui is my Nx lib). Because now the library config in workspace.json is being used which doesn't have a build config. Which might be fine, but changes the behavior compared to before, where some of the app's configs in the workspace would have been used.

I'm wondering whether we should give the possibility to specify a property in the storybook config in the workspace.json that allows to point to an app that should be used as the config 🤔 . I'm going to give that a quick try tomorrow and push a fix in case s.t. we can get this merged

hiepxanh · 2021-01-08T23:04:43Z

thank you, that is a greate idea,I think your solution should be fine 😄

juristr · 2021-01-09T20:42:24Z

@hiepxanh here's the solution I came up with.

a) "app" type projects will always get the context.target.project as that's the only thing that makes sense.

b) if "lib" type projects are being started with storybook, then the normal storybook app resolution will take place, unless you specify a different app project in the corresponding configuration in the "angular.json" (or workspace.json).
Say you have a lib ui, then the storybook config could look like

"storybook": {
  "builder": "@nrwl/storybook:storybook",
  "options": {
    "uiFramework": "@storybook/angular",
    "port": 4400,
    "appBuildConfig": "testapp", // <<<<<<<<<
    "config": {
      "configFolder": "libs/ui/.storybook"
    }
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
},

By adding appBuildConfig to testapp, then Storybook will use the testapp as the Angular app to fetch the config from.

What do you think? Also, if you have a better name in mind than appBuildConfig let me know 😅. It works locally, going to wrap it up tomorrow or latest Monday. I'll then push it up onto your branch and we merge this PR in the end, ok? Let me know what you think

hiepxanh · 2021-01-10T00:03:09Z

Yes, that exactly what I'm thinking of. I belive the appBuildConfig name should be projectBuildConfig since that you can point to an application or a library, for example:

projectBuildConfig: nx-airplane
projectBuildConfig: nx-airplane-ui
that is look perfect :D

Allows to specify the `projectBuildConfig` on the storybook config in the workspace.json

github-actions · 2023-03-21T12:09:01Z

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.

vsavkin assigned juristr Nov 17, 2020

hiepxanh force-pushed the patch-1 branch from 2bf10a3 to f3e207c Compare November 28, 2020 02:26

feat(storybook): adding environment variable for storybook to find co…

ae434af

…rrect angular project target

juristr force-pushed the patch-1 branch from f3e207c to ae434af Compare November 30, 2020 19:30

vsavkin force-pushed the master branch from c627679 to 7911a60 Compare December 16, 2020 14:16

vsavkin force-pushed the master branch from e2daa86 to 37e1155 Compare December 23, 2020 15:43

Merge branch 'master' into patch-1

e92c1af

hiepxanh mentioned this pull request Dec 28, 2020

Storybook fails to execute when running in an Nx workspace #4305

Closed

juristr force-pushed the patch-1 branch from 7ccc0e8 to c4e21d8 Compare January 11, 2021 17:51

feat(storybook): specify projectBuildConfig

28823c6

Allows to specify the `projectBuildConfig` on the storybook config in the workspace.json

juristr force-pushed the patch-1 branch from c4e21d8 to 28823c6 Compare January 13, 2021 14:27

juristr changed the title ~~feat(storybook): adding enviroment variable which allow storybook get angular project target~~ feat(storybook): allow to specify angular target project for storybook Jan 13, 2021

juristr merged commit 504466f into nrwl:master Jan 13, 2021

github-actions bot locked as resolved and limited conversation to collaborators Mar 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(storybook): allow to specify angular target project for storybook #4099

feat(storybook): allow to specify angular target project for storybook #4099

hiepxanh commented Nov 17, 2020 •

edited

Loading

nx-cloud bot commented Nov 17, 2020 •

edited

Loading

hiepxanh commented Nov 17, 2020 •

edited

Loading

hiepxanh commented Nov 21, 2020

juristr commented Nov 21, 2020

juristr commented Nov 27, 2020

hiepxanh commented Nov 28, 2020

hiepxanh commented Nov 29, 2020

hiepxanh commented Nov 30, 2020

juristr commented Nov 30, 2020

hiepxanh commented Nov 30, 2020

juristr commented Nov 30, 2020

hiepxanh commented Dec 1, 2020

hiepxanh commented Dec 11, 2020

juristr commented Dec 11, 2020

hiepxanh commented Dec 28, 2020

juristr commented Jan 8, 2021

hiepxanh commented Jan 8, 2021

juristr commented Jan 9, 2021

hiepxanh commented Jan 10, 2021

github-actions bot commented Mar 21, 2023

feat(storybook): allow to specify angular target project for storybook #4099

feat(storybook): allow to specify angular target project for storybook #4099

Conversation

hiepxanh commented Nov 17, 2020 • edited Loading

feat(storybook): adding enviroment variable which allow storybook get angular project target

Current Behavior

Expected Behavior

Related Issue(s)

nx-cloud bot commented Nov 17, 2020 • edited Loading

Nx Cloud Report

hiepxanh commented Nov 17, 2020 • edited Loading

hiepxanh commented Nov 21, 2020

juristr commented Nov 21, 2020

juristr commented Nov 27, 2020

hiepxanh commented Nov 28, 2020

hiepxanh commented Nov 29, 2020

hiepxanh commented Nov 30, 2020

juristr commented Nov 30, 2020

hiepxanh commented Nov 30, 2020

juristr commented Nov 30, 2020

hiepxanh commented Dec 1, 2020

hiepxanh commented Dec 11, 2020

juristr commented Dec 11, 2020

hiepxanh commented Dec 28, 2020

juristr commented Jan 8, 2021

hiepxanh commented Jan 8, 2021

juristr commented Jan 9, 2021

hiepxanh commented Jan 10, 2021

github-actions bot commented Mar 21, 2023

hiepxanh commented Nov 17, 2020 •

edited

Loading

nx-cloud bot commented Nov 17, 2020 •

edited

Loading

hiepxanh commented Nov 17, 2020 •

edited

Loading