diff --git a/dep-graph/client/src/app/sidebar/sidebar.tsx b/dep-graph/client/src/app/sidebar/sidebar.tsx index b2e11d79f1..8e932a4a38 100644 --- a/dep-graph/client/src/app/sidebar/sidebar.tsx +++ b/dep-graph/client/src/app/sidebar/sidebar.tsx @@ -103,7 +103,7 @@ export function Sidebar() { Nx - Dependency Graph + Project Graph diff --git a/dep-graph/client/src/index.html b/dep-graph/client/src/index.html index 571eaa5db8..5a1b3da9c8 100644 --- a/dep-graph/client/src/index.html +++ b/dep-graph/client/src/index.html @@ -2,7 +2,7 @@ - Nx Workspace Dependency Graph + Nx Workspace Project Graph diff --git a/docs/generated/api-workspace/executors/run-commands.md b/docs/generated/api-workspace/executors/run-commands.md index 0f50b28e11..e768aa54b4 100644 --- a/docs/generated/api-workspace/executors/run-commands.md +++ b/docs/generated/api-workspace/executors/run-commands.md @@ -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: diff --git a/docs/generated/cli/affected-dep-graph.md b/docs/generated/cli/affected-dep-graph.md deleted file mode 100644 index 0d89f2af21..0000000000 --- a/docs/generated/cli/affected-dep-graph.md +++ /dev/null @@ -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 diff --git a/docs/generated/cli/affected-graph.md b/docs/generated/cli/affected-graph.md new file mode 100644 index 0000000000..dcb52e3851 --- /dev/null +++ b/docs/generated/cli/affected-graph.md @@ -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 diff --git a/docs/generated/cli/dep-graph.md b/docs/generated/cli/dep-graph.md deleted file mode 100644 index 0262baa1fd..0000000000 --- a/docs/generated/cli/dep-graph.md +++ /dev/null @@ -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 diff --git a/docs/generated/cli/graph.md b/docs/generated/cli/graph.md new file mode 100644 index 0000000000..9c77a9a4a7 --- /dev/null +++ b/docs/generated/cli/graph.md @@ -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 diff --git a/docs/generated/cli/print-affected.md b/docs/generated/cli/print-affected.md index a3fbe641e7..d7c22074dc 100644 --- a/docs/generated/cli/print-affected.md +++ b/docs/generated/cli/print-affected.md @@ -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 diff --git a/docs/map.json b/docs/map.json index 06bd305f50..efbe908a46 100644 --- a/docs/map.json +++ b/docs/map.json @@ -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" }, diff --git a/docs/shared/angular-tutorial/08-create-libs.md b/docs/shared/angular-tutorial/08-create-libs.md index af7986cec2..6492079623 100644 --- a/docs/shared/angular-tutorial/08-create-libs.md +++ b/docs/shared/angular-tutorial/08-create-libs.md @@ -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) diff --git a/docs/shared/angular-tutorial/09-dep-graph.md b/docs/shared/angular-tutorial/09-dep-graph.md index 1374169100..f263a020b7 100644 --- a/docs/shared/angular-tutorial/09-dep-graph.md +++ b/docs/shared/angular-tutorial/09-dep-graph.md @@ -1,4 +1,4 @@ -# Angular Nx Tutorial - Step 9: Using the Depedency Graph +# Angular Nx Tutorial - Step 9: Using the Project Graph @@ -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 diff --git a/docs/shared/angular-tutorial/11-test-affected-projects.md b/docs/shared/angular-tutorial/11-test-affected-projects.md index 755ba4d47b..550b95fa45 100644 --- a/docs/shared/angular-tutorial/11-test-affected-projects.md +++ b/docs/shared/angular-tutorial/11-test-affected-projects.md @@ -2,7 +2,7 @@ -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 diff --git a/docs/shared/configuration/projectjson.md b/docs/shared/configuration/projectjson.md index 75b4af066c..73779e6b11 100644 --- a/docs/shared/configuration/projectjson.md +++ b/docs/shared/configuration/projectjson.md @@ -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 diff --git a/docs/shared/devkit-and-nx-plugins.md b/docs/shared/devkit-and-nx-plugins.md index 5d7e653300..cc89f823c0 100644 --- a/docs/shared/devkit-and-nx-plugins.md +++ b/docs/shared/devkit-and-nx-plugins.md @@ -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** diff --git a/docs/shared/guides/nextjs.md b/docs/shared/guides/nextjs.md index a762136b8d..3567b61535 100644 --- a/docs/shared/guides/nextjs.md +++ b/docs/shared/guides/nextjs.md @@ -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). diff --git a/docs/shared/guides/react-native.md b/docs/shared/guides/react-native.md index 884ae3117c..629e1f7733 100644 --- a/docs/shared/guides/react-native.md +++ b/docs/shared/guides/react-native.md @@ -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). diff --git a/docs/shared/guides/turbo-and-nx.md b/docs/shared/guides/turbo-and-nx.md index a7658d05ff..0d6eaeeae1 100644 --- a/docs/shared/guides/turbo-and-nx.md +++ b/docs/shared/guides/turbo-and-nx.md @@ -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. diff --git a/docs/shared/guides/using-tailwind-css-in-react.md b/docs/shared/guides/using-tailwind-css-in-react.md index 117e1a2737..3c294a02e5 100644 --- a/docs/shared/guides/using-tailwind-css-in-react.md +++ b/docs/shared/guides/using-tailwind-css-in-react.md @@ -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'); diff --git a/docs/shared/migration/adding-to-monorepo.md b/docs/shared/migration/adding-to-monorepo.md index 568e5627a2..d088feb109 100644 --- a/docs/shared/migration/adding-to-monorepo.md +++ b/docs/shared/migration/adding-to-monorepo.md @@ -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. diff --git a/docs/shared/migration/manual.md b/docs/shared/migration/manual.md index d1b53e9d85..268eecac29 100644 --- a/docs/shared/migration/manual.md +++ b/docs/shared/migration/manual.md @@ -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 diff --git a/docs/shared/migration/migration-angular.md b/docs/shared/migration/migration-angular.md index 7ba3758d48..84bf565440 100644 --- a/docs/shared/migration/migration-angular.md +++ b/docs/shared/migration/migration-angular.md @@ -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: diff --git a/docs/shared/monorepo-tags.md b/docs/shared/monorepo-tags.md index 2d33e4063c..9570f78d09 100644 --- a/docs/shared/monorepo-tags.md +++ b/docs/shared/monorepo-tags.md @@ -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. diff --git a/docs/shared/node-tutorial/05-dep-graph.md b/docs/shared/node-tutorial/05-dep-graph.md index 1b567080c5..f247f5a31f 100644 --- a/docs/shared/node-tutorial/05-dep-graph.md +++ b/docs/shared/node-tutorial/05-dep-graph.md @@ -1,4 +1,4 @@ -# Node Nx Tutorial - Step 5: Dep Graph +# Node Nx Tutorial - Step 5: Project Graph diff --git a/docs/shared/node-tutorial/07-test-affected-projects.md b/docs/shared/node-tutorial/07-test-affected-projects.md index d8555e7e81..ea512a2538 100644 --- a/docs/shared/node-tutorial/07-test-affected-projects.md +++ b/docs/shared/node-tutorial/07-test-affected-projects.md @@ -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. diff --git a/docs/shared/nx-core.md b/docs/shared/nx-core.md index 07ee17aa86..33354ef14b 100644 --- a/docs/shared/nx-core.md +++ b/docs/shared/nx-core.md @@ -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 diff --git a/docs/shared/react-tutorial/09-dep-graph.md b/docs/shared/react-tutorial/09-dep-graph.md index fef2e7ae7f..cf865fd73e 100644 --- a/docs/shared/react-tutorial/09-dep-graph.md +++ b/docs/shared/react-tutorial/09-dep-graph.md @@ -1,4 +1,4 @@ -# React Nx Tutorial - Step 9: Dep Graph +# React Nx Tutorial - Step 9: Project Graph @@ -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. diff --git a/docs/shared/react-tutorial/11-test-affected-projects.md b/docs/shared/react-tutorial/11-test-affected-projects.md index 1e5dfae134..6749fa34c0 100644 --- a/docs/shared/react-tutorial/11-test-affected-projects.md +++ b/docs/shared/react-tutorial/11-test-affected-projects.md @@ -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. diff --git a/docs/shared/using-nx/affected.md b/docs/shared/using-nx/affected.md index 2582b10bf3..cfa38b78a4 100644 --- a/docs/shared/using-nx/affected.md +++ b/docs/shared/using-nx/affected.md @@ -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 diff --git a/docs/shared/using-nx/nx-cli.md b/docs/shared/using-nx/nx-cli.md index a38978faba..ed1df0bb74 100644 --- a/docs/shared/using-nx/nx-cli.md +++ b/docs/shared/using-nx/nx-cli.md @@ -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. diff --git a/docs/shared/workspace/creating-libraries.md b/docs/shared/workspace/creating-libraries.md index ffd8f321d4..ce4b03c3e8 100644 --- a/docs/shared/workspace/creating-libraries.md +++ b/docs/shared/workspace/creating-libraries.md @@ -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 diff --git a/docs/shared/workspace/structure/dependency-graph.md b/docs/shared/workspace/structure/dependency-graph.md index 0689f5b90a..b63c74b51a 100644 --- a/docs/shared/workspace/structure/dependency-graph.md +++ b/docs/shared/workspace/structure/dependency-graph.md @@ -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: diff --git a/e2e/angular-core/src/ng-add.test.ts b/e2e/angular-core/src/ng-add.test.ts index 1704e18ae1..fc3feb72f7 100644 --- a/e2e/angular-core/src/ng-add.test.ts +++ b/e2e/angular-core/src/ng-add.test.ts @@ -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', }); diff --git a/nx-dev/feature-conf/src/lib/conf-schedule.tsx b/nx-dev/feature-conf/src/lib/conf-schedule.tsx index 482c0b479c..811ccbf6ff 100644 --- a/nx-dev/feature-conf/src/lib/conf-schedule.tsx +++ b/nx-dev/feature-conf/src/lib/conf-schedule.tsx @@ -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.`, diff --git a/nx-dev/nx-dev/public/documentation/generated/api-workspace/executors/run-commands.md b/nx-dev/nx-dev/public/documentation/generated/api-workspace/executors/run-commands.md index 0f50b28e11..e768aa54b4 100644 --- a/nx-dev/nx-dev/public/documentation/generated/api-workspace/executors/run-commands.md +++ b/nx-dev/nx-dev/public/documentation/generated/api-workspace/executors/run-commands.md @@ -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: diff --git a/nx-dev/nx-dev/public/documentation/generated/cli/affected-dep-graph.md b/nx-dev/nx-dev/public/documentation/generated/cli/affected-dep-graph.md deleted file mode 100644 index 0d89f2af21..0000000000 --- a/nx-dev/nx-dev/public/documentation/generated/cli/affected-dep-graph.md +++ /dev/null @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/generated/cli/affected-graph.md b/nx-dev/nx-dev/public/documentation/generated/cli/affected-graph.md new file mode 100644 index 0000000000..dcb52e3851 --- /dev/null +++ b/nx-dev/nx-dev/public/documentation/generated/cli/affected-graph.md @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/generated/cli/dep-graph.md b/nx-dev/nx-dev/public/documentation/generated/cli/dep-graph.md deleted file mode 100644 index 0262baa1fd..0000000000 --- a/nx-dev/nx-dev/public/documentation/generated/cli/dep-graph.md +++ /dev/null @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/generated/cli/graph.md b/nx-dev/nx-dev/public/documentation/generated/cli/graph.md new file mode 100644 index 0000000000..9c77a9a4a7 --- /dev/null +++ b/nx-dev/nx-dev/public/documentation/generated/cli/graph.md @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/generated/cli/print-affected.md b/nx-dev/nx-dev/public/documentation/generated/cli/print-affected.md index a3fbe641e7..d7c22074dc 100644 --- a/nx-dev/nx-dev/public/documentation/generated/cli/print-affected.md +++ b/nx-dev/nx-dev/public/documentation/generated/cli/print-affected.md @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/map.json b/nx-dev/nx-dev/public/documentation/map.json index 06bd305f50..efbe908a46 100644 --- a/nx-dev/nx-dev/public/documentation/map.json +++ b/nx-dev/nx-dev/public/documentation/map.json @@ -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" }, diff --git a/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/08-create-libs.md b/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/08-create-libs.md index af7986cec2..6492079623 100644 --- a/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/08-create-libs.md +++ b/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/08-create-libs.md @@ -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) diff --git a/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/09-dep-graph.md b/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/09-dep-graph.md index 1374169100..f263a020b7 100644 --- a/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/09-dep-graph.md +++ b/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/09-dep-graph.md @@ -1,4 +1,4 @@ -# Angular Nx Tutorial - Step 9: Using the Depedency Graph +# Angular Nx Tutorial - Step 9: Using the Project Graph @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/11-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/11-test-affected-projects.md index 755ba4d47b..550b95fa45 100644 --- a/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/11-test-affected-projects.md +++ b/nx-dev/nx-dev/public/documentation/shared/angular-tutorial/11-test-affected-projects.md @@ -2,7 +2,7 @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/shared/configuration/projectjson.md b/nx-dev/nx-dev/public/documentation/shared/configuration/projectjson.md index 75b4af066c..73779e6b11 100644 --- a/nx-dev/nx-dev/public/documentation/shared/configuration/projectjson.md +++ b/nx-dev/nx-dev/public/documentation/shared/configuration/projectjson.md @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/shared/devkit-and-nx-plugins.md b/nx-dev/nx-dev/public/documentation/shared/devkit-and-nx-plugins.md index 5d7e653300..cc89f823c0 100644 --- a/nx-dev/nx-dev/public/documentation/shared/devkit-and-nx-plugins.md +++ b/nx-dev/nx-dev/public/documentation/shared/devkit-and-nx-plugins.md @@ -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** diff --git a/nx-dev/nx-dev/public/documentation/shared/guides/nextjs.md b/nx-dev/nx-dev/public/documentation/shared/guides/nextjs.md index a762136b8d..3567b61535 100644 --- a/nx-dev/nx-dev/public/documentation/shared/guides/nextjs.md +++ b/nx-dev/nx-dev/public/documentation/shared/guides/nextjs.md @@ -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). diff --git a/nx-dev/nx-dev/public/documentation/shared/guides/react-native.md b/nx-dev/nx-dev/public/documentation/shared/guides/react-native.md index 884ae3117c..629e1f7733 100644 --- a/nx-dev/nx-dev/public/documentation/shared/guides/react-native.md +++ b/nx-dev/nx-dev/public/documentation/shared/guides/react-native.md @@ -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). diff --git a/nx-dev/nx-dev/public/documentation/shared/guides/turbo-and-nx.md b/nx-dev/nx-dev/public/documentation/shared/guides/turbo-and-nx.md index a7658d05ff..0d6eaeeae1 100644 --- a/nx-dev/nx-dev/public/documentation/shared/guides/turbo-and-nx.md +++ b/nx-dev/nx-dev/public/documentation/shared/guides/turbo-and-nx.md @@ -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. diff --git a/nx-dev/nx-dev/public/documentation/shared/guides/using-tailwind-css-in-react.md b/nx-dev/nx-dev/public/documentation/shared/guides/using-tailwind-css-in-react.md index 117e1a2737..3c294a02e5 100644 --- a/nx-dev/nx-dev/public/documentation/shared/guides/using-tailwind-css-in-react.md +++ b/nx-dev/nx-dev/public/documentation/shared/guides/using-tailwind-css-in-react.md @@ -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'); diff --git a/nx-dev/nx-dev/public/documentation/shared/migration/adding-to-monorepo.md b/nx-dev/nx-dev/public/documentation/shared/migration/adding-to-monorepo.md index 568e5627a2..d088feb109 100644 --- a/nx-dev/nx-dev/public/documentation/shared/migration/adding-to-monorepo.md +++ b/nx-dev/nx-dev/public/documentation/shared/migration/adding-to-monorepo.md @@ -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. diff --git a/nx-dev/nx-dev/public/documentation/shared/migration/manual.md b/nx-dev/nx-dev/public/documentation/shared/migration/manual.md index d1b53e9d85..268eecac29 100644 --- a/nx-dev/nx-dev/public/documentation/shared/migration/manual.md +++ b/nx-dev/nx-dev/public/documentation/shared/migration/manual.md @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/shared/migration/migration-angular.md b/nx-dev/nx-dev/public/documentation/shared/migration/migration-angular.md index 7ba3758d48..84bf565440 100644 --- a/nx-dev/nx-dev/public/documentation/shared/migration/migration-angular.md +++ b/nx-dev/nx-dev/public/documentation/shared/migration/migration-angular.md @@ -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: diff --git a/nx-dev/nx-dev/public/documentation/shared/monorepo-tags.md b/nx-dev/nx-dev/public/documentation/shared/monorepo-tags.md index 2d33e4063c..9570f78d09 100644 --- a/nx-dev/nx-dev/public/documentation/shared/monorepo-tags.md +++ b/nx-dev/nx-dev/public/documentation/shared/monorepo-tags.md @@ -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. diff --git a/nx-dev/nx-dev/public/documentation/shared/node-tutorial/05-dep-graph.md b/nx-dev/nx-dev/public/documentation/shared/node-tutorial/05-dep-graph.md index 1b567080c5..f247f5a31f 100644 --- a/nx-dev/nx-dev/public/documentation/shared/node-tutorial/05-dep-graph.md +++ b/nx-dev/nx-dev/public/documentation/shared/node-tutorial/05-dep-graph.md @@ -1,4 +1,4 @@ -# Node Nx Tutorial - Step 5: Dep Graph +# Node Nx Tutorial - Step 5: Project Graph diff --git a/nx-dev/nx-dev/public/documentation/shared/node-tutorial/07-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/shared/node-tutorial/07-test-affected-projects.md index d8555e7e81..ea512a2538 100644 --- a/nx-dev/nx-dev/public/documentation/shared/node-tutorial/07-test-affected-projects.md +++ b/nx-dev/nx-dev/public/documentation/shared/node-tutorial/07-test-affected-projects.md @@ -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. diff --git a/nx-dev/nx-dev/public/documentation/shared/nx-core.md b/nx-dev/nx-dev/public/documentation/shared/nx-core.md index 8bc8b5e2a4..ce9fe84973 100644 --- a/nx-dev/nx-dev/public/documentation/shared/nx-core.md +++ b/nx-dev/nx-dev/public/documentation/shared/nx-core.md @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/shared/react-tutorial/09-dep-graph.md b/nx-dev/nx-dev/public/documentation/shared/react-tutorial/09-dep-graph.md index fef2e7ae7f..cf865fd73e 100644 --- a/nx-dev/nx-dev/public/documentation/shared/react-tutorial/09-dep-graph.md +++ b/nx-dev/nx-dev/public/documentation/shared/react-tutorial/09-dep-graph.md @@ -1,4 +1,4 @@ -# React Nx Tutorial - Step 9: Dep Graph +# React Nx Tutorial - Step 9: Project Graph @@ -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. diff --git a/nx-dev/nx-dev/public/documentation/shared/react-tutorial/11-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/shared/react-tutorial/11-test-affected-projects.md index 1e5dfae134..6749fa34c0 100644 --- a/nx-dev/nx-dev/public/documentation/shared/react-tutorial/11-test-affected-projects.md +++ b/nx-dev/nx-dev/public/documentation/shared/react-tutorial/11-test-affected-projects.md @@ -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. diff --git a/nx-dev/nx-dev/public/documentation/shared/using-nx/affected.md b/nx-dev/nx-dev/public/documentation/shared/using-nx/affected.md index 2582b10bf3..cfa38b78a4 100644 --- a/nx-dev/nx-dev/public/documentation/shared/using-nx/affected.md +++ b/nx-dev/nx-dev/public/documentation/shared/using-nx/affected.md @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/shared/using-nx/nx-cli.md b/nx-dev/nx-dev/public/documentation/shared/using-nx/nx-cli.md index a38978faba..6b0182d12c 100644 --- a/nx-dev/nx-dev/public/documentation/shared/using-nx/nx-cli.md +++ b/nx-dev/nx-dev/public/documentation/shared/using-nx/nx-cli.md @@ -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. diff --git a/nx-dev/nx-dev/public/documentation/shared/workspace/creating-libraries.md b/nx-dev/nx-dev/public/documentation/shared/workspace/creating-libraries.md index ffd8f321d4..ce4b03c3e8 100644 --- a/nx-dev/nx-dev/public/documentation/shared/workspace/creating-libraries.md +++ b/nx-dev/nx-dev/public/documentation/shared/workspace/creating-libraries.md @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/shared/workspace/structure/dependency-graph.md b/nx-dev/nx-dev/public/documentation/shared/workspace/structure/dependency-graph.md index 0689f5b90a..b63c74b51a 100644 --- a/nx-dev/nx-dev/public/documentation/shared/workspace/structure/dependency-graph.md +++ b/nx-dev/nx-dev/public/documentation/shared/workspace/structure/dependency-graph.md @@ -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: diff --git a/nx-dev/ui-home/src/lib/affected-command.tsx b/nx-dev/ui-home/src/lib/affected-command.tsx index 794d731ded..4170f6274c 100644 --- a/nx-dev/ui-home/src/lib/affected-command.tsx +++ b/nx-dev/ui-home/src/lib/affected-command.tsx @@ -96,7 +96,7 @@ export function AffectedCommand(): ReactComponentElement { > Nx affected dep-graph { - Learn about "nx dep-graph" + Learn about "nx graph" diff --git a/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts b/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts index dabe84ec8f..e9cf4ff60f 100644 --- a/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts +++ b/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts @@ -744,9 +744,9 @@ nx g @nrwl/angular:component button --project ui 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" /> - View interactive dependency graph + View interactive project graph - 
nx dep-graph
+ 
nx graph
@@ -766,7 +766,7 @@ nx g @nrwl/angular:component button --project ui Run affected commands 
# see what's been affected by changes
-nx affected:dep-graph
+nx affected:graph
 
 # run tests for current changes
 nx affected:test
diff --git a/packages/next/src/generators/application/lib/create-application-files.helpers.ts b/packages/next/src/generators/application/lib/create-application-files.helpers.ts
index 4cfe5ff453..6150fb1908 100644
--- a/packages/next/src/generators/application/lib/create-application-files.helpers.ts
+++ b/packages/next/src/generators/application/lib/create-application-files.helpers.ts
@@ -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"
                 />
               
-              View interactive dependency graph
+              View interactive project graph
             
-            
nx dep-graph

+            
nx graph
@@ -375,7 +375,7 @@ export function createAppJsx(name: string) { 
               # see what's been affected by changes
-              nx affected:dep-graph
+              nx affected:graph
               # run tests for current changes
               nx affected:test
               # run e2e tests for current changes
diff --git a/packages/react-native/src/generators/application/files/app/src/app/App.tsx.template b/packages/react-native/src/generators/application/files/app/src/app/App.tsx.template
index cecd30c78e..d039996946 100644
--- a/packages/react-native/src/generators/application/files/app/src/app/App.tsx.template
+++ b/packages/react-native/src/generators/application/files/app/src/app/App.tsx.template
@@ -298,13 +298,13 @@ const App = () => {
                 
                 
                   
-                    View interactive dependency graph
+                    View interactive project graph
                   
                 
               
               
                 
-                  nx dep-graph
+                  nx graph
                 
               
               
@@ -324,7 +324,7 @@ const App = () => {
                     styles.marginBottomMd,
                   ]}
                 >
-                  nx affected:dep-graph
+                  nx affected:graph
                 
                 
                   # run tests for current changes
diff --git a/packages/react/src/generators/application/files/common/src/app/nx-welcome.tsx b/packages/react/src/generators/application/files/common/src/app/nx-welcome.tsx
index 914eaabfbc..6278272a11 100644
--- a/packages/react/src/generators/application/files/common/src/app/nx-welcome.tsx
+++ b/packages/react/src/generators/application/files/common/src/app/nx-welcome.tsx
@@ -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"
                   />
                 
-                View interactive dependency graph
+                View interactive project graph
               
-              
nx dep-graph

+              
nx graph
@@ -786,7 +786,7 @@ export function NxWelcome({ title }: { title: string }) { 
                 # see what's been affected by changes
-                nx affected:dep-graph
+                nx affected:graph
                 # run tests for current changes
                 nx affected:test
                 # run e2e tests for current changes
diff --git a/packages/tao/src/shared/workspace.ts b/packages/tao/src/shared/workspace.ts
index 0a25bb07a6..f270f87f5e 100644
--- a/packages/tao/src/shared/workspace.ts
+++ b/packages/tao/src/shared/workspace.ts
@@ -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[];
 }
diff --git a/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__ b/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__
index 0ccf6a8920..3066f1f7f2 100644
--- a/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__
+++ b/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__
@@ -329,9 +329,9 @@ nx g @nrwl/angular:component button --project ui
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" /> - View interactive dependency graph + View interactive project graph - 
nx dep-graph
+ 
nx graph
@@ -351,7 +351,7 @@ nx g @nrwl/angular:component button --project ui Run affected commands 
# see what's been affected by changes
-nx affected:dep-graph
+nx affected:graph
 
 # run tests for current changes
 nx affected:test
diff --git a/packages/workspace/docs/run-commands-examples.md b/packages/workspace/docs/run-commands-examples.md
index be94e0208c..372b433b4b 100644
--- a/packages/workspace/docs/run-commands-examples.md
+++ b/packages/workspace/docs/run-commands-examples.md
@@ -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:
 
diff --git a/packages/workspace/src/command-line/affected.ts b/packages/workspace/src/command-line/affected.ts
index e96614c1eb..480ace04aa 100644
--- a/packages/workspace/src/command-line/affected.ts
+++ b/packages/workspace/src/command-line/affected.ts
@@ -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 {
   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;
diff --git a/packages/workspace/src/command-line/dep-graph.ts b/packages/workspace/src/command-line/dep-graph.ts
index 1bdb68c8df..3c514f5210 100644
--- a/packages/workspace/src/command-line/dep-graph.ts
+++ b/packages/workspace/src/command-line/dep-graph.ts
@@ -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) {
 }
 
 async function createDepGraphClientResponse(): Promise {
-  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 {
 
   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 {
diff --git a/packages/workspace/src/command-line/examples.ts b/packages/workspace/src/command-line/examples.ts
index 527c74c721..8fba4c4db7 100644
--- a/packages/workspace/src/command-line/examples.ts
+++ b/packages/workspace/src/command-line/examples.ts
@@ -8,7 +8,7 @@ export const examples: Record = {
     {
       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 = {
   ],
   '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': [],
diff --git a/packages/workspace/src/command-line/nx-commands.ts b/packages/workspace/src/command-line/nx-commands.ts
index 487c51df2f..59e207cc99 100644
--- a/packages/workspace/src/command-line/nx-commands.ts
+++ b/packages/workspace/src/command-line/nx-commands.ts
@@ -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,
     });
diff --git a/packages/workspace/src/command-line/supported-nx-commands.ts b/packages/workspace/src/command-line/supported-nx-commands.ts
index 527abc8765..38265bf8ec 100644
--- a/packages/workspace/src/command-line/supported-nx-commands.ts
+++ b/packages/workspace/src/command-line/supported-nx-commands.ts
@@ -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',
diff --git a/packages/workspace/src/generators/init/init.ts b/packages/workspace/src/generators/init/init.ts
index b181f86ad9..cf7bc2f829 100755
--- a/packages/workspace/src/generators/init/init.ts
+++ b/packages/workspace/src/generators/init/init.ts
@@ -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',
     };
diff --git a/packages/workspace/src/generators/workspace/files/README.md__tmpl__ b/packages/workspace/src/generators/workspace/files/README.md__tmpl__
index 2abd4d1f38..3ffd22504a 100644
--- a/packages/workspace/src/generators/workspace/files/README.md__tmpl__
+++ b/packages/workspace/src/generators/workspace/files/README.md__tmpl__
@@ -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
 
diff --git a/scripts/copy-dep-graph-environment.ts b/scripts/copy-dep-graph-environment.ts
index c457038f31..00e60a7386 100644
--- a/scripts/copy-dep-graph-environment.ts
+++ b/scripts/copy-dep-graph-environment.ts
@@ -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`,