My Nx Project Boilerplate

Nx is a set of dev tools for monorepos. It provides a lot of things out of the box, such as ESLint and Jest integration.

However, there are still additional setups I usually add to my Nx project. Here are still things I would like to do as boilerplate:

• Add ESLint rules to order imports and audit accessibility
• Change lint commands to include all libraries and applications
• Change test commands to include all libraries and applications
• Add pre-commit hooks

Nx Project Boilerplate

My Nx GitHub repo: https://github.com/xiongemi/white-label-airline

ESLint Rules

For Nx, it already installed a few ESLint plugins and provides a lot of ESLint rules. However, I still prefer to add ESLint rules to sort imports and audit accessibility. You could check my other blog post about how to do it:

Add ESLint Rules to Sort Imports And Audit Accessibility

Lint Commands

For the lint command nx lint, it only lints one application or library at a time. The default lint command in package.json only lints the defaultProject specified in workspace.json.

However, if I want to lint all applications and libraries, in package.json, I change the lint command to:

"lint": "nx run-many --all --target=lint --parallel",

Also, I want to include the command to automatically fix the lint errors with --fix option:

# npm
"lint:fix": "npm run lint -- --fix",
# yarn
"lint:fix": "yarn lint --fix",

Nevertheless, there is a command affected:lint to lint affected applications or libraries. I want to add this lint command to the pre-commit hook, but I only want to lint the uncommitted files, so I change it to:

"lint:affected": "nx affected:lint --parallel --uncommitted --only-failed",

Test Commands

Similar to lint commands, the default test command nx test could only test the default application. If I want to test all applications and libraries, in package.json, I change the test command to:

# npm
"test": "nx run-many --all --target=test --parallel",
"test:watch": "npm run test -- --no-cache --watch",
"test:clear": "npm run test -- --clearCache",

# yarn
"test": "nx run-many --all --target=test --parallel",
"test:watch": "yarn test --no-cache --watch",
"test:clear": "yarn test --clearCache",

• test: run unit tests across all applications and libraries
• test:watch: while doing development, watch for the files changes and test those files without caching
• test:clear: in some cases, I need to clear the cached tests before I re-run the unit tests

Collect Test Coverage

After changing the test commands, I want to collect test coverage across different apps. In jest.config.js , I added the below lines to collect the coverage and generate reports:

collectCoverage: true,
coverageReporters: ['text', 'html'],

To reflect a more accurate coverage number (for example, not include specific files such as barrel files, models, interface or enum files, mock files), I specified collectCoverageFrom in jest.config.js:

collectCoverageFrom: [
  '**/*.{ts,tsx}',
  '!**/node_modules/**',
  '!**/index.ts',
  '!**/models/**',
  '!**/*.interface.ts',
  '!**/*.enum.ts',
  '!**/*.mock.ts',
],

To enforce the unit test coverage to pass a certain threshold, I could add coverageThreshold such as:

coverageThreshold: {
  global: {
    branches: 10,
    functions: 10,
    lines: 10,
    statements: 10,
  },
},

Add Pre-commit Hooks

Now with all the lint and test commands change, I want to ensure these commands are run before every git commit and git push. To achieve that, I need to add these commands to pre-commit hooks.

First, we need to install husky:

# npm
npm install husky --save-dev
# yarn
yarn add husky --dev

Then in package.json, we could add our hooks now. Below is an example of the pre-commit and pre-push hooks I added:

# npm
"husky": {
  "hooks": {
    "pre-commit": "npm run affected:lint",
    "pre-push": "npm run lint && npm run test"
  }
}

# yarn
"husky": {
  "hooks": {
    "pre-commit": "yarn affected:lint",
    "pre-push": "yarn lint && yarn test"
  }
}

Now I have finished my setup for my Nx project. I found it helpful to lint and test everything in the repo using one command. By running everything would also provide better gatekeeping to the repo.

Happy coding~