Setting up projectBuildConfig
for Nx versions <14.1.8
Deprecated!Careful: This is for older versions of Nx - for the latest version please look at the Set up Storybook for Angular Projects recipe.
NoteThis documentation page contains information about the Storybook plugin, specifically regarding Angular projects that are using Storybook.
If you are on Nx version <14.1.8
, you're still using our custom executor, which means that you have to comply by the Nx Storybook schema. This means that the contents of browserTarget
should be placed in the projectBuildConfig
property. This is telling Storybook where to get the build configuration from. To know more about the purpose of browserTarget
(and projectBuildConfig
) read the section above.
If you're using Nx version >=13.4.6
either in a new Nx workspace, or you migrated your older Nx workspace to Nx version >=13.4.6
, Nx will automatically add the projectBuildConfig
property in your projects project.json
files, for projects that are using Storybook.
Your Storybook targets in your project.json
will look like this:
1 "storybook": {
2 "executor": "@nx/storybook:storybook",
3 "options": {
4 ...
5 "projectBuildConfig": "my-project:build-storybook"
6 },
7 ...
8 },
9 "build-storybook": {
10 "executor": "@nx/storybook:build",
11 ...
12 "options": {
13 ...
14 "projectBuildConfig": "my-project:build-storybook"
15 },
16 ...
17 }
18
This setup instructs Nx to use the configuration under the build-storybook
target of my-project
when using the storybook
and build-storybook
executors.
Notes about the defaultProject
Storybook for Angular needs a default project specified in order to run. The reason is that it uses that default project to read the build configuration from (paths to files to include in the build, and other configurations/settings). In a pure Angular/Storybook setup (not an Nx workspace), the Angular application/project would have an angular.json
file. That file would have a property called defaultProject
. In an Nx workspace the defaultProject
property would be specified in the nx.json
file. Previously, Nx would try to resolve the defaultProject
of the workspace, and use the build configuration of that project. In most cases, the defaultProject
's build configuration would not work for some other project set up with Storybook, since there would most probably be mismatches in paths or other project-specific options.