Nx Cheat Sheet

# Bikin workspace baru (interactive)
npx create-nx-workspace@latest my-org
 
# Dengan preset spesifik
npx create-nx-workspace@latest my-org --preset=apps
 
# Preset yang tersedia:
#   apps        - Empty workspace dengan packages folder
#   ts          - Empty TypeScript workspace
#   react       - React app dengan Vite
#   next        - Next.js app
#   node        - Node app dengan Express/Fastify
#   npm         - Publishable library
#   react-native - React Native app

my-org/
  apps/           # Aplikasi yang bisa deploy
    web-app/
    api-server/
  libs/           # Shared libraries
    shared-utils/
    ui-components/
  nx.json         # Konfigurasi global Nx
  package.json
  tsconfig.base.json

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "defaultBase": "main",
  "nxCloudAccessToken": "",
  "cache": {
    "enabled": true,
    "path": ".nx/cache",
    "environmentActivation": {
      "preset": "nx"
    }
  },
  "namedInputs": {
    "default": [
      "{projectRoot}/**/*",
      "sharedGlobals"
    ],
    "sharedGlobals": [
      "{workspaceRoot}/tsconfig.base.json",
      "{workspaceRoot}/package.json"
    ],
    "production": [
      "default",
      "!{projectRoot}/**/*.spec.ts",
      "!{projectRoot}/.eslintrc.json"
    ]
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"],
      "cache": true
    },
    "test": {
      "inputs": ["default", "^production"],
      "cache": true
    },
    "lint": {
      "inputs": [
        "default",
        "{workspaceRoot}/.eslintrc.json"
      ],
      "cache": true
    }
  },
  "plugins": [
    {
      "plugin": "@nx/webpack/plugin",
      "options": {
        "buildTargetName": "build",
        "serveTargetName": "serve"
      }
    }
  ]
}

{
  "$schema": "../node_modules/nx/schemas/project-schema.json",
  "name": "web-app",
  "$schema": "../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "sourceRoot": "apps/web-app/src",
  "tags": ["scope:frontend", "type:app"],
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/web-app",
        "main": "apps/web-app/src/main.ts",
        "tsConfig": "apps/web-app/tsconfig.app.json",
        "assets": [
          "apps/web-app/src/favicon.ico",
          "apps/web-app/src/assets"
        ]
      },
      "configurations": {
        "production": {
          "optimization": true,
          "extractLicenses": true,
          "sourceMap": false
        },
        "development": {
          "extractLicenses": false,
          "sourceMap": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "executor": "@nx/webpack:webpack",
      "options": {
        "buildTarget": "web-app:build",
        "devServer": {
          "port": 4200
        }
      }
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/web-app/jest.config.ts"
      }
    }
  }
}

# Run target untuk project spesifik
nx build web-app
nx serve web-app
nx test web-app
nx lint web-app
 
# Run target untuk semua projects
nx run-many --target=build
nx run-many --target=test --parallel=5
 
# Dengan filter
nx run-many --target=build --projects=web-app,api-server
 
# Run langsung tanpa prefix
nx serve web-app --port=3000
nx build web-app --configuration=development
 
# Lihat dependency graph
nx graph
 
# Lihat project details
nx show project web-app
 
# Reset cache dan daemon
nx reset

# Generate app
nx g @nx/node:app api-server
nx g @nx/react:app dashboard
nx g @nx/next:app marketing-site
 
# Generate library
nx g @nx/js:lib shared-utils
nx g @nx/react:lib ui-components --directory=libs/ui
 
# Generate library yang publishable ke npm
nx g @nx/js:lib my-lib --publishable --importPath=@my-org/my-lib
 
# Move atau remove project
nx g @nx/workspace:move --projectName=old-name --destination=libs/new-name
nx g @nx/workspace:remove --projectName=old-name
 
# Convert project jadi buildable library
nx g @nx/js:setup-buildable --project=shared-utils

# React component
nx g @nx/react:component button --project=ui-components
 
# Node service
nx g @nx/node:lib auth-service --directory=libs/services
 
# TypeScript interface generator
nx g @nx/workspace:tsdoc
 
# Setup Storybook untuk library
nx g @nx/react:storybook-configuration ui-components

// apps/web-app/project.json
{
  "tags": ["scope:frontend", "type:app"]
}
 
// libs/api-types/project.json
{
  "tags": ["scope:shared", "type:types"]
}
 
// libs/api-server/project.json
{
  "tags": ["scope:backend", "type:service"]
}

// .eslintrc.json
{
  "rules": {
    "@nx/enforce-module-boundaries": [
      "error",
      {
        "enforceBuildableLibDependency": true,
        "allow": [],
        "depConstraints": [
          {
            "sourceTag": "scope:frontend",
            "onlyDependOnLibsWithTags": ["scope:frontend", "scope:shared"]
          },
          {
            "sourceTag": "scope:backend",
            "onlyDependOnLibsWithTags": ["scope:backend", "scope:shared"]
          },
          {
            "sourceTag": "type:app",
            "onlyDependOnLibsWithTags": [
              "type:feature",
              "type:ui",
              "type:util",
              "type:data"
            ]
          }
        ]
      }
    ]
  }
}

# Force skip cache
nx build web-app --skip-nx-cache
 
# Disable cache via env
NX_DAEMON=false nx build web-app
 
# Cache directory default: .nx/cache atau node_modules/.cache/nx

# Affected by changes vs main branch
nx affected --target=build
nx affected --target=test
nx affected --target=lint
 
# Print projects yang affected (dry run)
nx affected --target=build --print-affected
 
# Basis branch spesifik
nx affected --target=build --base=main --head=HEAD
 
# Basis tag atau commit
nx affected --target=build --base=v1.0.0
nx affected --target=test --base=origin/main
 
# Affected di CI (lebih akurat)
nx affected --target=build --base=$NX_BASE --head=$NX_HEAD
 
# Run affected dengan parallel
nx affected --target=test --parallel=3

{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    },
    "test": {
      "dependsOn": ["build"]
    }
  }
}

// libs/my-plugin/src/executors/hello.executor.json
{
  "$schema": "https://json-schema.org/schema",
  "version": 2,
  "title": "Hello Executor",
  "description": "Prints hello message",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Name to greet"
    }
  },
  "required": ["name"]
}

// libs/my-plugin/src/executors/hello/hello.impl.ts
import { ExecutorContext } from '@nx/devkit';
 
export interface HelloExecutorSchema {
  name: string;
}
 
export default async function runExecutor(
  options: HelloExecutorSchema,
  context: ExecutorContext
) {
  console.log(`Hello, ${options.name}!`);
  console.log(`Project: ${context.projectName}`);
 
  return {
    success: true,
  };
}

// libs/my-plugin/src/generators/my-generator/generator.ts
import {
  Tree,
  formatFiles,
  generateFiles,
  joinPathFragments,
  names,
} from '@nx/devkit';
 
export interface MyGeneratorSchema {
  name: string;
}
 
export default async function (tree: Tree, options: MyGeneratorSchema) {
  const { name, className, fileName } = names(options.name);
  const projectRoot = `libs/${fileName}`;
 
  generateFiles(
    tree,
    joinPathFragments(__dirname, 'files'),
    projectRoot,
    {
      name,
      className,
      fileName,
      tmpl: '', // hapus suffix .tmpl dari template files
    }
  );
 
  await formatFiles(tree);
}

// Jalankan generator
// nx g @my-org/my-plugin:my-generator --name=my-feature

# Disable daemon untuk command tertentu
NX_DAEMON=false nx build web-app
 
# Stop daemon
nx daemon --stop
 
# Lihat daemon status
nx daemon

// tsconfig.base.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@my-org/shared-utils": ["libs/shared-utils/src/index.ts"],
      "@my-org/ui-components": ["libs/ui-components/src/index.ts"],
      "@my-org/api-types": ["libs/api-types/src/index.ts"]
    }
  }
}

// apps/web-app/src/main.ts
import { formatDate } from '@my-org/shared-utils';
import { Button } from '@my-org/ui-components';

# Connect workspace ke Nx Cloud
nx connect
 
# Atau via CLI saat create workspace
npx create-nx-workspace@latest my-org --nx-cloud
 
# Distributed Task Execution (DTE) di CI
npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js"
nx affected --target=build
nx affected --target=test
npx nx-cloud finish-ci-run

# Migrate ke versi Nx terbaru
nx migrate latest
 
# Apply migrations
nx migrate --run-migrations=migrations.json
 
# Fix configuration issues
nx repair

// apps/web-app/package.json
{
  "name": "web-app",
  "scripts": {
    "build": "vite build",
    "dev": "vite"
  },
  "nx": {
    "tags": ["scope:frontend", "type:app"]
  }
}

# Buka graph di browser
nx graph
 
# Focus ke project tertentu
nx graph --focus=web-app
 
# Filter berdasarkan target
nx graph --targets=build
 
# Export sebagai file
nx graph --file=graph.json
nx graph --file=graph.html