[Nx] Note for learning Nx

Proxy configuration:

When we have already fews applications running in the workspace, and we want to add 'api' layer for one applicatrion only, we can use tag

ng g @nrwl/nest:app api --frontendProject=todos

This will only allow 'todos' app to access 'api'.

 

You passed --frontendProject=todos when creating the node application. What did that argument do?

It created a proxy configuration that allows the Angular application to talk to the API in development.

To see how it works, open angular.json and find the serve target of the todos app.

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

Note the proxyConfig property.

Now open proxy.conf.json:

{
  "/api": {
    "target": "http://localhost:3333",
    "secure": false
  }
}

This configuration tells ng serve to forward all requests starting with /api to the process listening on port 3333.

 

Expose the common compoennts from library:

Sometimes, when we create library, we might forget to expose the component, this might lead to few minutes debuggin. To avoid that we can use --export tag

ng g component todos --project=ui --export

 

Running the tests:

Run npm run affected:apps, and you should see todos printed out. The affected:apps looks at what you have changed and uses the dependency graph to figure out which apps can be affected by this change.

Run npm run affected:libs, and you should see ui printed out. This command works similarly, but instead of printing the affected apps, it prints the affected libs.

 

Running the tests which failed previously:

npm run affected:test -- --only-failed

 

Running tests in parallel to speed up:

Some changes affect many projects in the repository. To speed up the testing of this change, pass --parallel.

npm run affected:test -- --parallel

 

About create NPM module in workspace:

check the source: https://nx.dev/fundamentals/develop-like-google

By default, libraries are only buildable in the context of an application.

 

To be able to build a library independently, you can pass --publishable when creating it. You can then run ng build mylib to build it, and then publish the results to an NPM registry.