React Nx Tutorial - Step 6: Proxy Configuration

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

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

To see how it works, open apps/todos/project.json and find the serve target.

1{
2  "serve": {
3    "executor": "@nrwl/web:dev-server",
4    "options": {
5      "buildTarget": "todos:build",
6      "hmr": true,
7      "proxyConfig": "apps/todos/proxy.conf.json"
8    },
9    "configurations": {
10      "production": {
11        "buildTarget": "todos:build:production",
12        "hmr": false
13      }
14    }
15  }
16}

Note the proxyConfig property which points to apps/todos/proxy.conf.json. Open this file.

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

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

Project.json, Targets, Executors

You configure your apps in apps/[app-name]/project.json. Open apps/todos/project.json to see an example. This file contains configuration for the todos app. For instance, you can see the build, serve, lint, and test targets. This means that you can run npx nx build todos, npx nx serve todos, etc..

Every target uses an executor which actually runs this target. So targets are analogous to typed npm scripts, and executors are analogous to typed shell scripts.

Why not use shell scripts and npm scripts directly?

There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. npx nx serve todos --help results in:

npx nx run todos:serve [options,...]

Options:
  --buildTarget           Target which builds the application
  --port                  Port to listen on. (default: 4200)
  --host                  Host to listen on. (default: localhost)
  --ssl                   Serve using HTTPS.
  --sslKey                SSL key to use for serving HTTPS.
  --sslCert               SSL certificate to use for serving HTTPS.
  --watch                 Watches for changes and rebuilds application (default: true)
  --liveReload            Whether to reload the page on change, using live-reload. (default: true)
  --hmr                   Enable hot module replacement.
  --publicHost            Public URL where the application will be served
  --open                  Open the application in the browser.
  --allowedHosts          This option allows you to whitelist services that are allowed to access the dev server.
  --memoryLimit           Memory limit for type checking service process in MB.
  --maxWorkers            Number of workers to use for type checking.
  --help                  Show available options for project target.

It helps with good editor integration (see VSCode Support).

But, most importantly, it provides a holistic dev experience regardless of the tools used, and enables advanced build features like distributed computation caching and distributed builds.