docs(misc): update generator examples to use new directory/path posit…

…ional args (#28144)

This PR updates examples in `.md` files (both docs and blog posts) to
use positional args. Nx 20 changes the position arg to be either
`directory` for apps/libs or `path` for artifacts (e.g. components).

So before you'd do this:

```
nx g app myapp --directory=apps/myapp
nx g lib mylib --directory=libs/mylib
nx g lib mylib --directory=libs/nested/mylib
nx g lib @acme/foo --directory=libs/@acme/foo --importPath=@acme/foo
nx g component foo --directory=libs/ui/src/foo --pascalCaseFiles
```

Will now be simplified to

```
nx g app apps/myapp
nx g lib libs/mylib
nx g lib libs/nested/mylib
nx g lib libs/@acme/foo # name and import path are both "@acme/foo"
nx g component libs/ui/src/foo/Foo
```

For cases where `name` and `importPath` need to be changed, you can
always manually specify them.

```
nx g lib libs/nested/foo # name is foo
nx g lib libs/nested/foo --name=nested-foo # specify name with prefix
nx g lib libs/@acme/foo --name # use "foo" as name and don't match importPath
nx g lib libs/@internal/foo --importPath=@acme/foo # different importPath from name

<!-- If this is a particularly complex change or feature addition, you can request a dedicated Nx release for this pull request branch. Mention someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they will confirm if the PR warrants its own release for testing purposes, and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR -->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is merged. -->

Fixes #

CONTRIBUTING.md

@@ -363,7 +363,7 @@ Including the issue number that the PR relates to also helps with tracking.
 ```plain
 feat(angular): add an option to generate lazy-loadable modules
 
-`nx generate lib mylib --lazy` provisions the mylib project in .eslintrc.json
+`nx generate lib libs/mylib --lazy` provisions the mylib project in .eslintrc.json
 
 Closes #157
 ```

docs/blog/2023-06-29-nx-console-gets-lit.md

@@ -70,7 +70,7 @@ If you want to dive deeper, there are many more resources on the architecture of
 
 To rebuild our UI, we first needed a new Lit app to work on. While there’s no native Nx plugin for Lit, generating the code we need was still very straightforward:
 
-`nx generate @nx/web:app --name generate-ui-v2`
+`nx generate @nx/web:app apps/generate-ui-v2`
 
 This generates an entire project for us, with a `tsconfig.json`, `index.html`, `main.ts`, and a `project.json`, where our Nx-specific config lives.
 

docs/blog/2023-10-20-nx-17-release.md

@@ -74,7 +74,7 @@ The `@nx/react` and `@nx/angular` now include a `federate-module` generator. Thi
 To run this generator, use the command:
 
 ```shell
-> nx g federate-module <module name> --path=<path to module to be exposed> --remote=<name of remote exposing module>
+> nx g federate-module <path to module to be exposed> --name=<module name> --remote=<name of remote exposing module>
 ```
 
 This will add a new module to the `exposes` map in the specified `remote` application, such that it can be consumed by a `host` application.
@@ -126,17 +126,11 @@ When set to `derived`, the generator will try to determine where to create your
 In addition, component generators now follow any given casing for component files. For example, let’s say we have an integrated monorepo with a react application called “my-app” and want to add a “Home” component. With Nx 17, you can run the command:
 
 ```shell
-> nx g component Home --directory=apps/my-app/src/app
+> nx g component apps/my-app/src/app/Home
 ```
 
 And a `Home.tsx` file will be added in the `apps/my-app/src/app` directory.
 
-You can now also build your directory path right into the generator command. For example, the same “Home” component would be created via:
-
-```shell
-> nx g component apps/my-app/src/app/Home
-```
-
 Finally, generators will now factory in your current working directory, so you can also create this “Home” component via:
 
 ```shell

docs/blog/2023-11-08-state-management.md

@@ -108,10 +108,10 @@ Now let’s add our first query. In this example, it will be added under `lib/qu
 
 ```shell
 # expo workspace
-npx nx generate @nx/expo:lib use-cat-fact --directory=queries
+npx nx generate @nx/expo:lib libs/queries/use-cat-fact
 
 # react-native workspace
-npx nx generate @nx/react-native:lib use-cat-fact --directory=queries
+npx nx generate @nx/react-native:lib libs/queries/use-cat-fact
 ```
 
 Or use [Nx Console](/recipes/nx-console):
@@ -191,20 +191,20 @@ In order to test out `useQuery` hook, you need to wrap it inside a mock `QueryCl
 
 ```shell
 # expo library
-npx nx generate @nx/expo:library test-wrapper --directory=queries
+npx nx generate @nx/expo:library libs/queries/test-wrapper
 
 # react native library
-npx nx generate @nx/react-native:library test-wrapper --directory=queries
+npx nx generate @nx/react-native:library libs/queries/test-wrapper
 ```
 
 Then a component inside this library:
 
 ```shell
 # expo library
-npx nx generate @nx/expo:component test-wrapper --project=queries-test-wrapper
+npx nx generate @nx/expo:component libs/queries/test-wrapper/src/lib/test-wrapper/test-wrapper
 
 # react native library
-npx nx generate @nx/react-native:component test-wrapper --project=queries-test-wrapper
+npx nx generate @nx/react-native:component libs/queries/test-wrapper/src/lib/test-wrapper/test-wrapper
 ```
 
 Add the mock `QueryClientProvider` in `libs/queries/test-wrapper/src/lib/test-wrapper/test-wrapper.tsx`:
@@ -416,10 +416,10 @@ First, you need to create a library for redux:
 
 ```shell
 # expo library
-npx nx generate @nx/expo:lib cat --directory=states
+npx nx generate @nx/expo:lib libs/states/cat
 
 # react native library
-npx nx generate @nx/react-native:lib cat --directory=states
+npx nx generate @nx/react-native:lib libs/states/cat
 ```
 
 This should create a folder under libs:
@@ -439,7 +439,7 @@ You can use the [Nx Console](/recipes/nx-console) to create a redux slice:
 Or run this command:
 
 ```shell
-npx nx generate @nx/react:redux likes --project=states-cat --directory=likes
+npx nx generate @nx/react:redux libs/states/cat/src/lib/likes/likes
 ```
 
 Then update the redux slice at `libs/states/cat/src/lib/likes/likes.slice.ts`:

docs/blog/2023-12-20-nx-17-2-release.md

@@ -65,7 +65,7 @@ In addition to performance improvements, we’ve brought the concept of dynamic
 You can generate your react module federation workspace now to use dyanmic federation via the `--dynamic` flag:
 
 ```shell
-nx generate @nx/react:host acme --remotes=nx --dynamic
+nx generate @nx/react:host apps/acme --remotes=nx --dynamic
 ```
 
 Or you can use the utility itself by importing from `@nx/react/mf`:

docs/blog/2024-02-06-nuxt-js-support-in-nx.md

@@ -134,7 +134,7 @@ This modular structure allows teams to work on different aspects of the applicat
 For instance, if you want to create a new Vue UI library, you can use the following command:
 
 ```shell
-nx generate @nx/vue:lib my-shared-ui
+nx generate @nx/vue:lib libs/my-shared-ui
 ```
 
 This command creates a my-shared-ui library within your workspace, which can then be used across your Nuxt app and potentially other applications within the same workspace.

docs/blog/2024-09-12-next-gen-module-federation-deployments.md

@@ -96,7 +96,7 @@ If you'd like a more indepth recipe for scaffolding `host` and `remote` generato
 our [Module Federation Recipes](/recipes/module-federation).
 {% /callout %}
 
-```{% command="npx nx g @nx/react:host shell --remotes=remote1 --bundler=rspack" path="~/myorg" %}
+```{% command="npx nx g @nx/react:host apps/shell --remotes=remote1 --bundler=rspack" path="~/myorg" %}
  NX  Generating @nx/react:host
 
 ✔ Which stylesheet format would you like to use? · css

docs/generated/cli/generate.md

@@ -24,43 +24,43 @@ Install `nx` globally to invoke the command directly using `nx`, or use `npx nx`
 Generate a new Angular application:
 
 ```shell
-nx generate @nx/angular:app myapp
+nx generate @nx/angular:app apps/myapp
 ```
 
 Generate a new React application:
 
 ```shell
-nx generate @nx/react:app myapp
+nx generate @nx/react:app apps/myapp
 ```
 
 Generate a new web component application:
 
 ```shell
-nx generate @nx/web:app myapp
+nx generate @nx/web:app apps/myapp
 ```
 
 Generate a new Node application:
 
 ```shell
-nx generate @nx/node:app myapp
+nx generate @nx/node:app apps/myapp
 ```
 
 Generate a new Angular library application:
 
 ```shell
-nx generate @nx/angular:library mylibrary
+nx generate @nx/angular:library libs/mylibrary
 ```
 
 Generate a new React library application:
 
 ```shell
-nx generate @nx/react:library mylibrary
+nx generate @nx/react:library libs/mylibrary
 ```
 
 Generate a new Node library application:
 
 ```shell
-nx generate @nx/node:library mylibrary
+nx generate @nx/node:library libs/mylibrary
 ```
 
 ## Options

docs/generated/packages/angular/documents/nx-and-angular.md

@@ -137,7 +137,7 @@ Nx comes with slightly different terminology than the Angular CLI for some featu
 **Angular Schematics** are called [Generators](/features/generate-code) in Nx. You can invoke them in the same way as you would with the Angular CLI, but you use the `nx` command instead of `ng`:
 
 ```shell
-npx nx g @nx/angular:component my-component
+npx nx g @nx/angular:component apps/my-app/src/lib/my-component/my-component
 ```
 
 You can also run Angular Schematics through the Nx CLI. So something like this works as well:

docs/generated/packages/angular/documents/overview.md

@@ -70,7 +70,7 @@ For a full tutorial experience, follow the [Angular Standalone Tutorial](/gettin
 It's straightforward to generate an Angular application:
 
 ```shell
-nx g @nx/angular:app appName
+nx g @nx/angular:app apps/appName
 ```
 
 By default, the application will be generated with:
@@ -94,7 +94,7 @@ nx e2e appName
 Generating an Angular library is very similar to generating an application:
 
 ```shell
-nx g @nx/angular:lib libName
+nx g @nx/angular:lib libs/libName
 ```
 
 By default, the library will be generated with:
@@ -122,7 +122,7 @@ to `@schematics/angular`. So, even though there is no `@nx/angular:service` gene
 successfully create a service:
 
 ```shell
-nx g @nx/angular:service my-service
+nx g @nx/angular:service apps/appName/src/lib/my-service/my-service
 ```
 
 ## More Documentation

docs/generated/packages/angular/generators/application.json

@@ -185,7 +185,7 @@
     },
     "additionalProperties": false,
     "required": ["name"],
-    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/angular:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=my-dir`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/angular:app my-app --directory=my-dir/my-app --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Components application\" %}\n\nCreate an application with Single File Components (inline styles and inline templates):\n\n```bash\nnx g @nx/angular:app my-app --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Set custom prefix and tags\" %}\n\nSet the prefix to apply to generated selectors and add tags to the application (used for linting).\n\n```bash\nnx g @nx/angular:app my-app --prefix=admin --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
+    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/angular:application apps/my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=my-dir`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/angular:app my-dir/my-app --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Components application\" %}\n\nCreate an application with Single File Components (inline styles and inline templates):\n\n```bash\nnx g @nx/angular:app apps/my-app --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Set custom prefix and tags\" %}\n\nSet the prefix to apply to generated selectors and add tags to the application (used for linting).\n\n```bash\nnx g @nx/angular:app apps/my-app --prefix=admin --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
     "presets": []
   },
   "aliases": ["app"],

docs/generated/packages/angular/generators/component.json

@@ -119,7 +119,7 @@
       }
     },
     "required": ["name"],
-    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nCreate a component named `my-component`:\n\n```bash\nnx g @nx/angular:component my-component\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Component\" %}\n\nCreate a component named `my-component` with inline styles and inline template:\n\n```bash\nnx g @nx/angular:component my-component --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Component with OnPush Change Detection Strategy\" %}\n\nCreate a component named `my-component` with OnPush Change Detection Strategy:\n\n```bash\nnx g @nx/angular:component my-component --changeDetection=OnPush\n```\n\n{% /tab %}\n",
+    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nCreate a component named `my-component`:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/my-component/my-component\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Component\" %}\n\nCreate a component named `my-component` with inline styles and inline template:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/my-component/my-component --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Component with OnPush Change Detection Strategy\" %}\n\nCreate a component named `my-component` with OnPush Change Detection Strategy:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/my-component/my-component --changeDetection=OnPush\n```\n\n{% /tab %}\n",
     "presets": []
   },
   "aliases": ["c"],

docs/generated/packages/angular/generators/library.json

@@ -204,7 +204,7 @@
     },
     "additionalProperties": false,
     "required": ["name"],
-    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Library\" %}\n\nCreates the `my-ui-lib` library with an `ui` tag:\n\n```bash\nnx g @nx/angular:library my-ui-lib --tags=ui\n```\n\n{% /tab %}\n\n{% tab label=\"Publishable Library\" %}\n\nCreates the `my-lib` library that can be built producing an output following the Angular Package Format (APF) to be distributed as an NPM package:\n\n```bash\nnx g @nx/angular:library my-lib --publishable --import-path=@my-org/my-lib\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable Library\" %}\n\nCreates the `my-lib` library with support for incremental builds:\n\n```bash\nnx g @nx/angular:library my-lib --buildable\n```\n\n{% /tab %}\n\n{% tab label=\"Nested Folder & Import\"%}\nCreates the `my-lib` library in the `nested` directory and sets the import path to `@myorg/nested/my-lib`:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=nested`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/angular:library --directory=libs/nested/my-lib --importPath=@myorg/nested/my-lib my-lib\n```\n\n{% /tab %}\n",
+    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Library\" %}\n\nCreates the `my-ui-lib` library with an `ui` tag:\n\n```bash\nnx g @nx/angular:library libs/my-ui-lib --tags=ui\n```\n\n{% /tab %}\n\n{% tab label=\"Publishable Library\" %}\n\nCreates the `my-lib` library that can be built producing an output following the Angular Package Format (APF) to be distributed as an NPM package:\n\n```bash\nnx g @nx/angular:library libs/my-lib --publishable --import-path=@my-org/my-lib\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable Library\" %}\n\nCreates the `my-lib` library with support for incremental builds:\n\n```bash\nnx g @nx/angular:library libs/my-lib --buildable\n```\n\n{% /tab %}\n\n{% tab label=\"Nested Folder & Import\"%}\nCreates the `my-lib` library in the `nested` directory and sets the import path to `@myorg/nested/my-lib`:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=nested`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```bash\nnx g @nx/angular:library libs/nested/my-lib --importPath=@myorg/nested/my-lib\n```\n\n{% /tab %}\n",
     "presets": []
   },
   "aliases": ["lib"],

docs/generated/packages/cypress/documents/overview.md

@@ -119,7 +119,7 @@ If you use the `setupNodeEvents` function in your Cypress configuration, make su
 By default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project.
 
 ```shell
-nx g @nx/web:app frontend
+nx g @nx/web:app apps/frontend
 ```
 
 ### Configure Cypress for an existing project

docs/generated/packages/detox/documents/overview.md

@@ -90,8 +90,8 @@ npm add -D @nx/detox
 By default, when creating a mobile application, Nx will use Detox to create the e2e tests project.
 
 ```shell
-nx g @nx/react-native:app frontend --e2eTestRunner=deotx
-nx g @nx/expo:app frontend --e2eTestRunner=detox
+nx g @nx/react-native:app apps/frontend --e2eTestRunner=deotx
+nx g @nx/expo:app apps/frontend --e2eTestRunner=detox
 ```
 
 ## Using Detox

docs/generated/packages/esbuild/documents/overview.md

@@ -54,7 +54,7 @@ The command below uses the `as-provided` directory flag behavior, which is the d
 You can add a new library that builds using esbuild with:
 
 ```shell
-nx g @nx/js:lib mylib --directory=libs/mylib --bundler=esbuild
+nx g @nx/js:lib libs/mylib --bundler=esbuild
 ```
 
 This command will install the esbuild plugin if needed, and set `@nx/esbuild:esbuild` executor for the `build` target.

docs/generated/packages/expo/documents/overview.md

@@ -1,4 +1,4 @@
-Expo is an open-source framework for apps that run natively on Android, iOS, and the web. Expo brings together the best of mobile and the web and enables many important features for building and scaling an app.
+/nameExpo is an open-source framework for apps that run natively on Android, iOS, and the web. Expo brings together the best of mobile and the web and enables many important features for building and scaling an app.
 
 Expo is a set of tools built on top of React Native. The Nx Plugin for Expo contains generators for managing Expo applications and libraries within an Nx workspace.
 
@@ -93,7 +93,7 @@ Once a Expo configuration file has been identified, the targets are created with
 Add a new application to your workspace with the following command:
 
 ```shell
-nx g @nx/expo:app my-app
+nx g @nx/expo:app apps/my-app
 ```
 
 Start the application by running:
@@ -107,15 +107,15 @@ nx start my-app
 To generate a new library run:
 
 ```shell
-npx nx g @nx/expo:lib your-lib-name
+npx nx g @nx/expo:lib libs/your-lib-name
 ```
 
 ### Generating Components
 
 To generate a new component inside library run:
 
 ```shell
-npx nx g @nx/expo:component your-component-name --project=your-lib-name --export
+npx nx g @nx/expo:component libs/your-lib-name/src/your-component-name --export
 ```
 
 Replace `your-lib-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`

docs/generated/packages/jest/documents/overview.md

@@ -133,7 +133,7 @@ The `@nx/jest/plugin` is configured in the `plugins` array in `nx.json`.
 By default, Nx will use Jest when creating applications and libraries.
 
 ```shell
-nx g @nx/web:app frontend
+nx g @nx/web:app apps/frontend
 ```
 
 ### Add Jest to a project

docs/generated/packages/js/documents/overview.md

@@ -62,15 +62,15 @@ yarn create nx-workspace my-org --preset=ts
 You can add a new JS/TS library with the following command:
 
 ```shell
-nx g @nx/js:lib my-lib
+nx g @nx/js:lib libs/my-lib
 ```
 
 ## Build
 
 You can `build` libraries that are generated with a bundler specified.
 
 ```shell
-nx g @nx/js:lib my-buildable-lib --bundler=rollup
+nx g @nx/js:lib libs/my-buildable-lib --bundler=rollup
 ```
 
 Generating a library with `--bundler` specified will add a `build` target to the library's `project.json` file allows the library to be built.
@@ -108,7 +108,7 @@ Currently, `@nx/js` supports the following compilers:
 - Create a buildable library with `swc`
 
 ```shell
-nx g @nx/js:lib my-swc-lib --bundler=swc
+nx g @nx/js:lib libs/my-swc-lib --bundler=swc
 ```
 
 - Convert a `tsc` library to use `swc`