Nx Cheat Sheet

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"

{
  "$schema": "../node_modules/nx/schemas/project-schema.json",
  "name": "web-app",
  "$schema": 

# 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

# 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

# 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"

// .eslintrc.json
{
  "rules": {
    "@nx/enforce-module-boundaries": [
      "error",
      {
        "enforceBuildableLibDependency": true,
        "allow": [],
        "depConstraints": [

# 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

{
  "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"

// 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

// libs/my-plugin/src/generators/my-generator/generator.ts
import {
  Tree,
  formatFiles,
  generateFiles,
  joinPathFragments,
  names,
} from '@nx/devkit';
 
export interface MyGeneratorSchema {
  name

// 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

# 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