Loading static files in a NX monorepo

[sameera]

I'm using Storybook for few angular projects inside a NX monorepo. I have several component libraries that work perfectly with Storybook. However, I cannot find a way to specify where to tell Storybook to fetch the static image files. I'm unable to find any documentation on this.

Steps to reproduce the behavior:

1. Create a NX monorepo
2. Create an Angular app project (myapp) and a lib project (mylib).
3. Create a component in mylib and in it put an img tag with src=/assets/test.png. Configure storybook for this component.
4. Put test.png in apps/myapp/src/assets.
5. Add the component to AppComponent
6. nx serve myapp
7. nx run mylib:storybook

The image loads in the app. The image does not load inside the component on Storybook.

Expected behavior Load the image in Storybook

System System: OS: Windows 10 10.0.18363 CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz Binaries: Node: 14.15.0 - C:\Program Files\nodejs\node.EXE npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.18362.449.0) npmPackages: @storybook/addon-knobs: 5.3.9 => 5.3.9 @storybook/angular: 5.3.9 => 5.3.9

Additional context I don't see a way configure this with NX

Another thing that I've tried but has not worked is updating angular.json with:

"build-storybook": {
  "builder": "@nrwl/storybook:build",
  "options": {
    ...
    "assets":[
       {
          "input": "apps/myapp/src/assets",
          "glob": "**/*",
          "output": "assets"
        }
     ]
   },

[sameera]

Update: I can confirm that this problem is Windows only. I tried the same config as above on Mac and it is working.

[Ard2148810]

You need to set staticDir in angular.json file:

"storybook": {
  ...
  "builder": "@nrwl/storybook:storybook",
  "options": {
     "staticDir": ["apps/myapp/src/assets"]
     ...
  }
}

[kpaxton]

I am having a similar issue in that the lib storybook does not have access to the assets. I had previously (v6.4.22) included assets in the storybook options and it worked correctly in linux. NX recently updated to version 6.5.10 and their executors to use @storybook.angular{start|build}-storybook and I guess the assets property didn't make it into the schema. I now receive an error about an invalid schema if I leave that in.

Previous Configuration that worked:

"storybook": {
      "executor": "@nrwl/storybook:storybook",
      "options": {
        "uiFramework": "@storybook/angular",
        "port": 4400,
        "config": {
          "configFolder": "libs/doorway/feature/organization/.storybook"
        },
        "projectBuildConfig": "doorway-feature-organization:build-storybook"
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "build-storybook": {
      "executor": "@nrwl/storybook:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "uiFramework": "@storybook/angular",
        "outputPath": "dist/storybook/doorway-feature-organization",
        "config": {
          "configFolder": "libs/doorway/feature/organization/.storybook"
        },
        "projectBuildConfig": "doorway-feature-organization:build-storybook",
        "assets": [
          {
            "input": "libs/shared/assets/src/lib",
            "glob": "**/*",
            "output": "assets"
          }
        ],
        "styles": ["libs/styles/src/_storybook.scss"],
        "stylePreprocessorOptions": {
          "includePaths": ["libs/styles/src", "apps/doorway/src/styles"]
        }
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    }

New configuration that I had to remove assets from:

"storybook": {
      "executor": "@storybook/angular:start-storybook",
      "options": {
        "port": 4400,
        "configDir": "libs/doorway/feature/organization/.storybook",
        "browserTarget": "doorway-feature-organization:build-storybook",
        "compodoc": false
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "build-storybook": {
      "executor": "@storybook/angular:build-storybook",
      "outputs": ["{options.outputPath}"],
      "options": {
        "assets": [
          {
            "input": "libs/shared/assets/src/lib",
            "glob": "**/*",
            "output": "assets"
          }
        ],
        "styles": ["libs/styles/src/_storybook.scss"],
        "stylePreprocessorOptions": {
          "includePaths": ["libs/styles/src", "apps/doorway/src/styles"]
        },
        "outputDir": "dist/storybook/doorway-feature-organization",
        "configDir": "libs/doorway/feature/organization/.storybook",
        "browserTarget": "doorway-feature-organization:build-storybook",
        "compodoc": false
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    }

If you notice, I need the object version of the assets because my files are not hosted in a static directory called /assets/. I am pulling them from another lib and making the path /assets/.

Can you add assets into the schema and pass them to the angular compiler?

[jonniebigodes]

@mandarini was wondering if you could chime in on this issue and follow up with me for any potential changes to the documentation so that we can address this issue and provide some clarity on it.

Looking forward to hearing from you.

Hope you have a fantastic day.

[mandarini]

Hi @jonniebigodes ! Thanks for pinging me! Would this solution work: Serving static files via Storybook Configuration?

Pinging also @kpaxton @Ard2148810 @sameera. I think you need to set staticDirs in your .storybook/main.js file, right?

[kpaxton]

staticDirs does seem to work . Using the {from:.... to:...} version seemed to map it. I did however, have to include the baseHref in the path manually instead of it mounting automatically.

Using the assets property in the project.json options seems like it would be more global and flexible as it's part of the built package and takes into account things like baseHref.

[sameera]

@mandarini I'm no longer working on this project. So, I'm unable to confirm whether the solution fixes the issue. FYI.

[mandarini]

@kpaxton the assets property still exists on the @storybook/angular:build-storybook builder. Take a look at the schema here: https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/build-storybook/schema.json#L83 Does it not work for you? Do you have an example repository we can take a look at?

@jonniebigodes can you confirm that it still works?

[kpaxton]

@mandarini I did notice that the assets property still existed, I tried to use it again and no, it did not work. I'm using storybook 7 now as well.

Unforunately my project is on a private network and is unable to be shared. It's an NX based monorepo format with angular apps and the assets being in a library.

[mandarini]

So, the assets as you pass them in your project.json look like this:

        "assets": [
          {
            "input": "libs/shared/assets/src/lib",
            "glob": "**/*",
            "output": "assets"
          }
        ],

right?

Should this work on Storybook 7 @jonniebigodes ?

[jonniebigodes]

Based on my testing, yes, it does. with that, I'm closing this for now and circle back to it if any further developments arise. Thanks for taking the time to follow up with me. Appreciate it 🙏