Nx Usage Tips

Nx Usage Tips

Nx is a tool to manage monorepo projects. Here are some tips when using it.

Clear Cache

Nx cache can be cleared by removing files in the directory node_modules/.cache/nx.

Sometimes, you have to clear cache. For example, if you moved a component to another library, the component was still kept in the cache of the old library. This may break builds.

Share Dependencies Graph

Use the command below to generate dependencies graph as static html files in the dep-graph directory, then zip these files and send .

nx dep-graph --file=dep-graph/output.html

Setup Angular Proxy

To setup proxy for Angular apps, you need to have the proxy config file ready and copied to the app's directory. Go to workspace.json and find the serve target of the app, e.g. projects.myapp.architect.serve, then add the proxyConfig to the options.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "myapp:build",
    "proxyConfig": "apps/myapp/proxy.conf.js"
  },
  "configurations": {
    "production": {
      "browserTarget": "myapp:build:production"
    }
  }
}

Format All Code

You can format all code using the command nx format --all.

© 2023 VividCode