reactjsnx-monorepo

project.json generating empty targets when creating NX workspace


I am creating a new application inside a workspace. Basically I have just execute npx create-nx-workspace which created a default application under apps folder. However, I am getting an empty body for targets in project.json, so if I want to change the port for the application I do not have any place to change it.

project.json:

{
  "name": "catalog",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/catalog/src",
  "projectType": "application",
  "targets": {},
  "tags": []
}

Nx version:

Nx Version:
- Local: v18.0.4
- Global: v18.0.4

Wondering if I should use another version?

I am looking for this config previously included in project.json:

"serve": {
      "executor": "@nrwl/web:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "catalog:build",
        "hmr": true,
        "port": 4200
      },
      "configurations": {
        "development": {
          "buildTarget": "catalog:build:development",
        },
        "production": {
          "buildTarget": "catalog:build:production",
          "hmr": false
        }
      }
    },

I had to go back to version 14: pnpx create-nx-workspace@14

In version 14, you have a proper project.json where you can include the port number for each app as included above.

Thanks


Solution

  • This is due to changes in NX 18, called project Crystal. You can find more details about this in this video from NX https://www.youtube.com/watch?v=wADNsVItnsM&t=8s.

    In general for each plugin they have moved some default/infered possible target configurations into root level inside nx.json.

    Here the example from nx.json, here for the vite plugin they infer that those are the possible targets and they also have some default configurations for those targets:

    ...
    "plugins": [
        {
          "plugin": "@nx/vite/plugin",
          "options": {
            "buildTargetName": "build",
            "previewTargetName": "preview",
            "testTargetName": "test",
            "serveTargetName": "serve",
            "serveStaticTargetName": "serve-static"
          }
        },
        ...