nx/docs/angular/tutorial/06-proxy.md
Isaac Mann 281df64ba8
Docs video updates (#8254)
* docs(core): fix youtube allow=fullscreen attribute

* docs(react): add video to cra-to-nx guide

Co-authored-by: Isaac Mann <isaacplmann+git@gmail.com>
2021-12-21 09:55:27 -05:00

1.2 KiB

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 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 nx serve to forward all requests starting with /api to the process listening on port 3333.

What's Next