How Does Nx Determine Build Tools and Targets for Different Apps in a Monorepo?

[Touseef-ahmad]

When I run nx serve web, it starts the web app using Vite. Similarly, when I run nx start mobile, it starts the mobile app using Expo. However, I don’t understand how Nx knows which build tool to use for each app.

For example:

• How does Nx determine that the web app should use Vite while the mobile app should use Expo?
• If I were to add another React app that doesn’t use Vite, how would Nx differentiate between them and choose the correct tool?

Here are the relevant files:

Here’s my nx.json file located at the root of my project:

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/src/test-setup.[jt]s",
      "!{projectRoot}/.eslintrc.json",
      "!{projectRoot}/eslint.config.cjs",
      "!{projectRoot}/jest.config.[jt]s",
      "!{projectRoot}/test-setup.[jt]s"
    ],
    "sharedGlobals": []
  },
  "nxCloudId": "676e44c8df2f9b1dfedd5523",
  "plugins": [
    {
      "plugin": "@nx/vite/plugin",
      "options": {
        "buildTargetName": "build",
        "testTargetName": "test",
        "serveTargetName": "serve",
        "previewTargetName": "preview",
        "serveStaticTargetName": "serve-static",
        "typecheckTargetName": "typecheck"
      }
    },
    {
      "plugin": "@nx/eslint/plugin",
      "options": {
        "targetName": "lint"
      }
    },
    {
      "plugin": "@nx/jest/plugin",
      "options": {
        "targetName": "test"
      }
    },
    {
      "plugin": "@nx/expo/plugin",
      "options": {
        "startTargetName": "start",
        "buildTargetName": "build",
        "prebuildTargetName": "prebuild",
        "serveTargetName": "serve",
        "installTargetName": "install",
        "exportTargetName": "export",
        "submitTargetName": "submit",
        "runIosTargetName": "run-ios",
        "runAndroidTargetName": "run-android"
      }
    }
  ],
  "generators": {
    "@nx/react": {
      "application": {
        "babel": true,
        "style": "@emotion/styled",
        "linter": "eslint",
        "bundler": "vite"
      },
      "component": {
        "style": "@emotion/styled"
      },
      "library": {
        "style": "@emotion/styled",
        "linter": "eslint"
      }
    }
  }
}

project.json for apps/mobile

{
  "name": "mobile",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/mobile/src",
  "projectType": "application",
  "tags": [],
  "// targets": "to see all targets run: nx show project mobile --web",
  "targets": {}
}

project.json for apps/web

{
  "name": "web",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/web/src",
  "projectType": "application",
  "tags": [],
  "// targets": "to see all targets run: nx show project web --web",
  "targets": {}
}