Code PushUp integration guide for Nx monorepos

This is a guide for how to integrate Code PushUp CLI and ESLint plugin in an Nx monorepo, and how to automatically upload reports to portal's staging environment.

Warning

Only Nx 17 is supported. If your repo uses an older version, you'll need to update first - run npx nx migrate latest --interactive (confirm latest versions of TypeScript and Angular), followed by npx nx migrate --run-migrations (more info in Nx docs).

ESLint config

Example for Nx monorepo using Angular, Jest and Cypress:

1. Install peer dependencies as required (for more info, see setup docs):

   npm i -D eslint-plugin-{deprecation,functional@latest,import,no-secrets,promise,rxjs,sonarjs,unicorn@48}

2. Install Code PushUp's ESLint config package:

   npm i -D @code-pushup/eslint-config

3. In .eslintrc.json, extend configs:

   {
     "root": true,
     "ignorePatterns": ["**/*"],
     "plugins": ["@nx"],
     "overrides": [
       {
         "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
         "rules": {
           "@nx/enforce-module-boundaries": [
             "error",
             {
               "enforceBuildableLibDependency": true,
               "allow": [],
               "depConstraints": [
                 {
                   "sourceTag": "*",
                   "onlyDependOnLibsWithTags": ["*"]
                 }
               ]
             }
           ]
         }
       },
       {
         "files": ["*.ts", "*.tsx"],
         "extends": [
           "plugin:@nx/typescript",
           // extend configs for TS files
           "@code-pushup/eslint-config/angular",
           "@code-pushup/eslint-config/jest",
           "@code-pushup/eslint-config/cypress"
         ],
         "settings": {
           // configure TS path aliases
           "import/resolver": {
             "typescript": {
               "project": "tsconfig.base.json"
             }
           }
         },
         "rules": {
           // ... customize as needed ...
           "@angular-eslint/component-selector": [
             "warn",
             {
               "type": "element",
               "style": "kebab-case",
               "prefix": ["cp"] // <-- replace with your own prefix
             }
           ],
           "@angular-eslint/directive-selector": [
             "warn",
             {
               "type": "attribute",
               "style": "camelCase",
               "prefix": "cp" // <-- replace with your own prefix
             }
           ],
           "@angular-eslint/pipe-prefix": [
             "warn",
             {
               "prefixes": ["cp"] // <-- replace with your own prefix
             }
           ]
         }
       },
       {
         "files": ["*.js", "*.jsx"],
         "extends": ["plugin:@nx/javascript", "@code-pushup"], // add default config for JS files
         "rules": {}
       }
     ]
   }