Storybook doesn't run in dev mode with hot reload like start-storybook

[sir-captainmorgan21]

Current Behavior

I have storybook set up with NX and Angular. Everything is working fine except I am forced to run nx run storybook:<my-project> after every change I make. start-storybook runs this as a dev server with hot module reloading. Am I missing a cli option to get this, or is nx using the wrong builder?

Expected Behavior

I would expect serving storybook to have hot reloading available.

Steps to Reproduce

Set up an NX project with storybook configuration and run the nx run storybook:<project> command.

Environment

Node : 17.3.0
  OS   : darwin x64
  npm  : 8.3.0
  
  nx : 13.4.4
  @nrwl/angular : 13.4.4
  @nrwl/cli : 13.4.4
  @nrwl/cypress : 13.4.4
  @nrwl/devkit : 13.4.4
  @nrwl/eslint-plugin-nx : 13.4.4
  @nrwl/express : undefined
  @nrwl/jest : 13.4.4
  @nrwl/linter : 13.4.4
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.4.4
  @nrwl/web : undefined
  @nrwl/workspace : 13.4.4
  @nrwl/storybook : 13.4.4
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
  	 @angular/animations: 13.1.1
  	 @angular/common: 13.1.1
  	 @angular/compiler: 13.1.1
  	 @angular/core: 13.1.1
  	 @angular/forms: 13.1.1
  	 @angular/platform-browser: 13.1.1
  	 @angular/platform-browser-dynamic: 13.1.1
  	 @angular/router: 13.1.1
  	 @compodoc/compodoc: 1.1.18
  	 @angular-devkit/build-angular: 13.1.2
  	 @angular/cli: 13.1.2
  	 @angular/compiler-cli: 13.1.1
  	 @angular/language-service: 13.1.1
  	 @storybook/angular: 6.5.0-alpha.13

[sir-captainmorgan21]

I was able to change he executor to use @storybook/angular:start-storybook like so:

"storybook": {
      "executor": "@storybook/angular:start-storybook",
      "options": {
        "port": 4400,
        "configDir": "packages/button/.storybook",
        "browserTarget": "button:build-storybook"
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },

But ideally, this is something that is built into one of the generators. Maybe it's necessary to start building @nrwl/storybook/ generators? Either way, having hot module reloading from intial setup is ideal

[mandarini]

Hi there! So, hot reload works for you when you switch the executor?
Please take a look at this comment here. There are a number of issues related to Angular 13.1+Storybook at the moment, so maybe it's related to these. I will look into it eventually, I'm trying to make sure all issues/bugs are covered! :)

[coltpini]

I am seeing the same behavior. I staying up to date with the @next releases of storybook (currently 6.5.0.alpha.15). I have storybook working, but it doesn't hot reload, or even update with a manual reload, I have to kill and restart storybook to get any changes.
I looked into changing the executor, but don't see that config anywhere in my project. I am new to Nx, so I am probably just missing something.

[mandarini]

@coltpini Oh I see! Don't worry, I can help you out. Can you share a repository reproducing your issue? I can show you which parts you need to tweak, especially for the watch mode/hot reload.

But let me ask you something. Does your workspace have an angular.json file or a workspace.json file? Also, do you have project.json files inside your project folders?

[mandarini]

@sir-captainmorgan21 I would suggest this solution.

Please let me know if it works.

[mandarini]

Oh, also, what if you pass --watch?

[sir-captainmorgan21]

@mandarini from what I can tell the function you are calling no longer supports "watch" as a config. You may want to use the CLIConfig interface in storybook/core or common (can't remember which one) if their package surfaces it. I dug into the nx src code a bit to see what could be missing, and that where I realized that 'watch' was removed. I tried digging into storybook's code to understand exactly what function start-storybook runs through but couldn't figure it out. Not familiar with CLI implementations

But yes. Changing the executor did the trick for me. I am on 6.5.0-alpha.13. Im guessing I should probably not jump to 14 haha. But yea @coltpini until they get a baked-in solution, you can go with updating the executor for now.

[sir-captainmorgan21]

@mandarini hey. Saw you go assigned to this today. Was wondering if you were looking to knock it out this week? Im writing up some docs on initiating our package libs, and wanted to know if I could omit including my workaround in the docs or if a fix would be out soon. Thanks!

[mandarini]

Hi @sir-captainmorgan21 ! I am not sure when this will be ready, it should be soon, but I don't want to make false promises. So go ahead and document your workaround, and once we put a fix in a next version of Nx I'll make sure to post it here! :)

[Coly010]

Hey @sir-captainmorgan21 !
I've pushed a PR with the fix to this. I've copied the explanation as to why this occurred below:

Explanation

Storybook's app/angular/src/server/framework-preset-angular-cli.ts file has code in it that merges three configs.

It merges in the following order

• Config that is passed to the function
• Config it reads from the Browser Build target that it reads from the angular.json/workspace.json/project.json
• Additional Config Options from a new object angularBuilderOptions that was introduced in this commit: storybookjs/storybook@8704f84

We were passing watch: true from our executor, but it was being overridden by the watch value it was reading from the angular.json/workspace.json/project.json. This is partially because the default build configuration for Angular apps is now production.

Storybook providing the angularBuilderOptions and merging it last gave us an option to pass the watch flag using it.

[mandarini]

Just tested it locally, and it works great! :) Thanks @Coly010 !

[sir-captainmorgan21]

@mandarini @Coly010 awesome thanks!

[sir-captainmorgan21]

@Coly010 what version will this be?

[Coly010]

@sir-captainmorgan21 Not entirely sure. It'll likely land in the next release. I'll update this thread when it does

[Coly010]

@sir-captainmorgan21 This has been released as part of Nx v 13.7.2! :)

[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.