React Monorepo Tutorial - 3: Task-Running

Common tasks include:

  • Building an application
  • Serving a local web server with the built project
  • Running your unit tests
  • Linting your code
  • Running e2e tests

When you ran your generators in Part 1, you already set up these common tasks for each project.

Defining Targets

Here's the project.json file for your common-ui project:

libs/common-ui/project.json
1{ 2 "name": "common-ui", 3 "$schema": "../../node_modules/nx/schemas/project-schema.json", 4 "sourceRoot": "libs/common-ui/src", 5 "projectType": "library", 6 "tags": [], 7 "targets": { 8 "lint": { 9 "executor": "@nx/linter:eslint", 10 "outputs": ["{options.outputFile}"], 11 "options": { 12 "lintFilePatterns": ["libs/common-ui/**/*.{ts,tsx,js,jsx}"] 13 } 14 }, 15 "test": { 16 "executor": "@nx/jest:jest", 17 "outputs": ["{workspaceRoot}/coverage/libs/common-ui"], 18 "options": { 19 "jestConfig": "libs/common-ui/jest.config.ts", 20 "passWithNoTests": true 21 } 22 } 23 } 24} 25
Nx 15 and lower use @nrwl/ instead of @nx/

You can see that two targets are defined here: test and lint.

The properties inside each of these these targets is defined as follows:

  • executor - which Nx executor to run. The syntax here is: <plugin name>:<executor name>
  • outputs - this is an array of files that would be created by running this target. (This informs Nx on what to save for it's caching mechanisms you'll learn about in 4 - Workspace Optimizations).
  • options - this is an object defining which executor options to use for the given target. Every Nx executor allows for options as a way to parameterize it's functionality.

Running Tasks

Syntax for Running Tasks in Nx

Run the test target for your common-ui project:

~/myorg❯

npx nx test common-ui

1 2> nx run common-ui:test 3 4 PASS common-ui libs/common-ui/src/lib/common-ui.spec.tsx 5 PASS common-ui libs/common-ui/src/lib/banner/banner.spec.tsx 6 7Test Suites: 2 passed, 2 total 8Tests: 2 passed, 2 total 9Snapshots: 0 total 10Time: 0.84 s, estimated 1 s 11Ran all test suites. 12 13 ——————————————————————————————————————————————————————————————————————————————————————————————————— 14 15 > NX Successfully ran target test for project common-ui (2s) 16

Next, run a lint check on your common-ui project:

~/myorg❯

npx nx lint common-ui

1 2> nx run common-ui:lint 3 4 5Linting "common-ui"... 6 7All files pass linting. 8 9 10——————————————————————————————————————————————————————————————————————————————————————————————————— 11 12 > NX Successfully ran target lint for project common-ui (2s) 13

What's Next