Getting started
Tutorial total points: 0 / 92

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.

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.


Now run both "ng serve todos" and "ng serve api", open localhost:4200. What do you see?

  • 404 in the console

  • Todos application working!

  • Todos are displayed but the Add Todo button doesn't work