Nx shared asset library

Question

I want my React app in my Nx monorepo to retrieve all the assets in my asset library called common-assets.

I managed to do it with my NextJS app like so :

project.json of my NextJS app

{
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/clients",
  "projectType": "application",
  "implicitDependencies": ["common-assets"],
  "targets": {
    "build": {
      "executor": "@nrwl/next:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "root": "apps/clients",
        "outputPath": "dist/apps/clients",
        "assets": [
          {
            "input": "libs/common/assets/src/lib",
            "glob": "**/*",
            "output": "assets"
          }
        ]
      },
...
}

I tried to do the exact same thing for my react App by modifying the asset key in the project.json

project.json of my React app :

  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/sellers/src",
  "projectType": "application",
  "implicitDependencies": ["common-assets"],
  "targets": {
    "build": {
      "executor": "@nrwl/web:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",
        "outputPath": "dist/apps/sellers",
        "index": "apps/sellers/src/index.html",
        "baseHref": "/",
        "main": "apps/sellers/src/main.tsx",
        "polyfills": "apps/sellers/src/polyfills.ts",
        "tsConfig": "apps/sellers/tsconfig.app.json",
        "assets": [
          "apps/sellers/src/favicon.ico",
          "apps/sellers/src/assets",
          {
            "input": "libs/common/assets/src/lib",
            "glob": "**/*",
            "output": "src/assets"
          }
        ],
        "styles": ["apps/sellers/src/styles.scss"],
        "scripts": [],
        "webpackConfig": "@nrwl/react/plugins/webpack"
      },
      "configurations": {
        "development": {
          "extractLicenses": false,
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true
        },
        "production": {
          "fileReplacements": [
            {
              "replace": "apps/sellers/src/environments/environment.ts",
              "with": "apps/sellers/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false
        }
      }
    },
    "serve": {
      "executor": "@nrwl/web:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "sellers:build",
        "hmr": true
      },
      "configurations": {
        "development": {
          "buildTarget": "sellers:build:development"
        },
        "production": {
          "buildTarget": "sellers:build:production",
          "hmr": false
        }
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/sellers/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "test": {
      "executor": "@nrwl/jest:jest",
      "outputs": ["coverage/apps/sellers"],
      "options": {
        "jestConfig": "apps/sellers/jest.config.ts",
        "passWithNoTests": true
      }
    }
  },
  "tags": []
}

But it's not working...

Answer 1

How to create an icon component library in NX Monorepo :

(cause this was the true problem I had)

To create my icon library, I finally created a nx library names icons containing my svg icons :
libs->assets->icons

Library organisation :

• assets folder : contains all my .svg icon files (some are nested in folders to group my icons by family)
• lib folder : contains my icons svgr components (with the same folder structure)

How it works

I am using the @svgr/cli library which, using a command line, can convert .svgfiles into jsx/tsx components

I have created a script in my project.json

"targets": {
    "svgr": {
      "executor": "nx:run-commands",
      "options": {
        "commands": [
          "svgr --typescript -d libs/assets/icons/src/lib libs/assets/icons/src/assets"
        ]
      }
    }
  },

So svgr takes all the svg files of the assets folder (2nd path in the command) and convert them into tsx components in the lib folder

Usage

then I created a path in my tsconfig.base.json at the root of my workspace :

"@my-app/icons": ["libs/assets/icons/src/lib/index.ts"],

so I can import my icons like so in my different apps/libs like so :

import { ChevronDown } from '@my-app/icons/layout';

Hope that can help ;)

Answer 2

Do this:

{
   "input": "./libs/common-assets/src/lib/images",
   "glob": "**/*",
   "output": "/assets/"
}

Then access it with:

<img alt="logo" src="assets/logo.png" />

Answer 3

I kept assets into image folder and

"assets": [
      "apps/boost/src/favicon.ico",
      "apps/boost/src/assets",
      {
        "input": "libs/common-assets/assets/src/lib/images",
        "glob": "**/*",
        "output": "assets"
      }
    ],

I'm able to use it into other project as well

 <img alt="logo" src="/assets/logo.png" />