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

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.

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.

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

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

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

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! 😃

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

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/<framework> generators? Either way, having hot module reloading from intial setup is ideal