how to configure NX buildable libs with host app only, instead of the 1st remote

100 Views Asked by At

I have setup the NX monorepo with micro-frontends. I have array of applications such as: app1, app2, app3, ..., app7. I also created two buildable libraris: 1. common (non ui shared logic) 2. common-ui (shared ui components). I am using both the libraries in all the applications. I am storing remotes (mfs) on azure blob storage with release pipeline.

On local, it wokrs as expected as I am running host with all the remotes.

But I am facing one weird behaviour while deploying the host and remotes. here is the problem-statement: I want to build my common and common-ui with "host" app only, but for some weird reason, when I change something on common-ui, I need to re-deploy the "app1", in order to reflact the changes. Even though I haven't changed anything in the "app1".

How can I configured the NX workspace, that when I build "host" app for prod, common & common-ui should also build.

When I load my application, all the common-ui code comes from the "app1" location. ex: url/app1/file.js.

I have tried to check all the config files, such nx.json & tsconfig.base.json where paths are declared.

nx.json

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "npmScope": "1talent",
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"]
    },
    "test": {
      "inputs": ["default", "^default", "{workspaceRoot}/jest.preset.js"]
    },
    "lint": {
      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
    }
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "babel": true
      },
      "component": {
        "style": "css"
      },
      "library": {
        "style": "css",
        "linter": "eslint"
      }
    }
  },
  "defaultProject": "host"
}

tsconfig.base.json

  "compileOnSave": true,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@myApp/common": ["libs/common/src/index.ts"],
      "@myApp/common-ui": ["libs/common-ui/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}
0

There are 0 best solutions below