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:

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

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~

A frontend web developer in Toronto

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store