Nx shared asset library - reactjs

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

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" />

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" />