nx/packages/react/docs/application-examples.md
Jack Hsu 8fa7065cf1
docs(misc): update generator examples to use new directory/path positional 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 #
2024-09-30 13:20:10 -04:00

1.2 KiB

Examples

{% tabs %} {% tab label="Simple Application" %}

Create an application named my-app:

nx g @nx/react:application apps/my-app

{% /tab %}

{% tab label="Application using Vite as bundler" %}

Create an application named my-app:

nx g @nx/react:app apps/my-app --bundler=vite

When choosing vite as the bundler, your unit tests will be set up with vitest, unless you choose none for unitTestRunner.

{% /tab %}

{% tab label="Specify directory and style extension" %}

Create an application named my-app in the my-dir directory and use scss for styles:

{% callout type="note" title="Directory Flag Behavior Changes" %} The 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 for more details. {% /callout %}

nx g @nx/react:app apps/my-dir/my-app --style=scss

{% /tab %}

{% tab label="Add tags" %}

Add tags to the application (used for linting).

nx g @nx/react:app apps/my-app --tags=scope:admin,type:ui

{% /tab %} {% /tabs %}