Skip to content

Migrate guide for Nx 19 to 20

Nathan Walker edited this page Oct 22, 2024 · 1 revision

When updating to @nativescript/nx 20 and above (for usage with Nx 20+), you can follow this migration guide.

For each NativeScript app in your workspace, you can update your project.json as follows:

BEFORE

{
  "name": "nativescript-app",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/nativescript-app/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nativescript/nx:build",
      "options": {
        "noHmr": true,
        "production": true,
        "uglify": true,
        "release": true,
        "forDevice": true
      },
      "configurations": {
        "main": {
          "fileReplacements": [
            {
              "replace": "./src/environments/environment.ts",
              "with": "./src/environments/environment.prod.ts"
            }
          ]
        }
      }
    },
    "ios": {
      "executor": "@nativescript/nx:build",
      "options": {
        "platform": "ios"
      },
      "configurations": {
        "build": {
          "copyTo": "./dist/build.ipa"
        },
        "prod": {
          "combineWithConfig": "build:prod"
        }
      }
    },
    "android": {
      "executor": "@nativescript/nx:build",
      "options": {
        "platform": "android"
      },
      "configurations": {
        "build": {
          "copyTo": "./dist/build.apk"
        },
        "prod": {
          "combineWithConfig": "build:prod"
        }
      }
    },
    "clean": {
      "executor": "@nativescript/nx:build",
      "options": {
        "clean": true
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint",
      "options": {
        "lintFilePatterns": ["apps/nativescript-app/**/*.ts", "apps/nativescript-app/src/**/*.html"]
      }
    },
    "test": {
      "executor": "@nativescript/nx:test",
      "outputs": [
        "coverage/apps/nativescript-app"
      ],
      "options": {
        "coverage": true
      },
      "configurations": {}
    }
  }
}

AFTER

{
  "name": "nativescript-app",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/nativescript-app/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nativescript/nx:build",
      "options": {
        "noHmr": true,
        "production": true,
        "uglify": true,
        "release": true,
        "forDevice": true
      },
      "configurations": {
        "prod": {
          "fileReplacements": [
            {
              "replace": "./src/environments/environment.ts",
              "with": "./src/environments/environment.prod.ts"
            }
          ]
        }
      }
    },
    "debug": {
      "executor": "@nativescript/nx:debug",
      "options": {
        "noHmr": true,
        "uglify": false,
        "release": false,
        "forDevice": false,
        "prepare": false
      },
      "configurations": {
        "prod": {
          "fileReplacements": [
            {
              "replace": "./src/environments/environment.ts",
              "with": "./src/environments/environment.prod.ts"
            }
          ]
        }
      }
    },
    "prepare": {
      "executor": "@nativescript/nx:prepare",
      "options": {
        "noHmr": true,
        "production": true,
        "uglify": true,
        "release": true,
        "forDevice": true,
        "prepare": true
      },
      "configurations": {
        "prod": {
          "fileReplacements": [
            {
              "replace": "./src/environments/environment.ts",
              "with": "./src/environments/environment.prod.ts"
            }
          ]
        }
      }
    },
    "clean": {
      "executor": "@nativescript/nx:clean",
      "options": {}
    },
    "lint": {
      "executor": "@nx/eslint:lint",
      "options": {
        "lintFilePatterns": ["apps/nativescript-app/**/*.ts", "apps/nativescript-app/src/**/*.html"]
      }
    },
    "test": {
      "executor": "@nativescript/nx:test",
      "outputs": [
        "coverage/apps/nativescript-app"
      ],
      "options": {
        "coverage": true
      },
      "configurations": {}
    }
  }
}

The commands are now standard invocations following Nx practices. Here's a few examples:

// DEBUGGING
nx debug nativescript-app ios -c=prod
// or:
nx debug nativescript-app ios --configuration=prod

nx debug nativescript-app android -c=prod

// BUILDING
nx build nativescript-app ios -c=prod

nx build nativescript-app android -c=prod

// PREPARE
nx prepare nativescript-app ios -c=prod

nx prepare nativescript-app android -c=prod

// TESTING
nx test nativescript-app ios -c=prod

nx test nativescript-app android -c=prod

// CLEAN
nx clean nativescript-app
Clone this wiki locally