miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(core): add nx graph as alias of nx dep-graph (#8539)

Browse Source 
* feat(core): add nx graph as alias of nx dep-graph

* docs(core): add note about old dep-graph syntax

* cleanup(core): formatting

* feat(core): formatting

* feat(core): formatting

Co-authored-by: Isaac Mann <isaacplmann+git@gmail.com>
This commit is contained in:
Isaac Mann 2022-01-21 11:15:23 -05:00 committed by GitHub
parent 5afd3d6d2c
commit 07ebdb36a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
79 changed files with 733 additions and 723 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dep-graph/client/src/app/sidebar/sidebar.tsx
View File

@ -103,7 +103,7 @@ export function Sidebar() {
<title>Nx</title>
<path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
</svg>
<span className="ml-4 text-xl font-medium"> Dependency Graph </span>
<span className="ml-4 text-xl font-medium"> Project Graph </span>
</div>
</div>

2
dep-graph/client/src/index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Nx Workspace Dependency Graph</title>
<title>Nx Workspace Project Graph</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

2
docs/generated/api-workspace/executors/run-commands.md
View File

@ -135,7 +135,7 @@ The above commands will finish immediately, instead of waiting for 5 seconds.
##### Nx Affected
The true power of `run-commands` comes from the fact that it runs through `nx`, which knows about your dependency graph. So you can run **custom commands** only for the projects that have been affected by a change.
The true power of `run-commands` comes from the fact that it runs through `nx`, which knows about your project graph. So you can run **custom commands** only for the projects that have been affected by a change.
We can create some configurations to generate docs, and if run using `nx affected`, it will only generate documentation for the projects that have been changed:

150
docs/generated/cli/affected-dep-graph.md
View File

@ -1,150 +0,0 @@
---
title: 'affected:dep-graph - CLI command'
description: 'Graph dependencies affected by changes'
---
# affected:dep-graph
Graph dependencies affected by changes
## Usage
```bash
nx affected:dep-graph
```
[Install `nx` globally](/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.
### Examples
Open the dep graph of the workspace in the browser, and highlight the projects affected by changing the index.ts file:
```bash
nx affected:dep-graph --files=libs/mylib/src/index.ts
```
Open the dep graph of the workspace in the browser, and highlight the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:dep-graph --base=main --head=HEAD
```
Save the dep graph of the workspace in a json file, and highlight the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:dep-graph --base=main --head=HEAD --file=output.json
```
Generate a static website with dep graph data in an html file, highlighting the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:dep-graph --base=main --head=HEAD --file=output.html
```
Open the dep graph of the workspace in the browser, and highlight the projects affected by the last commit on main:
```bash
nx affected:dep-graph --base=main~1 --head=main
```
Open the dep graph of the workspace in the browser, highlight the projects affected, but exclude project-one and project-two:
```bash
nx affected:dep-graph --exclude=project-one,project-two
```
## Options
### all
All projects
### base
Base of the current branch (usually main)
### configuration
This is the configuration to use when performing tasks on projects
### exclude
Default: ``
Exclude certain projects from being processed
### file
Output file (e.g. --file=output.json or --file=dep-graph.html)
### files
Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas
### focus
Use to show the dependency graph for a particular project and every node that is either an ancestor or a descendant.
### groupByFolder
Group projects by folder in the dependency graph
### head
Latest commit of the current branch (usually HEAD)
### help
Show help
### host
Bind the dependency graph server to a specific ip address.
### only-failed
Default: `false`
Isolate projects which previously failed
### open
Default: `true`
Open the dependency graph in the browser.
### port
Bind the dependency graph server to a specific port.
### runner
This is the name of the tasks runner configured in nx.json
### skip-nx-cache
Default: `false`
Rerun the tasks even when the results are available in the cache
### uncommitted
Uncommitted changes
### untracked
Untracked changes
### verbose
Print additional error stack trace on failure
### version
Show version number
### watch
Default: `false`
Watch for changes to dependency graph and update in-browser

150
docs/generated/cli/affected-graph.md Normal file
View File

@ -0,0 +1,150 @@
---
title: 'affected:graph - CLI command'
description: 'Graph dependencies affected by changes. Alias: affected:dep-graph'
---
# affected:graph
Graph dependencies affected by changes. Alias: affected:dep-graph
## Usage
```bash
nx affected:graph
```
[Install `nx` globally](/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.
### Examples
Open the project graph of the workspace in the browser, and highlight the projects affected by changing the index.ts file:
```bash
nx affected:graph --files=libs/mylib/src/index.ts
```
Open the project graph of the workspace in the browser, and highlight the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:graph --base=main --head=HEAD
```
Save the project graph of the workspace in a json file, and highlight the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:graph --base=main --head=HEAD --file=output.json
```
Generate a static website with project graph data in an html file, highlighting the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:graph --base=main --head=HEAD --file=output.html
```
Open the project graph of the workspace in the browser, and highlight the projects affected by the last commit on main:
```bash
nx affected:graph --base=main~1 --head=main
```
Open the project graph of the workspace in the browser, highlight the projects affected, but exclude project-one and project-two:
```bash
nx affected:graph --exclude=project-one,project-two
```
## Options
### all
All projects
### base
Base of the current branch (usually main)
### configuration
This is the configuration to use when performing tasks on projects
### exclude
Default: ``
Exclude certain projects from being processed
### file
Output file (e.g. --file=output.json or --file=dep-graph.html)
### files
Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas
### focus
Use to show the project graph for a particular project and every node that is either an ancestor or a descendant.
### groupByFolder
Group projects by folder in the project graph
### head
Latest commit of the current branch (usually HEAD)
### help
Show help
### host
Bind the project graph server to a specific ip address.
### only-failed
Default: `false`
Isolate projects which previously failed
### open
Default: `true`
Open the project graph in the browser.
### port
Bind the project graph server to a specific port.
### runner
This is the name of the tasks runner configured in nx.json
### skip-nx-cache
Default: `false`
Rerun the tasks even when the results are available in the cache
### uncommitted
Uncommitted changes
### untracked
Untracked changes
### verbose
Print additional error stack trace on failure
### version
Show version number
### watch
Default: `false`
Watch for changes to project graph and update in-browser

112
docs/generated/cli/dep-graph.md
View File

@ -1,112 +0,0 @@
---
title: 'dep-graph - CLI command'
description: 'Graph dependencies within workspace'
---
# dep-graph
Graph dependencies within workspace
## Usage
```bash
nx dep-graph
```
[Install `nx` globally](/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.
### Examples
Open the dep graph of the workspace in the browser:
```bash
nx dep-graph
```
Save the dep graph into a json file:
```bash
nx dep-graph --file=output.json
```
Generate a static website with dep graph into an html file, accompanied by an asset folder called static:
```bash
nx dep-graph --file=output.html
```
Show the graph where every node is either an ancestor or a descendant of todos-feature-main:
```bash
nx dep-graph --focus=todos-feature-main
```
Include project-one and project-two in the dep graph:
```bash
nx dep-graph --include=project-one,project-two
```
Exclude project-one and project-two from the dep graph:
```bash
nx dep-graph --exclude=project-one,project-two
```
Show the graph where every node is either an ancestor or a descendant of todos-feature-main, but exclude project-one and project-two:
```bash
nx dep-graph --focus=todos-feature-main --exclude=project-one,project-two
```
Watch for changes to dep graph and update in-browser:
```bash
nx dep-graph --watch
```
## Options
### exclude
List of projects delimited by commas to exclude from the dependency graph.
### file
Output file (e.g. --file=output.json or --file=dep-graph.html)
### focus
Use to show the dependency graph for a particular project and every node that is either an ancestor or a descendant.
### groupByFolder
Group projects by folder in the dependency graph
### help
Show help
### host
Bind the dependency graph server to a specific ip address.
### open
Default: `true`
Open the dependency graph in the browser.
### port
Bind the dependency graph server to a specific port.
### version
Show version number
### watch
Default: `false`
Watch for changes to dependency graph and update in-browser

112
docs/generated/cli/graph.md Normal file
View File

@ -0,0 +1,112 @@
---
title: 'graph - CLI command'
description: 'Graph dependencies within workspace. Alias: dep-graph'
---
# graph
Graph dependencies within workspace. Alias: dep-graph
## Usage
```bash
nx graph
```
[Install `nx` globally](/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.
### Examples
Open the project graph of the workspace in the browser:
```bash
nx graph
```
Save the project graph into a json file:
```bash
nx graph --file=output.json
```
Generate a static website with project graph into an html file, accompanied by an asset folder called static:
```bash
nx graph --file=output.html
```
Show the graph where every node is either an ancestor or a descendant of todos-feature-main:
```bash
nx graph --focus=todos-feature-main
```
Include project-one and project-two in the project graph:
```bash
nx graph --include=project-one,project-two
```
Exclude project-one and project-two from the project graph:
```bash
nx graph --exclude=project-one,project-two
```
Show the graph where every node is either an ancestor or a descendant of todos-feature-main, but exclude project-one and project-two:
```bash
nx graph --focus=todos-feature-main --exclude=project-one,project-two
```
Watch for changes to project graph and update in-browser:
```bash
nx graph --watch
```
## Options
### exclude
List of projects delimited by commas to exclude from the project graph.
### file
Output file (e.g. --file=output.json or --file=dep-graph.html)
### focus
Use to show the project graph for a particular project and every node that is either an ancestor or a descendant.
### groupByFolder
Group projects by folder in the project graph
### help
Show help
### host
Bind the project graph server to a specific ip address.
### open
Default: `true`
Open the project graph in the browser.
### port
Bind the project graph server to a specific port.
### version
Show version number
### watch
Default: `false`
Watch for changes to project graph and update in-browser

2
docs/generated/cli/print-affected.md
View File

@ -17,7 +17,7 @@ nx print-affected
### Examples
Print information about affected projects and the dependency graph:
Print information about affected projects and the project graph:
```bash
nx print-affected

16
docs/map.json
View File

@ -187,7 +187,7 @@
"file": "shared/react-tutorial/08-create-libs"
},
{
"name": "9 - Dep Graph",
"name": "9 - Project Graph",
"id": "09-dep-graph",
"file": "shared/react-tutorial/09-dep-graph"
},
@ -253,7 +253,7 @@
"file": "shared/angular-tutorial/08-create-libs"
},
{
"name": "9 - Dep Graph",
"name": "9 - Project Graph",
"id": "09-dep-graph",
"file": "shared/angular-tutorial/09-dep-graph"
},
@ -299,7 +299,7 @@
"file": "shared/node-tutorial/04-create-libs"
},
{
"name": "5 - Dep Graph",
"name": "5 - Project Graph",
"id": "05-dep-graph",
"file": "shared/node-tutorial/05-dep-graph"
},
@ -366,9 +366,9 @@
"file": "generated/cli/daemon"
},
{
"name": "dep-graph",
"name": "graph",
"id": "dep-graph",
"file": "generated/cli/dep-graph"
"file": "generated/cli/graph"
},
{
"name": "run-many",
@ -401,9 +401,9 @@
"file": "generated/cli/affected-e2e"
},
{
"name": "affected:dep-graph",
"name": "affected:graph",
"id": "affected-dep-graph",
"file": "generated/cli/affected-dep-graph"
"file": "generated/cli/affected-graph"
},
{
"name": "affected:apps",
@ -1359,7 +1359,7 @@
"file": "shared/monorepo-tags"
},
{
"name": "Dependency Graph",
"name": "Project Graph",
"id": "dependency-graph",
"file": "shared/workspace/structure/dependency-graph"
},

2
docs/shared/angular-tutorial/08-create-libs.md
View File

@ -167,4 +167,4 @@ npx nx serve todos
## What's Next
- Continue to [Step 9: Using the Dependency Graph](/angular-tutorial/09-dep-graph)
- Continue to [Step 9: Using the Project Graph](/angular-tutorial/09-dep-graph)

6
docs/shared/angular-tutorial/09-dep-graph.md
View File

@ -1,4 +1,4 @@
# Angular Nx Tutorial - Step 9: Using the Depedency Graph
# Angular Nx Tutorial - Step 9: Using the Project Graph
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/8fr2RukmfW0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
@ -8,10 +8,10 @@ Previously, some senior architect would create an ad-hoc dependency diagram and
With Nx, you can do better than that.
Run the command to see the dependency graph for your workspace.
Run the command to see the project graph for your workspace.
```sh
npx nx dep-graph
npx nx graph
```
## What's Next

4
docs/shared/angular-tutorial/11-test-affected-projects.md
View File

@ -2,7 +2,7 @@
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/5t77CPl-bbM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Because Nx understands the dependency graph of your workspace, Nx is efficient at retesting and rebuilding your projects.
Because Nx understands the project graph of your workspace, Nx is efficient at retesting and rebuilding your projects.
**Commit all the changes in the repo**:
@ -26,7 +26,7 @@ Run the command to see affected apps.
npx nx affected:apps
```
You should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the dependency graph to figure out which apps can be affected by this change.
You should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the project graph to figure out which apps can be affected by this change.
Run the command to see affected libraries

2
docs/shared/configuration/projectjson.md
View File

@ -67,7 +67,7 @@ Let's look at the following `project.json`:
- `root` tells Nx the location of the library including its sources and configuration files.
- `sourceRoot` tells Nx the location of the library's source files.
- `projectType` is either 'application' or 'library'. The project type is used in dep graph viz and in a few aux
- `projectType` is either 'application' or 'library'. The project type is used in project graph viz and in a few aux
commands.
### Targets

2
docs/shared/devkit-and-nx-plugins.md
View File

@ -26,7 +26,7 @@ Plugins have:
- **Project Graph Extensions**
- Plugins can provide a function `processProjectGraph` to add extra edges to the project graph.
- This allows plugins to influence the behavior of `nx affected` and the dep-graph visualization.
- This allows plugins to influence the behavior of `nx affected` and the project graph visualization.
- See [project graph plugins]('./workspace/project-graph-plugins') for more information.
- **Project Inference Extensions**

2
docs/shared/guides/nextjs.md
View File

@ -103,7 +103,7 @@ Nx allows you to create libraries with just one command. Some reasons you might
- Share code between applications
- Publish a package to be used outside the monorepo
- Better visualize the architecture using `npx nx dep-graph`
- Better visualize the architecture using `npx nx graph`
For more information on Nx libraries, see our documentation on [Creating Libraries](/structure/creating-libraries)
and [Library Types](/structure/library-types).

2
docs/shared/guides/react-native.md
View File

@ -139,7 +139,7 @@ Nx allows you to create libraries with just one command. Some reasons you might
- Share code between applications
- Publish a package to be used outside the monorepo
- Better visualize the architecture using `npx nx dep-graph`
- Better visualize the architecture using `npx nx graph`
For more information on Nx libraries, see our documentation on [Creating Libraries](/structure/creating-libraries)
and [Library Types](/structure/library-types).

2
docs/shared/guides/turbo-and-nx.md
View File

@ -22,7 +22,7 @@ The starting point of any non-trivial monorepo management tool is to be able to
- Since the computation of the project graph can take a lot of time for complex workspaces, **Nx does its analysis in the background. Turborepo does it at request time.**
- **Nx has visibility rules, which are essential for any monorepo with multiple teams contributing.** You can say that some things in the monorepo are private to your team so they cannot be depended on by other teams. Turborepo doesn't have visibility rules. **Visibility rules prevent the monorepo from becoming the “big ball of mud”.**
#### 2. Dependency graph visualization
#### 2. Project graph visualization
Being able to visually explore a monorepo workspace can be a deal breaker when it comes to debug and troubleshoot large monorepo workspaces.

2
docs/shared/guides/using-tailwind-css-in-react.md
View File

@ -40,7 +40,7 @@ module.exports = {
In a typical `tailwind.config.js` file, the `purge` property of the tailwind config would be an array that includes all files that could mention tailwind class names (you can find more details on tailwind's [official documentation](https://tailwindcss.com/docs/optimizing-for-production#basic-usage)).
Nx has a utility function for determining the glob representation of all files the application depends on (based on the Nx Dependency Graph), which should be used when setting this purge property. This eliminates additional manual maintenance as your workspace progresses.
Nx has a utility function for determining the glob representation of all files the application depends on (based on the Nx Project Graph), which should be used when setting this purge property. This eliminates additional manual maintenance as your workspace progresses.
```js
const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');

4
docs/shared/migration/adding-to-monorepo.md
View File

@ -91,8 +91,8 @@ tools because it looks not just at the changed files but also at the nature of t
### Workspace Visualization
Run `nx dep-graph` to see a visualization of your workspace. `nx affected:dep-graph` shows what is affected by your
commit. `nx dep-graph --watch` watches your workspace for changes and updates the visualization.
Run `nx graph` to see a visualization of your workspace. `nx affected:graph` shows what is affected by your
commit. `nx graph --watch` watches your workspace for changes and updates the visualization.
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/v87Y8NgAYLo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="fullscreen"></iframe>

4
docs/shared/migration/manual.md
View File

@ -168,7 +168,7 @@ nx format:write
Nx offers built-in tasks for the most common needs: `serve`, `build`, `test`, `e2e`, and `lint`. You likely have additional tasks that are needed to manage or deploy your codebase. These tasks might include deployment, i18n workflows, or uploading assets to CDNs. These tasks can be set up as scripts that you run manually with node, ts-node, or npm scripts. You can migrate those tasks over as-is, to begin with.
You should consider implementing them as Nx tasks which should be a quick transition with the `run-commands` builder. [The `run-commands` builder](/executors/run-commands-builder) will allow you to run any custom commands you need as an Nx task. By implementing these commands in an Nx task, they are able to take advantage of the dependency graph in Nx and only run when necessary. They are also able to be cached and only be re-run when necessary.
You should consider implementing them as Nx tasks which should be a quick transition with the `run-commands` builder. [The `run-commands` builder](/executors/run-commands-builder) will allow you to run any custom commands you need as an Nx task. By implementing these commands in an Nx task, they are able to take advantage of the project graph in Nx and only run when necessary. They are also able to be cached and only be re-run when necessary.
Your use-case may also be covered by one of our community plugins. Plugin authors are able to extend the functionality of Nx through our plugin API.
@ -194,7 +194,7 @@ For React libraries:
nx generate @nrwl/react:library
```
It’s important to remember: don’t just drop your code anywhere! Always generate an app or a library for that code before migration. Without the project configuration, you’ll miss out on key functionalities of Nx provided by the dependency graph generation and affected code detection.
It’s important to remember: don’t just drop your code anywhere! Always generate an app or a library for that code before migration. Without the project configuration, you’ll miss out on key functionalities of Nx provided by the project graph generation and affected code detection.
### Establishing code boundaries

4
docs/shared/migration/migration-angular.md
View File

@ -84,9 +84,9 @@ Your workspace is now powered by Nx! You can verify out that your application st
- To build, run `ng build`.
- To run unit tests, run `ng test`.
- To run e2e tests, run `ng e2e`.
- To see your dependency graph, run `nx dep-graph`.
- To see your project graph, run `nx graph`.
> Your dependency graph will grow as you add, and use more applications and libraries. You can add the `--watch` flag to `nx dep-graph` to see this changes in-browser as you add them.
> Your project graph will grow as you add, and use more applications and libraries. You can add the `--watch` flag to `nx graph` to see this changes in-browser as you add them.
Learn more about the advantages of Nx in the following guides:

2
docs/shared/monorepo-tags.md
View File

@ -1,4 +1,4 @@
# Imposing Constraints on the Dependency Graph
# Imposing Constraints on the Project Graph
If you partition your code into well-defined cohesive units, even a small organization will end up with a dozen apps and dozens or hundreds of libs. If all of them can depend on each other freely, the chaos will ensue, and the workspace will become unmanageable.

2
docs/shared/node-tutorial/05-dep-graph.md
View File

@ -1,4 +1,4 @@
# Node Nx Tutorial - Step 5: Dep Graph
# Node Nx Tutorial - Step 5: Project Graph
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/l9MjZ9IPdu4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>

2
docs/shared/node-tutorial/07-test-affected-projects.md
View File

@ -35,7 +35,7 @@ export class AuthController {
}
```
**Run `nx affected:apps`**, and you should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the dependency graph to figure out which apps are affected by this change.
**Run `nx affected:apps`**, and you should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the project graph to figure out which apps are affected by this change.
**Run `nx affected:libs`**, and you should see `auth` printed out. This command works similarly, but instead of printing the affected apps, it prints the affected libs.

2
docs/shared/nx-core.md
View File

@ -158,7 +158,7 @@ elegant way. [Read about the relationship between Nx and Yarn/Lerna/PNPM](/guide
### Nx Understands How Your Workspace Is Structured
If you run `nx dep-graph` you will see that `complex` has a dependency on `simple`. Any change to `simple` will
If you run `nx graph` you will see that `complex` has a dependency on `simple`. Any change to `simple` will
invalidate the computation cache for `complex`, but changes to `complex` won't invalidate the cache for `simple`.
In contrast to more basic monorepo tools, Nx doesn't just analyze `package.json` files. It does much more. Nx also knows

6
docs/shared/react-tutorial/09-dep-graph.md
View File

@ -1,4 +1,4 @@
# React Nx Tutorial - Step 9: Dep Graph
# React Nx Tutorial - Step 9: Project Graph
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/Dr7jI9RYcmY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
@ -11,7 +11,7 @@ With Nx, you can do better than that.
Run
```bash
npx nx dep-graph
npx nx graph
```
The dependency graph page opens in a new browser window. Click on "Show all projects" to see all the apps and libraries in the workspace.
The project graph page opens in a new browser window. Click on "Show all projects" to see all the apps and libraries in the workspace.

2
docs/shared/react-tutorial/11-test-affected-projects.md
View File

@ -35,7 +35,7 @@ export function Todos(props: TodosProps) {
export default Todos;
```
**Run `npx nx affected:apps`**, and you should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the dependency graph to figure out which apps can be affected by this change.
**Run `npx nx affected:apps`**, and you should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the project graph to figure out which apps can be affected by this change.
**Run `npx nx affected:libs`**, and you should see `ui` printed out. This command works similarly, but instead of printing the affected apps, it prints the affected libs.

4
docs/shared/using-nx/affected.md
View File

@ -26,12 +26,12 @@ depend on `lib`, so it will invoke `nx run-many --target=test --projects=app1,ap
Nx analyzes the nature of the changes. For example, if you change the version of Next.js in the package.json, Nx knows
that `app2` cannot be affected by it, so it only retests `app1`.
## Dep Graph
## Project Graph
To visualise what is affected, run:
```bash
nx affected:dep-graph
nx affected:graph
```
## CI

23
docs/shared/using-nx/nx-cli.md
View File

@ -5,8 +5,7 @@
The Nx CLI isn't like most command lines that accomplishes a predefined task. Nx can be configured to work with
different tools and even different languages.
Nx allows you to break up your codebase into different **projects**. The Nx CLI provides commands to operate and manage
the different parts of the codebase. These commands fall into three categories:
Nx allows you to break up your codebase into different **projects**. The Nx CLI provides commands to operate and manage the different parts of the codebase. These commands fall into three categories:
- Acting on code (Build, Test, Serve)
- Modifying code
@ -28,7 +27,7 @@ nx build my-js-app
However, `nx build` is only an abstraction over what it means to "build" projects rather than tied to a certain
implementation. For instance, if you have a `project.json` file defining `build` using
a **[executor](/executors/using-builders)**, that executor will be invoked. If you don't specify an
an **[executor](/executors/using-builders)**, that executor will be invoked. If you don't specify an
executor for the build target, `nx build my-react-app` will invoke the `build` npm script in the project's folder. Every
argument you pass into `run` will be forwarded to the executor or the npm script.
@ -42,7 +41,7 @@ nx run-many --target=build --projects=app1,app2
nx run-many --target=test --all # Runs all projects that have a test target, use this sparingly.
```
The [`nx affected` command](/cli/affected) isolates set projects that may have changed in behavior and
The [`nx affected` command](/cli/affected) isolates the set projects that may have changed in behavior and
runs a target across them. This is more efficient than running all projects every time.
```bash
@ -63,7 +62,7 @@ Again, like `nx run`, `nx generate` is only an abstraction over generating code.
want via **generators**. **[Generators](/generators/using-schematics)** can be installed as part of a
plugin or developed locally within an Nx workspace to fit the needs of your organization.
A [Workspace Generator](/generators/workspace-generators) is a custom generator for your
A [workspace generator](/generators/workspace-generators) is a custom generator for your
workspace. `nx generate workspace-generator my-generator` generates a workspace generator which can be run with
the [`nx workspace-generator` command](/cli/workspace-generator). This can be useful to allow your
organization to consistently generate projects according to your own standards.
@ -84,18 +83,20 @@ nx migrate --run-migrations # Runs the migrations scheduled by the previous comm
## Understanding the codebase
Nx creates and maintains a dependency graph between projects based on import statements in your code and uses that
Nx creates and maintains a project graph between projects based on import statements in your code and uses that
information to run executors only on the [affected](/cli/affected) projects in a codebase. A visual
version of the [project dependency graph](/structure/dependency-graph) is also available to help developers
version of the [project project graph](/structure/dependency-graph) is also available to help developers
understand the architecture of the codebase.
The [`nx dep-graph` command](/cli/dep-graph) displays this dependency graph in a web browser for you to
The [`nx graph` command](/cli/dep-graph) displays this project graph in a web browser for you to
explore.
Note: In older versions of Nx, the project graph was launched with `nx dep-graph`. For backward compatibility, that command is aliased to `nx graph`.
```bash
nx dep-graph
nx dep-graph --watch # Updates the browser as code is changed
nx affected:dep-graph # Highlights projects which may have changed in behavior
nx graph
nx graph --watch # Updates the browser as code is changed
nx affected:graph # Highlights projects which may have changed in behavior
```
The [`nx list` command](/cli/list) lists the currently installed Nx plugins and other available plugins.

2
docs/shared/workspace/creating-libraries.md
View File

@ -12,7 +12,7 @@ The more granular your libraries are, the more effective `nx affected` and Nx's
### 2. Visualizing Architecture
The `nx dep-graph` command generates a graph of how apps and libraries depend on each other. If most of your code lives in a few giant libraries, this visualization doesn't provide much value. Adding the `--watch` flag to the command will update the visualization in-browser as you make changes.
The `nx graph` command generates a graph of how apps and libraries depend on each other. If most of your code lives in a few giant libraries, this visualization doesn't provide much value. Adding the `--watch` flag to the command will update the visualization in-browser as you make changes.
### 3. Enforcing Constraints

2
docs/shared/workspace/structure/dependency-graph.md
View File

@ -1,6 +1,6 @@
# Analyzing & Visualizing Workspaces
To be able to support the monorepo-style development, the tools must know how different projects in your workspace depend on each other. Nx uses advanced code analysis to construct this dependency graph. And it gives you a way to explore it:
To be able to support the monorepo-style development, the tools must know how different projects in your workspace depend on each other. Nx uses advanced code analysis to construct this project graph. And it gives you a way to explore it:
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/cMZ-ReC-jWU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>

4
e2e/angular-core/src/ng-add.test.ts
View File

@ -91,7 +91,7 @@ xdescribe('Angular Package', () => {
'affected:e2e': 'nx affected:e2e',
'affected:test': 'nx affected:test',
'affected:lint': 'nx affected:lint',
'affected:dep-graph': 'nx affected:dep-graph',
'affected:graph': 'nx affected:graph',
affected: 'nx affected',
format: 'nx format:write',
'format:write': 'nx format:write',
@ -99,7 +99,7 @@ xdescribe('Angular Package', () => {
update: 'ng update @nrwl/workspace',
'update:check': 'ng update',
postinstall: 'node ./decorate-angular-cli.js',
'dep-graph': 'nx dep-graph',
graph: 'nx graph',
'workspace-generator': 'nx workspace-generator',
help: 'nx help',
});

6
nx-dev/feature-conf/src/lib/conf-schedule.tsx
View File

@ -226,7 +226,7 @@ export function ConfSchedule(): JSX.Element {
type: 'event',
time: '12-12:25pm',
title: 'Optimizing Workspaces for Nx',
description: `In this talk, we’ll discuss the concerns to consider when architecting an Nx workspace, and discuss how to be proactive in managing your dependency graph to get the most out of developer productivity, and reduce the risk of dreaded circular dependencies.`,
description: `In this talk, we’ll discuss the concerns to consider when architecting an Nx workspace, and discuss how to be proactive in managing your project graph to get the most out of developer productivity, and reduce the risk of dreaded circular dependencies.`,
speakers: ['Zack DeRose / Nrwl'],
videoUrl: 'https://www.youtube.com/watch?v=xgqH1WWRNhA',
},
@ -241,8 +241,8 @@ export function ConfSchedule(): JSX.Element {
{
type: 'event',
time: '1:30-1:55pm',
title: 'Solving Problems with the Dependency Graph',
description: `The dependency graph can be a powerful part of your workspace, but it can be hard to parse
title: 'Solving Problems with the Project Graph',
description: `The project graph can be a powerful part of your workspace, but it can be hard to parse
much information from the visualization, especially in large projects. In this talk, you’ll learn about
strategies to cut your graph down to size to understand more visually and also how to use the
JSON output of the graph when a visual just won’t cut it.`,

2
nx-dev/nx-dev/public/documentation/generated/api-workspace/executors/run-commands.md
View File

@ -135,7 +135,7 @@ The above commands will finish immediately, instead of waiting for 5 seconds.
##### Nx Affected
The true power of `run-commands` comes from the fact that it runs through `nx`, which knows about your dependency graph. So you can run **custom commands** only for the projects that have been affected by a change.
The true power of `run-commands` comes from the fact that it runs through `nx`, which knows about your project graph. So you can run **custom commands** only for the projects that have been affected by a change.
We can create some configurations to generate docs, and if run using `nx affected`, it will only generate documentation for the projects that have been changed:

150
nx-dev/nx-dev/public/documentation/generated/cli/affected-dep-graph.md
View File

@ -1,150 +0,0 @@
---
title: 'affected:dep-graph - CLI command'
description: 'Graph dependencies affected by changes'
---
# affected:dep-graph
Graph dependencies affected by changes
## Usage
```bash
nx affected:dep-graph
```
[Install `nx` globally](/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.
### Examples
Open the dep graph of the workspace in the browser, and highlight the projects affected by changing the index.ts file:
```bash
nx affected:dep-graph --files=libs/mylib/src/index.ts
```
Open the dep graph of the workspace in the browser, and highlight the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:dep-graph --base=main --head=HEAD
```
Save the dep graph of the workspace in a json file, and highlight the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:dep-graph --base=main --head=HEAD --file=output.json
```
Generate a static website with dep graph data in an html file, highlighting the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:dep-graph --base=main --head=HEAD --file=output.html
```
Open the dep graph of the workspace in the browser, and highlight the projects affected by the last commit on main:
```bash
nx affected:dep-graph --base=main~1 --head=main
```
Open the dep graph of the workspace in the browser, highlight the projects affected, but exclude project-one and project-two:
```bash
nx affected:dep-graph --exclude=project-one,project-two
```
## Options
### all
All projects
### base
Base of the current branch (usually main)
### configuration
This is the configuration to use when performing tasks on projects
### exclude
Default: ``
Exclude certain projects from being processed
### file
Output file (e.g. --file=output.json or --file=dep-graph.html)
### files
Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas
### focus
Use to show the dependency graph for a particular project and every node that is either an ancestor or a descendant.
### groupByFolder
Group projects by folder in the dependency graph
### head
Latest commit of the current branch (usually HEAD)
### help
Show help
### host
Bind the dependency graph server to a specific ip address.
### only-failed
Default: `false`
Isolate projects which previously failed
### open
Default: `true`
Open the dependency graph in the browser.
### port
Bind the dependency graph server to a specific port.
### runner
This is the name of the tasks runner configured in nx.json
### skip-nx-cache
Default: `false`
Rerun the tasks even when the results are available in the cache
### uncommitted
Uncommitted changes
### untracked
Untracked changes
### verbose
Print additional error stack trace on failure
### version
Show version number
### watch
Default: `false`
Watch for changes to dependency graph and update in-browser

150
nx-dev/nx-dev/public/documentation/generated/cli/affected-graph.md Normal file
View File

@ -0,0 +1,150 @@
---
title: 'affected:graph - CLI command'
description: 'Graph dependencies affected by changes. Alias: affected:dep-graph'
---
# affected:graph
Graph dependencies affected by changes. Alias: affected:dep-graph
## Usage
```bash
nx affected:graph
```
[Install `nx` globally](/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.
### Examples
Open the project graph of the workspace in the browser, and highlight the projects affected by changing the index.ts file:
```bash
nx affected:graph --files=libs/mylib/src/index.ts
```
Open the project graph of the workspace in the browser, and highlight the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:graph --base=main --head=HEAD
```
Save the project graph of the workspace in a json file, and highlight the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:graph --base=main --head=HEAD --file=output.json
```
Generate a static website with project graph data in an html file, highlighting the projects affected by the changes between main and HEAD (e.g., PR):
```bash
nx affected:graph --base=main --head=HEAD --file=output.html
```
Open the project graph of the workspace in the browser, and highlight the projects affected by the last commit on main:
```bash
nx affected:graph --base=main~1 --head=main
```
Open the project graph of the workspace in the browser, highlight the projects affected, but exclude project-one and project-two:
```bash
nx affected:graph --exclude=project-one,project-two
```
## Options
### all
All projects
### base
Base of the current branch (usually main)
### configuration
This is the configuration to use when performing tasks on projects
### exclude
Default: ``
Exclude certain projects from being processed
### file
Output file (e.g. --file=output.json or --file=dep-graph.html)
### files
Change the way Nx is calculating the affected command by providing directly changed files, list of files delimited by commas
### focus
Use to show the project graph for a particular project and every node that is either an ancestor or a descendant.
### groupByFolder
Group projects by folder in the project graph
### head
Latest commit of the current branch (usually HEAD)
### help
Show help
### host
Bind the project graph server to a specific ip address.
### only-failed
Default: `false`
Isolate projects which previously failed
### open
Default: `true`
Open the project graph in the browser.
### port
Bind the project graph server to a specific port.
### runner
This is the name of the tasks runner configured in nx.json
### skip-nx-cache
Default: `false`
Rerun the tasks even when the results are available in the cache
### uncommitted
Uncommitted changes
### untracked
Untracked changes
### verbose
Print additional error stack trace on failure
### version
Show version number
### watch
Default: `false`
Watch for changes to project graph and update in-browser

112
nx-dev/nx-dev/public/documentation/generated/cli/dep-graph.md
View File

@ -1,112 +0,0 @@
---
title: 'dep-graph - CLI command'
description: 'Graph dependencies within workspace'
---
# dep-graph
Graph dependencies within workspace
## Usage
```bash
nx dep-graph
```
[Install `nx` globally](/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.
### Examples
Open the dep graph of the workspace in the browser:
```bash
nx dep-graph
```
Save the dep graph into a json file:
```bash
nx dep-graph --file=output.json
```
Generate a static website with dep graph into an html file, accompanied by an asset folder called static:
```bash
nx dep-graph --file=output.html
```
Show the graph where every node is either an ancestor or a descendant of todos-feature-main:
```bash
nx dep-graph --focus=todos-feature-main
```
Include project-one and project-two in the dep graph:
```bash
nx dep-graph --include=project-one,project-two
```
Exclude project-one and project-two from the dep graph:
```bash
nx dep-graph --exclude=project-one,project-two
```
Show the graph where every node is either an ancestor or a descendant of todos-feature-main, but exclude project-one and project-two:
```bash
nx dep-graph --focus=todos-feature-main --exclude=project-one,project-two
```
Watch for changes to dep graph and update in-browser:
```bash
nx dep-graph --watch
```
## Options
### exclude
List of projects delimited by commas to exclude from the dependency graph.
### file
Output file (e.g. --file=output.json or --file=dep-graph.html)
### focus
Use to show the dependency graph for a particular project and every node that is either an ancestor or a descendant.
### groupByFolder
Group projects by folder in the dependency graph
### help
Show help
### host
Bind the dependency graph server to a specific ip address.
### open
Default: `true`
Open the dependency graph in the browser.
### port
Bind the dependency graph server to a specific port.
### version
Show version number
### watch
Default: `false`
Watch for changes to dependency graph and update in-browser

112
nx-dev/nx-dev/public/documentation/generated/cli/graph.md Normal file
View File

@ -0,0 +1,112 @@
---
title: 'graph - CLI command'
description: 'Graph dependencies within workspace. Alias: dep-graph'
---
# graph
Graph dependencies within workspace. Alias: dep-graph
## Usage
```bash
nx graph
```
[Install `nx` globally](/getting-started/nx-setup#install-nx) to invoke the command directly using `nx`, or use `npx nx`, `yarn nx`, or `pnpx nx`.
### Examples
Open the project graph of the workspace in the browser:
```bash
nx graph
```
Save the project graph into a json file:
```bash
nx graph --file=output.json
```
Generate a static website with project graph into an html file, accompanied by an asset folder called static:
```bash
nx graph --file=output.html
```
Show the graph where every node is either an ancestor or a descendant of todos-feature-main:
```bash
nx graph --focus=todos-feature-main
```
Include project-one and project-two in the project graph:
```bash
nx graph --include=project-one,project-two
```
Exclude project-one and project-two from the project graph:
```bash
nx graph --exclude=project-one,project-two
```
Show the graph where every node is either an ancestor or a descendant of todos-feature-main, but exclude project-one and project-two:
```bash
nx graph --focus=todos-feature-main --exclude=project-one,project-two
```
Watch for changes to project graph and update in-browser:
```bash
nx graph --watch
```
## Options
### exclude
List of projects delimited by commas to exclude from the project graph.
### file
Output file (e.g. --file=output.json or --file=dep-graph.html)
### focus
Use to show the project graph for a particular project and every node that is either an ancestor or a descendant.
### groupByFolder
Group projects by folder in the project graph
### help
Show help
### host
Bind the project graph server to a specific ip address.
### open
Default: `true`
Open the project graph in the browser.
### port
Bind the project graph server to a specific port.
### version
Show version number
### watch
Default: `false`
Watch for changes to project graph and update in-browser

2
nx-dev/nx-dev/public/documentation/generated/cli/print-affected.md
View File

@ -17,7 +17,7 @@ nx print-affected
### Examples
Print information about affected projects and the dependency graph:
Print information about affected projects and the project graph:
```bash
nx print-affected

16
nx-dev/nx-dev/public/documentation/map.json
View File

@ -187,7 +187,7 @@
"file": "shared/react-tutorial/08-create-libs"
},
{
"name": "9 - Dep Graph",
"name": "9 - Project Graph",
"id": "09-dep-graph",
"file": "shared/react-tutorial/09-dep-graph"
},
@ -253,7 +253,7 @@
"file": "shared/angular-tutorial/08-create-libs"
},
{
"name": "9 - Dep Graph",
"name": "9 - Project Graph",
"id": "09-dep-graph",
"file": "shared/angular-tutorial/09-dep-graph"
},
@ -299,7 +299,7 @@
"file": "shared/node-tutorial/04-create-libs"
},
{
"name": "5 - Dep Graph",
"name": "5 - Project Graph",
"id": "05-dep-graph",
"file": "shared/node-tutorial/05-dep-graph"
},
@ -366,9 +366,9 @@
"file": "generated/cli/daemon"
},
{
"name": "dep-graph",
"name": "graph",
"id": "dep-graph",
"file": "generated/cli/dep-graph"
"file": "generated/cli/graph"
},
{
"name": "run-many",
@ -401,9 +401,9 @@
"file": "generated/cli/affected-e2e"
},
{
"name": "affected:dep-graph",
"name": "affected:graph",
"id": "affected-dep-graph",
"file": "generated/cli/affected-dep-graph"
"file": "generated/cli/affected-graph"
},
{
"name": "affected:apps",
@ -1359,7 +1359,7 @@
"file": "shared/monorepo-tags"
},
{
"name": "Dependency Graph",
"name": "Project Graph",
"id": "dependency-graph",
"file": "shared/workspace/structure/dependency-graph"
},

2
nx-dev/nx-dev/public/documentation/shared/angular-tutorial/08-create-libs.md
View File

@ -167,4 +167,4 @@ npx nx serve todos
## What's Next
- Continue to [Step 9: Using the Dependency Graph](/angular-tutorial/09-dep-graph)
- Continue to [Step 9: Using the Project Graph](/angular-tutorial/09-dep-graph)

6
nx-dev/nx-dev/public/documentation/shared/angular-tutorial/09-dep-graph.md
View File

@ -1,4 +1,4 @@
# Angular Nx Tutorial - Step 9: Using the Depedency Graph
# Angular Nx Tutorial - Step 9: Using the Project Graph
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/8fr2RukmfW0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
@ -8,10 +8,10 @@ Previously, some senior architect would create an ad-hoc dependency diagram and
With Nx, you can do better than that.
Run the command to see the dependency graph for your workspace.
Run the command to see the project graph for your workspace.
```sh
npx nx dep-graph
npx nx graph
```
## What's Next

4
nx-dev/nx-dev/public/documentation/shared/angular-tutorial/11-test-affected-projects.md
View File

@ -2,7 +2,7 @@
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/5t77CPl-bbM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Because Nx understands the dependency graph of your workspace, Nx is efficient at retesting and rebuilding your projects.
Because Nx understands the project graph of your workspace, Nx is efficient at retesting and rebuilding your projects.
**Commit all the changes in the repo**:
@ -26,7 +26,7 @@ Run the command to see affected apps.
npx nx affected:apps
```
You should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the dependency graph to figure out which apps can be affected by this change.
You should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the project graph to figure out which apps can be affected by this change.
Run the command to see affected libraries

2
nx-dev/nx-dev/public/documentation/shared/configuration/projectjson.md
View File

@ -67,7 +67,7 @@ Let's look at the following `project.json`:
- `root` tells Nx the location of the library including its sources and configuration files.
- `sourceRoot` tells Nx the location of the library's source files.
- `projectType` is either 'application' or 'library'. The project type is used in dep graph viz and in a few aux
- `projectType` is either 'application' or 'library'. The project type is used in project graph viz and in a few aux
commands.
### Targets

2
nx-dev/nx-dev/public/documentation/shared/devkit-and-nx-plugins.md
View File

@ -26,7 +26,7 @@ Plugins have:
- **Project Graph Extensions**
- Plugins can provide a function `processProjectGraph` to add extra edges to the project graph.
- This allows plugins to influence the behavior of `nx affected` and the dep-graph visualization.
- This allows plugins to influence the behavior of `nx affected` and the project graph visualization.
- See [project graph plugins]('./workspace/project-graph-plugins') for more information.
- **Project Inference Extensions**

2
nx-dev/nx-dev/public/documentation/shared/guides/nextjs.md
View File

@ -103,7 +103,7 @@ Nx allows you to create libraries with just one command. Some reasons you might
- Share code between applications
- Publish a package to be used outside the monorepo
- Better visualize the architecture using `npx nx dep-graph`
- Better visualize the architecture using `npx nx graph`
For more information on Nx libraries, see our documentation on [Creating Libraries](/structure/creating-libraries)
and [Library Types](/structure/library-types).

2
nx-dev/nx-dev/public/documentation/shared/guides/react-native.md
View File

@ -139,7 +139,7 @@ Nx allows you to create libraries with just one command. Some reasons you might
- Share code between applications
- Publish a package to be used outside the monorepo
- Better visualize the architecture using `npx nx dep-graph`
- Better visualize the architecture using `npx nx graph`
For more information on Nx libraries, see our documentation on [Creating Libraries](/structure/creating-libraries)
and [Library Types](/structure/library-types).

2
nx-dev/nx-dev/public/documentation/shared/guides/turbo-and-nx.md
View File

@ -22,7 +22,7 @@ The starting point of any non-trivial monorepo management tool is to be able to
- Since the computation of the project graph can take a lot of time for complex workspaces, **Nx does its analysis in the background. Turborepo does it at request time.**
- **Nx has visibility rules, which are essential for any monorepo with multiple teams contributing.** You can say that some things in the monorepo are private to your team so they cannot be depended on by other teams. Turborepo doesn't have visibility rules. **Visibility rules prevent the monorepo from becoming the “big ball of mud”.**
#### 2. Dependency graph visualization
#### 2. Project graph visualization
Being able to visually explore a monorepo workspace can be a deal breaker when it comes to debug and troubleshoot large monorepo workspaces.

2
nx-dev/nx-dev/public/documentation/shared/guides/using-tailwind-css-in-react.md
View File

@ -40,7 +40,7 @@ module.exports = {
In a typical `tailwind.config.js` file, the `purge` property of the tailwind config would be an array that includes all files that could mention tailwind class names (you can find more details on tailwind's [official documentation](https://tailwindcss.com/docs/optimizing-for-production#basic-usage)).
Nx has a utility function for determining the glob representation of all files the application depends on (based on the Nx Dependency Graph), which should be used when setting this purge property. This eliminates additional manual maintenance as your workspace progresses.
Nx has a utility function for determining the glob representation of all files the application depends on (based on the Nx Project Graph), which should be used when setting this purge property. This eliminates additional manual maintenance as your workspace progresses.
```js
const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');

4
nx-dev/nx-dev/public/documentation/shared/migration/adding-to-monorepo.md
View File

@ -91,8 +91,8 @@ tools because it looks not just at the changed files but also at the nature of t
### Workspace Visualization
Run `nx dep-graph` to see a visualization of your workspace. `nx affected:dep-graph` shows what is affected by your
commit. `nx dep-graph --watch` watches your workspace for changes and updates the visualization.
Run `nx graph` to see a visualization of your workspace. `nx affected:graph` shows what is affected by your
commit. `nx graph --watch` watches your workspace for changes and updates the visualization.
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/v87Y8NgAYLo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="fullscreen"></iframe>

4
nx-dev/nx-dev/public/documentation/shared/migration/manual.md
View File

@ -168,7 +168,7 @@ nx format:write
Nx offers built-in tasks for the most common needs: `serve`, `build`, `test`, `e2e`, and `lint`. You likely have additional tasks that are needed to manage or deploy your codebase. These tasks might include deployment, i18n workflows, or uploading assets to CDNs. These tasks can be set up as scripts that you run manually with node, ts-node, or npm scripts. You can migrate those tasks over as-is, to begin with.
You should consider implementing them as Nx tasks which should be a quick transition with the `run-commands` builder. [The `run-commands` builder](/executors/run-commands-builder) will allow you to run any custom commands you need as an Nx task. By implementing these commands in an Nx task, they are able to take advantage of the dependency graph in Nx and only run when necessary. They are also able to be cached and only be re-run when necessary.
You should consider implementing them as Nx tasks which should be a quick transition with the `run-commands` builder. [The `run-commands` builder](/executors/run-commands-builder) will allow you to run any custom commands you need as an Nx task. By implementing these commands in an Nx task, they are able to take advantage of the project graph in Nx and only run when necessary. They are also able to be cached and only be re-run when necessary.
Your use-case may also be covered by one of our community plugins. Plugin authors are able to extend the functionality of Nx through our plugin API.
@ -194,7 +194,7 @@ For React libraries:
nx generate @nrwl/react:library
```
It’s important to remember: don’t just drop your code anywhere! Always generate an app or a library for that code before migration. Without the project configuration, you’ll miss out on key functionalities of Nx provided by the dependency graph generation and affected code detection.
It’s important to remember: don’t just drop your code anywhere! Always generate an app or a library for that code before migration. Without the project configuration, you’ll miss out on key functionalities of Nx provided by the project graph generation and affected code detection.
### Establishing code boundaries

4
nx-dev/nx-dev/public/documentation/shared/migration/migration-angular.md
View File

@ -84,9 +84,9 @@ Your workspace is now powered by Nx! You can verify out that your application st
- To build, run `ng build`.
- To run unit tests, run `ng test`.
- To run e2e tests, run `ng e2e`.
- To see your dependency graph, run `nx dep-graph`.
- To see your project graph, run `nx graph`.
> Your dependency graph will grow as you add, and use more applications and libraries. You can add the `--watch` flag to `nx dep-graph` to see this changes in-browser as you add them.
> Your project graph will grow as you add, and use more applications and libraries. You can add the `--watch` flag to `nx graph` to see this changes in-browser as you add them.
Learn more about the advantages of Nx in the following guides:

2
nx-dev/nx-dev/public/documentation/shared/monorepo-tags.md
View File

@ -1,4 +1,4 @@
# Imposing Constraints on the Dependency Graph
# Imposing Constraints on the Project Graph
If you partition your code into well-defined cohesive units, even a small organization will end up with a dozen apps and dozens or hundreds of libs. If all of them can depend on each other freely, the chaos will ensue, and the workspace will become unmanageable.

2
nx-dev/nx-dev/public/documentation/shared/node-tutorial/05-dep-graph.md
View File

@ -1,4 +1,4 @@
# Node Nx Tutorial - Step 5: Dep Graph
# Node Nx Tutorial - Step 5: Project Graph
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/l9MjZ9IPdu4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>

2
nx-dev/nx-dev/public/documentation/shared/node-tutorial/07-test-affected-projects.md
View File

@ -35,7 +35,7 @@ export class AuthController {
}
```
**Run `nx affected:apps`**, and you should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the dependency graph to figure out which apps are affected by this change.
**Run `nx affected:apps`**, and you should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the project graph to figure out which apps are affected by this change.
**Run `nx affected:libs`**, and you should see `auth` printed out. This command works similarly, but instead of printing the affected apps, it prints the affected libs.

2
nx-dev/nx-dev/public/documentation/shared/nx-core.md
View File

@ -158,7 +158,7 @@ elegant way. [Read about the relationship between Nx and Yarn/Lerna/PNPM](/guide
### Nx Understands How Your Workspace Is Structured
If you run `nx dep-graph` you will see that `complex` has a dependency on `simple`. Any change to `simple` will
If you run `nx graph` you will see that `complex` has a dependency on `simple`. Any change to `simple` will
invalidate the computation cache for `complex`, but changes to `complex` won't invalidate the cache for `simple`.
In contrast to more basic monorepo tools, Nx doesn't just analyze `package.json` files. It does much more. Nx also knows

6
nx-dev/nx-dev/public/documentation/shared/react-tutorial/09-dep-graph.md
View File

@ -1,4 +1,4 @@
# React Nx Tutorial - Step 9: Dep Graph
# React Nx Tutorial - Step 9: Project Graph
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/Dr7jI9RYcmY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
@ -11,7 +11,7 @@ With Nx, you can do better than that.
Run
```bash
npx nx dep-graph
npx nx graph
```
The dependency graph page opens in a new browser window. Click on "Show all projects" to see all the apps and libraries in the workspace.
The project graph page opens in a new browser window. Click on "Show all projects" to see all the apps and libraries in the workspace.

2
nx-dev/nx-dev/public/documentation/shared/react-tutorial/11-test-affected-projects.md
View File

@ -35,7 +35,7 @@ export function Todos(props: TodosProps) {
export default Todos;
```
**Run `npx nx affected:apps`**, and you should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the dependency graph to figure out which apps can be affected by this change.
**Run `npx nx affected:apps`**, and you should see `todos` printed out. The `affected:apps` looks at what you have changed and uses the project graph to figure out which apps can be affected by this change.
**Run `npx nx affected:libs`**, and you should see `ui` printed out. This command works similarly, but instead of printing the affected apps, it prints the affected libs.

4
nx-dev/nx-dev/public/documentation/shared/using-nx/affected.md
View File

@ -26,12 +26,12 @@ depend on `lib`, so it will invoke `nx run-many --target=test --projects=app1,ap
Nx analyzes the nature of the changes. For example, if you change the version of Next.js in the package.json, Nx knows
that `app2` cannot be affected by it, so it only retests `app1`.
## Dep Graph
## Project Graph
To visualise what is affected, run:
```bash
nx affected:dep-graph
nx affected:graph
```
## CI

21
nx-dev/nx-dev/public/documentation/shared/using-nx/nx-cli.md
View File

@ -5,8 +5,7 @@
The Nx CLI isn't like most command lines that accomplishes a predefined task. Nx can be configured to work with
different tools and even different languages.
Nx allows you to break up your codebase into different **projects**. The Nx CLI provides commands to operate and manage
the different parts of the codebase. These commands fall into three categories:
Nx allows you to break up your codebase into different **projects**. The Nx CLI provides commands to operate and manage the different parts of the codebase. These commands fall into three categories:
- Acting on code (Build, Test, Serve)
- Modifying code
@ -28,7 +27,7 @@ nx build my-js-app
However, `nx build` is only an abstraction over what it means to "build" projects rather than tied to a certain
implementation. For instance, if you have a `project.json` file defining `build` using
a **[executor](/executors/using-builders)**, that executor will be invoked. If you don't specify an
an **[executor](/executors/using-builders)**, that executor will be invoked. If you don't specify an
executor for the build target, `nx build my-react-app` will invoke the `build` npm script in the project's folder. Every
argument you pass into `run` will be forwarded to the executor or the npm script.
@ -42,7 +41,7 @@ nx run-many --target=build --projects=app1,app2
nx run-many --target=test --all # Runs all projects that have a test target, use this sparingly.
```
The [`nx affected` command](/cli/affected) isolates set projects that may have changed in behavior and
The [`nx affected` command](/cli/affected) isolates the set projects that may have changed in behavior and
runs a target across them. This is more efficient than running all projects every time.
```bash
@ -63,7 +62,7 @@ Again, like `nx run`, `nx generate` is only an abstraction over generating code.
want via **generators**. **[Generators](/generators/using-schematics)** can be installed as part of a
plugin or developed locally within an Nx workspace to fit the needs of your organization.
A [Workspace Generator](/generators/workspace-generators) is a custom generator for your
A [workspace generator](/generators/workspace-generators) is a custom generator for your
workspace. `nx generate workspace-generator my-generator` generates a workspace generator which can be run with
the [`nx workspace-generator` command](/cli/workspace-generator). This can be useful to allow your
organization to consistently generate projects according to your own standards.
@ -84,18 +83,18 @@ nx migrate --run-migrations # Runs the migrations scheduled by the previous comm
## Understanding the codebase
Nx creates and maintains a dependency graph between projects based on import statements in your code and uses that
Nx creates and maintains a project graph between projects based on import statements in your code and uses that
information to run executors only on the [affected](/cli/affected) projects in a codebase. A visual
version of the [project dependency graph](/structure/dependency-graph) is also available to help developers
version of the [project project graph](/structure/dependency-graph) is also available to help developers
understand the architecture of the codebase.
The [`nx dep-graph` command](/cli/dep-graph) displays this dependency graph in a web browser for you to
The [`nx graph` command](/cli/dep-graph) displays this project graph in a web browser for you to
explore.
```bash
nx dep-graph
nx dep-graph --watch # Updates the browser as code is changed
nx affected:dep-graph # Highlights projects which may have changed in behavior
nx graph
nx graph --watch # Updates the browser as code is changed
nx affected:graph # Highlights projects which may have changed in behavior
```
The [`nx list` command](/cli/list) lists the currently installed Nx plugins and other available plugins.

2
nx-dev/nx-dev/public/documentation/shared/workspace/creating-libraries.md
View File

@ -12,7 +12,7 @@ The more granular your libraries are, the more effective `nx affected` and Nx's
### 2. Visualizing Architecture
The `nx dep-graph` command generates a graph of how apps and libraries depend on each other. If most of your code lives in a few giant libraries, this visualization doesn't provide much value. Adding the `--watch` flag to the command will update the visualization in-browser as you make changes.
The `nx graph` command generates a graph of how apps and libraries depend on each other. If most of your code lives in a few giant libraries, this visualization doesn't provide much value. Adding the `--watch` flag to the command will update the visualization in-browser as you make changes.
### 3. Enforcing Constraints

2
nx-dev/nx-dev/public/documentation/shared/workspace/structure/dependency-graph.md
View File

@ -1,6 +1,6 @@
# Analyzing & Visualizing Workspaces
To be able to support the monorepo-style development, the tools must know how different projects in your workspace depend on each other. Nx uses advanced code analysis to construct this dependency graph. And it gives you a way to explore it:
To be able to support the monorepo-style development, the tools must know how different projects in your workspace depend on each other. Nx uses advanced code analysis to construct this project graph. And it gives you a way to explore it:
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/cMZ-ReC-jWU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>

2
nx-dev/ui-home/src/lib/affected-command.tsx
View File

@ -96,7 +96,7 @@ export function AffectedCommand(): ReactComponentElement<any> {
>
<Image
src="/images/nx-affected.webp"
alt="Nx affected dep-graph"
alt="Nx affected graph"
layout={'fixed'}
width={727}
height={482}

4
nx-dev/ui-home/src/lib/dependency-graph.tsx
View File

@ -72,10 +72,10 @@ export function DependencyGraph(): ReactComponentElement<any> {
<motion.div variants={opacityVariant} className="mt-6">
<Link href="/structure/dependency-graph">
<a
title="Nx dep-graph tool to visally interact with monorepo dependencies"
title="Nx graph tool to visally interact with monorepo dependencies"
className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-nx-base hover:bg-blue-nx-dark transition"
>
Learn about "nx dep-graph"
Learn about "nx graph"
</a>
</Link>
</motion.div>

6
packages/angular/src/generators/application/lib/nrwl-home-tpl.ts
View File

@ -744,9 +744,9 @@ nx g @nrwl/angular:component button --project ui</pre>
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
View interactive dependency graph
View interactive project graph
</summary>
<pre>nx dep-graph</pre>
<pre>nx graph</pre>
</details>
<details>
<summary>
@ -766,7 +766,7 @@ nx g @nrwl/angular:component button --project ui</pre>
Run affected commands
</summary>
<pre><span># see what&apos;s been affected by changes</span>
nx affected:dep-graph
nx affected:graph
<span># run tests for current changes</span>
nx affected:test

6
packages/next/src/generators/application/lib/create-application-files.helpers.ts
View File

@ -352,9 +352,9 @@ export function createAppJsx(name: string) {
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
View interactive dependency graph
View interactive project graph
</summary>
<pre>nx dep-graph</pre>
<pre>nx graph</pre>
</details>
<details>
<summary>
@ -375,7 +375,7 @@ export function createAppJsx(name: string) {
</summary>
<pre>
<span># see what&apos;s been affected by changes</span>
nx affected:dep-graph
nx affected:graph
<span># run tests for current changes</span>
nx affected:test
<span># run e2e tests for current changes</span>

6
packages/react-native/src/generators/application/files/app/src/app/App.tsx.template
View File

@ -298,13 +298,13 @@ const App = () => {
<Terminal width={24} height={24} stroke="#000000" />
<View style={styles.listItemTextContainer}>
<Text style={styles.textSm}>
View interactive dependency graph
View interactive project graph
</Text>
</View>
</View>
<View style={[styles.codeBlock, styles.marginBottomLg]}>
<Text style={[styles.textXS, styles.monospace]}>
nx dep-graph
nx graph
</Text>
</View>
<View style={styles.listItem}>
@ -324,7 +324,7 @@ const App = () => {
styles.marginBottomMd,
]}
>
nx affected:dep-graph
nx affected:graph
</Text>
<Text style={[styles.textXS, styles.monospace, styles.comment]}>
# run tests for current changes

6
packages/react/src/generators/application/files/common/src/app/nx-welcome.tsx
View File

@ -763,9 +763,9 @@ export function NxWelcome({ title }: { title: string }) {
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
View interactive dependency graph
View interactive project graph
</summary>
<pre>nx dep-graph</pre>
<pre>nx graph</pre>
</details>
<details>
<summary>
@ -786,7 +786,7 @@ export function NxWelcome({ title }: { title: string }) {
</summary>
<pre>
<span># see what&apos;s been affected by changes</span>
nx affected:dep-graph
nx affected:graph
<span># run tests for current changes</span>
nx affected:test
<span># run e2e tests for current changes</span>

2
packages/tao/src/shared/workspace.ts
View File

@ -97,7 +97,7 @@ export interface ProjectConfiguration {
implicitDependencies?: string[];
/**
* List of tags used by nx-enforce-module-boundaries / dep-graph
* List of tags used by nx-enforce-module-boundaries / project graph
*/
tags?: string[];
}

6
packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__
View File

@ -329,9 +329,9 @@ nx g @nrwl/angular:component button --project ui</pre>
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
View interactive dependency graph
View interactive project graph
</summary>
<pre>nx dep-graph</pre>
<pre>nx graph</pre>
</details>
<details>
<summary>
@ -351,7 +351,7 @@ nx g @nrwl/angular:component button --project ui</pre>
Run affected commands
</summary>
<pre><span># see what&apos;s been affected by changes</span>
nx affected:dep-graph
nx affected:graph
<span># run tests for current changes</span>
nx affected:test

2
packages/workspace/docs/run-commands-examples.md
View File

@ -122,7 +122,7 @@ The above commands will finish immediately, instead of waiting for 5 seconds.
##### Nx Affected
The true power of `run-commands` comes from the fact that it runs through `nx`, which knows about your dependency graph. So you can run **custom commands** only for the projects that have been affected by a change.
The true power of `run-commands` comes from the fact that it runs through `nx`, which knows about your project graph. So you can run **custom commands** only for the projects that have been affected by a change.
We can create some configurations to generate docs, and if run using `nx affected`, it will only generate documentation for the projects that have been changed:

4
packages/workspace/src/command-line/affected.ts
View File

@ -24,7 +24,7 @@ import { performance } from 'perf_hooks';
import type { Environment } from '../core/shared-interfaces';
export async function affected(
command: 'apps' | 'libs' | 'dep-graph' | 'print-affected' | 'affected',
command: 'apps' | 'libs' | 'graph' | 'print-affected' | 'affected',
parsedArgs: yargs.Arguments & RawNxArgs
): Promise<void> {
performance.mark('command-execution-begins');
@ -78,7 +78,7 @@ export async function affected(
}
break;
case 'dep-graph':
case 'graph':
const projectNames = filteredProjects.map((p) => p.name);
await generateGraph(parsedArgs as any, projectNames);
break;

24
packages/workspace/src/command-line/dep-graph.ts
View File

@ -370,7 +370,7 @@ async function startServer(
app.listen(port, host);
output.note({
title: `Dep graph started at http://${host}:${port}`,
title: `Project graph started at http://${host}:${port}`,
});
if (openBrowser) {
@ -416,7 +416,7 @@ function getIgnoredGlobs(root: string) {
function startWatcher() {
createFileWatcher(appRootPath, async () => {
output.note({ title: 'Recalculating dependency graph...' });
output.note({ title: 'Recalculating project graph...' });
const newGraphClientResponse = await createDepGraphClientResponse();
@ -467,12 +467,12 @@ function createFileWatcher(root: string, changeHandler: () => Promise<void>) {
}
async function createDepGraphClientResponse(): Promise<DepGraphClientResponse> {
performance.mark('dep graph watch calculation:start');
performance.mark('project graph watch calculation:start');
await defaultFileHasher.init();
let graph = pruneExternalNodes(await createProjectGraphAsync());
performance.mark('dep graph watch calculation:end');
performance.mark('dep graph response generation:start');
performance.mark('project graph watch calculation:end');
performance.mark('project graph response generation:start');
const layout = workspaceLayout();
const projects: ProjectGraphProjectNode[] = Object.values(graph.nodes).map(
@ -495,18 +495,18 @@ async function createDepGraphClientResponse(): Promise<DepGraphClientResponse> {
const hash = hasher.digest('hex');
performance.mark('dep graph response generation:end');
performance.mark('project graph response generation:end');
performance.measure(
'dep graph watch calculation',
'dep graph watch calculation:start',
'dep graph watch calculation:end'
'project graph watch calculation',
'project graph watch calculation:start',
'project graph watch calculation:end'
);
performance.measure(
'dep graph response generation',
'dep graph response generation:start',
'dep graph response generation:end'
'project graph response generation',
'project graph response generation:start',
'project graph response generation:end'
);
return {

58
packages/workspace/src/command-line/examples.ts
View File

@ -8,7 +8,7 @@ export const examples: Record<string, Example[]> = {
{
command: 'print-affected',
description:
'Print information about affected projects and the dependency graph',
'Print information about affected projects and the project graph',
},
{
command: 'print-affected --base=main --head=HEAD',
@ -196,74 +196,74 @@ export const examples: Record<string, Example[]> = {
],
'format:write': [],
'format:check': [],
'dep-graph': [
graph: [
{
command: 'dep-graph',
description: 'Open the dep graph of the workspace in the browser',
command: 'graph',
description: 'Open the project graph of the workspace in the browser',
},
{
command: 'dep-graph --file=output.json',
description: 'Save the dep graph into a json file',
command: 'graph --file=output.json',
description: 'Save the project graph into a json file',
},
{
command: 'dep-graph --file=output.html',
command: 'graph --file=output.html',
description:
'Generate a static website with dep graph into an html file, accompanied by an asset folder called static',
'Generate a static website with project graph into an html file, accompanied by an asset folder called static',
},
{
command: 'dep-graph --focus=todos-feature-main',
command: 'graph --focus=todos-feature-main',
description:
'Show the graph where every node is either an ancestor or a descendant of todos-feature-main',
},
{
command: 'dep-graph --include=project-one,project-two',
description: 'Include project-one and project-two in the dep graph',
command: 'graph --include=project-one,project-two',
description: 'Include project-one and project-two in the project graph',
},
{
command: 'dep-graph --exclude=project-one,project-two',
description: 'Exclude project-one and project-two from the dep graph',
command: 'graph --exclude=project-one,project-two',
description: 'Exclude project-one and project-two from the project graph',
},
{
command:
'dep-graph --focus=todos-feature-main --exclude=project-one,project-two',
'graph --focus=todos-feature-main --exclude=project-one,project-two',
description:
'Show the graph where every node is either an ancestor or a descendant of todos-feature-main, but exclude project-one and project-two',
},
{
command: 'dep-graph --watch',
description: 'Watch for changes to dep graph and update in-browser',
command: 'graph --watch',
description: 'Watch for changes to project graph and update in-browser',
},
],
'affected:dep-graph': [
'affected:graph': [
{
command: 'affected:dep-graph --files=libs/mylib/src/index.ts',
command: 'affected:graph --files=libs/mylib/src/index.ts',
description:
'Open the dep graph of the workspace in the browser, and highlight the projects affected by changing the index.ts file',
'Open the project graph of the workspace in the browser, and highlight the projects affected by changing the index.ts file',
},
{
command: 'affected:dep-graph --base=main --head=HEAD',
command: 'affected:graph --base=main --head=HEAD',
description:
'Open the dep graph of the workspace in the browser, and highlight the projects affected by the changes between main and HEAD (e.g., PR)',
'Open the project graph of the workspace in the browser, and highlight the projects affected by the changes between main and HEAD (e.g., PR)',
},
{
command: 'affected:dep-graph --base=main --head=HEAD --file=output.json',
command: 'affected:graph --base=main --head=HEAD --file=output.json',
description:
'Save the dep graph of the workspace in a json file, and highlight the projects affected by the changes between main and HEAD (e.g., PR)',
'Save the project graph of the workspace in a json file, and highlight the projects affected by the changes between main and HEAD (e.g., PR)',
},
{
command: 'affected:dep-graph --base=main --head=HEAD --file=output.html',
command: 'affected:graph --base=main --head=HEAD --file=output.html',
description:
'Generate a static website with dep graph data in an html file, highlighting the projects affected by the changes between main and HEAD (e.g., PR)',
'Generate a static website with project graph data in an html file, highlighting the projects affected by the changes between main and HEAD (e.g., PR)',
},
{
command: 'affected:dep-graph --base=main~1 --head=main',
command: 'affected:graph --base=main~1 --head=main',
description:
'Open the dep graph of the workspace in the browser, and highlight the projects affected by the last commit on main',
'Open the project graph of the workspace in the browser, and highlight the projects affected by the last commit on main',
},
{
command: 'affected:dep-graph --exclude=project-one,project-two',
command: 'affected:graph --exclude=project-one,project-two',
description:
'Open the dep graph of the workspace in the browser, highlight the projects affected, but exclude project-one and project-two',
'Open the project graph of the workspace in the browser, highlight the projects affected, but exclude project-one and project-two',
},
],
'workspace-generator': [],

50
packages/workspace/src/command-line/nx-commands.ts
View File

@ -150,19 +150,22 @@ ${daemonHelpOutput}
target: 'e2e',
})
)
.command(
'affected:dep-graph',
chalk.bold('Graph dependencies affected by changes'),
(yargs) =>
.command({
command: 'affected:graph',
describe: chalk.bold(
'Graph dependencies affected by changes. Alias: affected:dep-graph'
),
aliases: ['affected:dep-graph'],
builder: (yargs) =>
linkToNxDevAndExamples(
withAffectedOptions(withDepGraphOptions(yargs)),
'affected:dep-graph'
'affected:graph'
),
async (args) =>
(await import('./affected')).affected('dep-graph', {
handler: async (args) =>
(await import('./affected')).affected('graph', {
...args,
}),
})
)
.command(
'print-affected',
chalk.bold(
@ -207,12 +210,17 @@ npx nx daemon
async (args) => (await import('./daemon')).daemonHandler(args)
)
.command(
'dep-graph',
chalk.bold('Graph dependencies within workspace'),
(yargs) => linkToNxDevAndExamples(withDepGraphOptions(yargs), 'dep-graph'),
async (args) => (await import('./dep-graph')).generateGraph(args as any, [])
)
.command({
command: 'graph',
describe: chalk.bold(
'Graph dependencies within workspace. Alias: dep-graph'
),
aliases: ['dep-graph'],
builder: (yargs) =>
linkToNxDevAndExamples(withDepGraphOptions(yargs), 'dep-graph'),
handler: async (args) =>
(await import('./dep-graph')).generateGraph(args as any, []),
})
.command(
'format:check',
@ -517,34 +525,34 @@ function withDepGraphOptions(yargs: yargs.Argv): yargs.Argv {
})
.option('focus', {
describe:
'Use to show the dependency graph for a particular project and every node that is either an ancestor or a descendant.',
'Use to show the project graph for a particular project and every node that is either an ancestor or a descendant.',
type: 'string',
})
.option('exclude', {
describe:
'List of projects delimited by commas to exclude from the dependency graph.',
'List of projects delimited by commas to exclude from the project graph.',
type: 'array',
coerce: parseCSV,
})
.option('groupByFolder', {
describe: 'Group projects by folder in the dependency graph',
describe: 'Group projects by folder in the project graph',
type: 'boolean',
})
.option('host', {
describe: 'Bind the dependency graph server to a specific ip address.',
describe: 'Bind the project graph server to a specific ip address.',
type: 'string',
})
.option('port', {
describe: 'Bind the dependency graph server to a specific port.',
describe: 'Bind the project graph server to a specific port.',
type: 'number',
})
.option('watch', {
describe: 'Watch for changes to dependency graph and update in-browser',
describe: 'Watch for changes to project graph and update in-browser',
type: 'boolean',
default: false,
})
.option('open', {
describe: 'Open the dependency graph in the browser.',
describe: 'Open the project graph in the browser.',
type: 'boolean',
default: true,
});

2
packages/workspace/src/command-line/supported-nx-commands.ts
View File

@ -6,10 +6,12 @@ export const supportedNxCommands: string[] = [
'affected:test',
'affected:e2e',
'affected:dep-graph',
'affected:graph',
'affected:lint',
'print-affected',
'daemon',
'dep-graph',
'graph',
'format',
'format:check',
'format:write',

4
packages/workspace/src/generators/init/init.ts
View File

@ -46,7 +46,7 @@ function updatePackageJson(tree) {
'affected:e2e': 'nx affected:e2e',
'affected:test': 'nx affected:test',
'affected:lint': 'nx affected:lint',
'affected:dep-graph': 'nx affected:dep-graph',
'affected:graph': 'nx affected:graph',
affected: 'nx affected',
format: 'nx format:write',
'format:write': 'nx format:write',
@ -54,7 +54,7 @@ function updatePackageJson(tree) {
update: 'ng update @nrwl/workspace',
'update:check': 'ng update',
lint: 'nx workspace-lint && ng lint',
'dep-graph': 'nx dep-graph',
graph: 'nx graph',
'workspace-schematic': 'nx workspace-schematic',
help: 'nx help',
};

4
packages/workspace/src/generators/workspace/files/README.md__tmpl__
View File

@ -81,7 +81,7 @@ Run `nx affected:e2e` to execute the end-to-end tests affected by a change.
## Understand your workspace
Run `nx dep-graph` to see a diagram of the dependencies of your projects.
Run `nx graph` to see a diagram of the dependencies of your projects.
## Further help
@ -165,7 +165,7 @@ Run `nx affected:e2e` to execute the end-to-end tests affected by a change.
## Understand your workspace
Run `nx dep-graph` to see a diagram of the dependencies of your projects.
Run `nx graph` to see a diagram of the dependencies of your projects.
## Further help

2
scripts/copy-dep-graph-environment.ts
View File

@ -4,7 +4,7 @@ import { argv } from 'yargs';
type Mode = 'dev' | 'watch';
const mode = argv._[0];
console.log(`Setting up dep-graph for ${mode}`);
console.log(`Setting up graph for ${mode}`);
copyFileSync(
`dep-graph/client/src/assets/environment.${mode}.js`,