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

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

[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: https://github.com/storybookjs/storybook/commit/8704f84d293c6a32cf035c2a25a4a385d4e27241

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.

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