Defining a Task Pipeline

Running a specific task like build in a monorepo usually involves running multiple commands.

If you want to learn more about the concept of a task pipeline and its importance in a monorepo, have a look at the What is a Task Pipeline page.

Define Dependencies Between Tasks

You can define dependencies among tasks by using the dependsOn property:

1// nx.json 2{ 3 ... 4 "targetDefaults": { 5 "build": { 6 "dependsOn": ["^build"] 7 } 8 } 9} 10

Per Project vs Global

Task dependencies can be defined globally for all projects in nx.json file:

1{ 2 ... 3 "targetDefaults": { 4 "build": { 5 "dependsOn": ["^build"] 6 } 7 } 8} 9

Or they can be defined per-project in the project.json or package.json files. If for example you have a prebuild step for a given project, you can define that relationship as follows:

1{ 2 "name": "myapp", 3 "dependencies": {}, 4 "devDependencies": {}, 5 ... 6 "nx": { 7 "targets": { 8 "build": { 9 "dependsOn": [ 10 "prebuild" 11 ] 12 } 13 } 14 } 15} 16

Visualize task dependencies

You can also visualize the actual task graph (alongside the projects) using Nx graph. This can be useful for debugging purposes.

To view the task graph in your browser, run:

npx nx graph

And then select "Tasks" from the top-left dropdown, choose the target (e.g. build, test,..) and either show all tasks or select a specific project you're interested in. Here's an example of the playwright Nx plugin build target (in the Nx repo).

Task graph of the Playwright Nx plugin in the nx repo being rendered in the browser

Alternatively you can use the Nx Console extension in VSCode or IntelliJ, right-click on the project and select:

Selecting "Focus task in Nx Graph" from the context menu in VS Code

It'll then visualize within the IDE:

Task graph of the Playwright Nx plugin in the nx repo being rendered in VS Code