Understanding Dependency Graphs with Nx

An intro to Nx graph to identify dependencies

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the The Art of Enterprise Monorepos with Nx and pnpm course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The Art of Enterprise Monorepos with Nx and pnpm, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The Art of Enterprise Monorepos with Nx and pnpm

  • [00:00 - 00:09] In this lesson we are going to look at the NX dependency graph. NX generates a dependency graph that visualizes the relationships between different modules.

    [00:10 - 00:28] This graph helps developers to understand the structure of the application, identifying the circular dependencies and your optimizes the build process. Before looking at the dependency graph, let's import the shared util library into our front-end package.

    [00:29 - 01:00] Now we imported the package into the front-end library. Let's go to the app.js file and import the shared util package into the front- end application.

    [01:01 - 01:25] We created a helper function which is called sum. Now let's save the state of the sum in a total variable.

    [01:26 - 01:44] We initialize it to 0 and then let's create a handle function. We will set total here.

    [01:45 - 01:55] We'll add 1 to the total. Let's also save the click status.

    [01:56 - 02:13] Now instead of calling set clicked inside the onClick handler, let's call handleClick. We can use this total here to find out the times that the button has been clicked.

    [02:14 - 02:32] Let's try and run the application. Let's change the sum to total.

    [02:33 - 02:45] It looks like the application is running successfully and let's test the application. It seems like it's working.

    [02:46 - 03:02] Now let's stop this application. We have two libraries used by a front-end application and with nxgraph we can see the relationship.

    [03:03 - 03:24] Let's run nxgraph on the command line. This will open up a browser and run the nxgraph.

    [03:25 - 03:34] You can see here the front-end is connected to shared UI and shared utils. The front-end is using the shared UI and shared util libraries.

    [03:35 - 04:00] nxgraph is a hand tool that generates a dependency graph which shows us the structure of our application and also helps us to optimize the builds and identify circular dependencies. In this lesson we looked at how to use the dependency graph and also identify potential problems with circular dependencies and how we can improve our project.

    [04:01 - 04:09] In this module we looked at installing nx, how to run nx commands and how to use the dependency graph.