Managing Dependencies and Optimizing Workspaces with NX's Task Pipeline

This comprehensive guide provides an in-depth understanding of leveraging Nx's task pipeline feature to manage dependencies in workspaces. The article focuses on utilizing this feature to optimize workspaces using 

. Practical examples demonstrate how to ensure dependencies are built before running an application using the 'depends on' concept.

Consider the primary React application, 'frontend', has two dependencies: 

 app without its dependencies built. Delete shared-ui’s 

 folder first, and then run the start command of the 

rm -rf packages/shared-ui/dist
npx nx start frontend

This action results in an error when trying to load the page because it cannot locate the required folder. The error occurs because the Shared UI wasn't built, and the application relies on local packages in the workspace through symbolic links to those projects.

 was run, and when trying to load the page, we will encounter an error. It says that it cannot find this folder because we didn't build the application. If we built the 

npx nx build shared-ui
npx nx start frontend

---
title: Managing Dependencies and Optimizing Workspaces with NX's Task Pipeline
description: Make sure dependencies are built first before running an application using dependsOn field.
privateVideoUrl: https://stream.mux.com/dTG01xjVsP7gtTJ3d6S6rQGyuclxZlqv4LjCCg02x302Bw.m3u8
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/sean-amarasinghe-monorepos-for-enterprise-developers-app/-/tree/main/Course%20App/module_6
---

# Managing Dependencies and Optimizing Workspaces with NX's Task Pipeline

## Introduction

This comprehensive guide provides an in-depth understanding of leveraging Nx's task pipeline feature to manage dependencies in workspaces. The article focuses on utilizing this feature to optimize workspaces using _affected commands_. Practical examples demonstrate how to ensure dependencies are built before running an application using the 'depends on' concept.

## Dependency Management

Consider the primary React application, 'frontend', has two dependencies: `shared-ui` and `shared-utils`.

Build `frontend` app without its dependencies built. Delete shared-ui’s `dist` folder first, and then run the start command of the `frontend` application. 

```bash
rm -rf packages/shared-ui/dist
npx nx start frontend
```

This action results in an error when trying to load the page because it cannot locate the required folder. The error occurs because the Shared UI wasn't built, and the application relies on local packages in the workspace through symbolic links to those projects.

![Build error](https://d2uusema5elisf.cloudfront.net/courses/monorepos-for-enterprise-developers/module_06/lesson_06.01/public/assets/build-error.png)

If `shared-ui` wasn't built first, then `npx nx start frontend` was run, and when trying to load the page, we will encounter an error. It says that it cannot find this folder because we didn't build the application. If we built the `shared-ui` first, and then ran the `frontend` app, it will work as expected.

Sean Amarasinghe

Make sure dependencies are built first before running an application using dependsOn field.

In this module, we are going to learn about NX's task pipeline feature to

and optimizing our workspace with something called affected commands.

In this lesson, we are going to learn how we can make sure that the

first before running an application using "depends on failed".

In our main React application we built so far, which we called "frontend", we

two dependencies - "shared UI" and "shared utils".

Let's try and build "frontend app" without its dependencies built.

Let's delete "shared UI's" this fall to first and then we can run the start

And if we try to load the page, we will encounter an error because it says that

cannot find that this fall because we didn't build the application.

Because our reliance on other local packages within the workspace essentially

Let's up this app and try and build the "shared UI" library.

And now we can try and run our "frontend application".

As you can see, now it works as expected.

To automate this process, we can leverage NX's task pipeline capabilities.

By updating the "enix.json" file and specifying the commands that need to be

a project's dependencies, using the "depends on failed", we can ensure seamless

We have to ensure that we build "shared UI first", which is known as a "built

NX can be configured to handle this automatically for us.

By configuring the "enix.json" file, we can ensure that the necessary build

Let's add a new property here called "depends on", where we say that all builds

on the build of the child projects or dependent projects.

This means whenever we run a build on our "frontend reactor" by using the "

file, it will first trigger the build on its dependent projects.

We can do the same for our "dev" command.

Now if we run the "build" command on the "frontend" app, it will first run "

of "shared UI", as well as our other dependency project "shared utils".

Here the build ran successfully, and you can read it in the bottom.

It says "successfully ran target build for project frontend" and two tasks.

It depends on the two other tasks are the "build" command of the "shared UI

In this person, we learned how to configure NX's task pipeline feature to

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript