Any reason nx/node requires assets to be under sourceRoot?

[kenptr]

Hi nx team, great work on the project! Just started using it, and loving so far!

I have 2 projects: nest - nestjs server, buttonjs - small JS project

I want buttonjs project to generate button.js file and copy it under nest's assets folder to serve from there.

For that I'm trying to configure nest's build target:

          "options": {
            "outputPath": "dist/apps/nest",
            "main": "apps/nest/src/main.ts",
            "assets": [
              "dist/apps/buttonjs/main.js"
            ],

But it doesn't allow me with this error: asset path must start with the project source root:.

Is there specific reason why there is this constraint? If yes, can we please document it in the source code and error message to make it more clear?

File: https://github.com/nrwl/nx/blob/master/packages/node/src/utils/normalize.ts

      if (!resolvedAssetPath.startsWith(resolvedSourceRoot)) {
        throw new Error(
          `The ${resolvedAssetPath} asset path must start with the project source root: ${sourceRoot}`
        );
      }

[kenptr]

Here is my solution for this:

Put this file under tools/webpack/custom_assets_copier.js.

// Copies custom assets from any folder to the target's "outputPath".
// Because "options.assets" doesn't allow copying from outside of "PROJECT.sourceRoot".
//
// Usage in workspace.json:
//   "targets": {
//     "build": {
//       "executor": "@nrwl/node:build",
//       "options": {
//         "outputPath": "dist/apps/NESTJS_APP",
//         "customAssets": [
//           { "from": "dist/apps/smalljsapp/main.js", "toRelative": "assets/smalljsapp.min.js" }
//         ],
//         "webpackConfig": "tools/webpack/custom_assets_copier.js"
//       },
//       "configurations": {}
//     }
//   }
//
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

module.exports = (config, context) => {
  if (!context.options.customAssets) return config;

  const patterns = context.options.customAssets.map((asset) => {
    return {
      from: path.resolve(context.options.root, asset.from),
      to: asset.toRelative,
    };
  });

  return { ...config, plugins: [...config.plugins, new CopyWebpackPlugin({ patterns })] };
};

[kenptr]

The above solution didn't work properly for me. So I've created a new executor, which worked like a charm!

// Usage in workspace.json:
//
//   "myproject": {
//     "targets": {
//       "build": {},
//       "buildWatch": {
//         "executor": "./tools/executors/SOMENAME:run-target",
//         "options": {
//           "target": "myproject:build",
//           "watch": true
//         }
//       }
//     }
//   }

import { json } from "@angular-devkit/core";
import { runExecutor, parseTargetString, ExecutorContext } from "@nrwl/devkit";
import { convertNxExecutor } from "@nrwl/devkit";

interface Options extends json.JsonObject {
  target: string;
}

async function* run(options: Options, context: ExecutorContext) {
  const { target, ...newOptions } = options;
  const parsedTarget = parseTargetString(target);
  for await (const result of await runExecutor(parsedTarget, newOptions, context)) {
    yield result;
  }
}
export default convertNxExecutor(run);

builder.json

{
  "builders": {
    "run-target": {
      "implementation": "./run-target",
      "schema": "./run-target-schema.json",
      "description": "Runs another target with overridden options."
    }
  }
}

run-target-schema.json

{
  "$schema": "http://json-schema.org/schema",
  "type": "object",
  "description": "Runs another target with new options",
  "properties": {
    "target": {
      "type": "string",
      "description": "what to build, e.g. PROJECT:TARGET"
    }
  },
  "additionalProperties": true,
  "required": ["target"]
}

File structure:

./tools/executors
   SOMENAME/
        builder.json
        package.json
        run-target.ts
        run-target.schema
    tsconfig.json

Compiling the executor

$ npx tsc -p ./tools/executors

with this tsconfig.json:

{
  "extends": "../tsconfig.tools.json",
  "compilerOptions": {
    "outDir": ".",
    "rootDir": ".",
  },
}

[binary64]

Shall we escalate this to a feature request? I don't see a need for the restriction. The whole point is that they're assests, not source code.

Here's my solution:

yarn add -DW patch-package

diff --git a/node_modules/@nrwl/node/src/utils/normalize.js b/node_modules/@nrwl/node/src/utils/normalize.js
index f6c5f0e..f2e79ac 100644
--- a/node_modules/@nrwl/node/src/utils/normalize.js
+++ b/node_modules/@nrwl/node/src/utils/normalize.js
@@ -21,9 +21,6 @@ function normalizeAssets(assets, root, sourceRoot) {
         if (typeof asset === 'string') {
             const resolvedAssetPath = path_1.resolve(root, asset);
             const resolvedSourceRoot = path_1.resolve(root, sourceRoot);
-            if (!resolvedAssetPath.startsWith(resolvedSourceRoot)) {
-                throw new Error(`The ${resolvedAssetPath} asset path must start with the project source root: ${sourceRoot}`);
-            }
             const isDirectory = fs_1.statSync(resolvedAssetPath).isDirectory();
             const input = isDirectory
                 ? resolvedAssetPath

[matheo]

For Angular v16 + Nx v17 I needed this:

patches/@angular-devkit+build-angular+16.2.16.patch

diff --git a/node_modules/@angular-devkit/build-angular/src/utils/normalize-asset-patterns.js b/node_modules/@angular-devkit/build-angular/src/utils/normalize-asset-patterns.js
index 9aeec64..4dfc32c 100755
--- a/node_modules/@angular-devkit/build-angular/src/utils/normalize-asset-patterns.js
+++ b/node_modules/@angular-devkit/build-angular/src/utils/normalize-asset-patterns.js
@@ -53,9 +53,9 @@ function normalizeAssetPatterns(assetPatterns, workspaceRoot, projectRoot, proje
             const assetPath = path.normalize(assetPattern);
             const resolvedAssetPath = path.resolve(workspaceRoot, assetPath);
             // Check if the string asset is within sourceRoot.
-            if (!resolvedAssetPath.startsWith(resolvedSourceRoot)) {
-                throw new MissingAssetSourceRootException(assetPattern);
-            }
+            // if (!resolvedAssetPath.startsWith(resolvedSourceRoot)) {
+            //     throw new MissingAssetSourceRootException(assetPattern);
+            // }
             let glob, input;
             let isDirectory = false;
             try {
@@ -77,7 +77,7 @@ function normalizeAssetPatterns(assetPatterns, workspaceRoot, projectRoot, proje
                 input = path.dirname(assetPath);
             }
             // Output directory for both is the relative path from source root to input.
-            const output = path.relative(resolvedSourceRoot, path.resolve(workspaceRoot, input));
+            const output = path.resolve(workspaceRoot, input);
             assetPattern = { glob, input, output };
         }
         else {

[JulioC]

This limitation would make more sense if it was relative to project.root

[wootencl]

For what it's worth, you can avoid this error if you use the long form (object with input, glob, output) that can be seen here: https://nx.dev/nx-plugin/overview#including-assets

[RVledder]

Thank you so much. Just for clarity, this fixed it for me:

{
// ...
"targets": {
    "build": {
      "options": {
        "assets": [
          "apps/my-app/src/web.config", // single file
          "apps/my-app/src/assets"      // folder
        ],
  // ...
}

to:

{
// ...
"targets": {
    "build": {
      "options": {
        "assets": [
          // single file
          {
            "glob": "web.config",
            "input": "apps/my-app/src",
            "output": "./"
          }
          // folder
          {
            "glob": "**/*",
            "input": "apps/my-app/assets",
            "output": "./assets"
          }
        ],
 // ...
}

[gorgsenegger]

The link has changed:

https://nx.dev/recipes/tips-n-tricks/include-assets-in-build#including-assets-in-your-build

[openscript]

Do some executor like @nx/vite not support assets?