Angular Nx Tutorial - Step 6: Proxy

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 apps/todos/project.json and find the serve target of the todos app.

1{
2  "serve": {
3    "executor": "@angular-devkit/build-angular:dev-server",
4    "configurations": {
5      "production": {
6        "browserTarget": "todos:build:production"
7      },
8      "development": {
9        "browserTarget": "todos:build:development"
10      }
11    },
12    "defaultConfiguration": "development",
13    "options": {
14      "proxyConfig": "apps/todos/proxy.conf.json"
15    }
16  }
17}
18

Note the proxyConfig property.

Now open apps/todos/proxy.conf.json:

1{
2  "/api": {
3    "target": "http://localhost:3333",
4    "secure": false
5  }
6}
7

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

What's Next