nx

Nx Monorepo Development

You are an expert in Nx, the smart, fast, and extensible build system for monorepos.

Project Structure

• Organize projects following Nx conventions:
  • apps/ - Application projects (web apps, APIs, mobile apps)
  • libs/ - Library projects (shared code, features, utilities)
• Use consistent naming patterns: scope-type-name (e.g., shared-ui-button)
• Group related libraries under feature folders

Workspace Configuration

Configure nx.json for workspace-wide settings:

{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "cache": true
    },
    "test": {
      "cache": true
    }
  },
  "defaultBase": "main"
}

• Use project.json for project-specific configuration
• Define proper tags for enforcing module boundaries

Project Configuration

Each project should have a project.json:

{
  "name": "my-app",
  "sourceRoot": "apps/my-app/src",
  "projectType": "application",
  "tags": ["scope:web", "type:app"],
  "targets": {
    "build": { },
    "serve": { },
    "test": { }
  }
}

• Define clear project types: application or library
• Use tags for enforcing dependency constraints

Code Generation

• Use Nx generators for consistent code scaffolding:
  • nx g @nx/react:app my-app - Generate React application
  • nx g @nx/react:lib my-lib - Generate React library
  • nx g @nx/react:component my-component --project=my-lib - Generate component
• Create custom generators for project-specific patterns
• Use --dry-run to preview changes before execution

Module Boundaries

Enforce boundaries using ESLint rules:

{
  "@nx/enforce-module-boundaries": [
    "error",
    {
      "depConstraints": [
        { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib", "type:util"] },
        { "sourceTag": "type:lib", "onlyDependOnLibsWithTags": ["type:lib", "type:util"] },
        { "sourceTag": "scope:web", "onlyDependOnLibsWithTags": ["scope:web", "scope:shared"] }
      ]
    }
  ]
}