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 #
This commit is contained in:
Jack Hsu
GitHub
parent
123cfdcd53
commit
8fa7065cf1
@ -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
|
||||
```
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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`:
|
||||
|
||||
@ -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`:
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"],
|
||||
|
||||
@ -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"],
|
||||
|
||||
@ -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"],
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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,7 +107,7 @@ 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
|
||||
@ -115,7 +115,7 @@ npx nx g @nx/expo:lib your-lib-name
|
||||
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`
|
||||
|
||||
@ -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
|
||||
|
||||
@ -62,7 +62,7 @@ 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
|
||||
@ -70,7 +70,7 @@ nx g @nx/js:lib my-lib
|
||||
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`
|
||||
|
||||
@ -142,7 +142,7 @@
|
||||
}
|
||||
},
|
||||
"required": ["name"],
|
||||
"examplesFile": "---\ntitle: JS library generator examples\ndescription: This page contains examples for the @nx/js:lib generator.\n---\n\nThe `@nx/js:lib` generator will generate a library for you, and it will configure it according to the options you provide.\n\n```bash\nnpx nx g @nx/js:lib mylib\n```\n\nBy default, the library that is generated when you use this executor without passing any options, like the example above, will be a buildable library, using the `@nx/js:tsc` executor as a builder.\n\nYou may configure the tools you want to use to build your library, or bundle it too, by passing the `--bundler` flag. The `--bundler` flag controls the compiler and/or the bundler that will be used to build your library. If you choose `tsc` or `swc`, the result will be a buildable library using either `tsc` or `swc` as the compiler. If you choose `rollup` or `vite`, the result will be a buildable library using `rollup` or `vite` as the bundler. In the case of `rollup`, it will default to the `tsc` compiler. If you choose `esbuild`, you may use the [`esbuildOptions` property](https://esbuild.github.io/api/) in your `project.json` under the `build` target options to specify whether you wish to bundle your library or not.\n\n## Examples\n\n{% tabs %}\n\n{% tab label=\"Buildable with default compiler (tsc)\" %}\n\nGenerate a buildable library using the `@nx/js:tsc` executor. This uses `tsc` as the compiler.\n\n```bash\nnpx nx g @nx/js:lib mylib\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable with SWC compiler\" %}\n\nGenerate a buildable library using [SWC](https://swc.rs) as the compiler. This will use the `@nx/js:swc` executor.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=swc\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable with tsc\" %}\n\nGenerate a buildable library using tsc as the compiler. This will use the `@nx/js:tsc` executor.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=tsc\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable, with Rollup as a bundler\" %}\n\nGenerate a buildable library using [Rollup](https://rollupjs.org) as the bundler. This will use the `@nx/rollup:rollup` executor. It will also use [SWC](https://swc.rs) as the compiler.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=rollup\n```\n\nIf you do not want to use `swc` as the compiler, and want to use the default `babel` compiler, you can do so in your `project.json` under the `build` target options, using the [`compiler` property](/nx-api/rollup/executors/rollup#compiler):\n\n```jsonc {% fileName=\"libs/mylib/project.json\" %}\n\"build\": {\n \"executor\": \"@nx/rollup:rollup\",\n \"options\": {\n //...\n \"compiler\": \"babel\"\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable, with Vite as a bundler\" %}\n\nGenerate a buildable library using [Vite](https://vitejs.dev/) as the bundler. This will use the `@nx/vite:build` executor.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=vite\n```\n\n{% /tab %}\n\n{% tab label=\"Using ESBuild\" %}\n\nGenerate a buildable library using [ESBuild](https://esbuild.github.io/) as the bundler. This will use the `@nx/esbuild:esbuild` executor.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=esbuild\n```\n\nIf you want to specify whether you want to bundle your library or not, you can do so in your `project.json` under the `build` target options, using the [`esbuildOptions` property](https://esbuild.github.io/api/):\n\n```jsonc {% fileName=\"libs/mylib/project.json\" %}\n\"build\": {\n \"executor\": \"@nx/esbuild:esbuild\",\n \"options\": {\n //...\n \"esbuildOptions\": {\n \"bundle\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Minimal publishing target\" %}\n\nGenerate a **publishable** library with a minimal publishing target. The result will be a buildable library using the `@nx/js:tsc` executor, using `tsc` as the compiler. You can change the compiler or the bundler by passing the `--bundler` flag.\n\n```bash\nnpx nx g lib mylib --publishable\n```\n\n{% /tab %}\n\n{% tab label=\"Using directory flag\" %}\n\nGenerate a library named `mylib` and put it under a directory named `myapp` (`libs/myapp/mylib`)\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=myapp`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```shell\nnpx nx g lib mylib --directory=libs/myapp/mylib\n```\n\n{% /tab %}\n\n{% tab label=\"Non-buildable library\" %}\n\nGenerate a non-buildable library.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=none\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
|
||||
"examplesFile": "---\ntitle: JS library generator examples\ndescription: This page contains examples for the @nx/js:lib generator.\n---\n\nThe `@nx/js:lib` generator will generate a library for you, and it will configure it according to the options you provide.\n\n```bash\nnpx nx g @nx/js:lib libs/mylib\n```\n\nBy default, the library that is generated when you use this executor without passing any options, like the example above, will be a buildable library, using the `@nx/js:tsc` executor as a builder.\n\nYou may configure the tools you want to use to build your library, or bundle it too, by passing the `--bundler` flag. The `--bundler` flag controls the compiler and/or the bundler that will be used to build your library. If you choose `tsc` or `swc`, the result will be a buildable library using either `tsc` or `swc` as the compiler. If you choose `rollup` or `vite`, the result will be a buildable library using `rollup` or `vite` as the bundler. In the case of `rollup`, it will default to the `tsc` compiler. If you choose `esbuild`, you may use the [`esbuildOptions` property](https://esbuild.github.io/api/) in your `project.json` under the `build` target options to specify whether you wish to bundle your library or not.\n\n## Examples\n\n{% tabs %}\n\n{% tab label=\"Buildable with default compiler (tsc)\" %}\n\nGenerate a buildable library using the `@nx/js:tsc` executor. This uses `tsc` as the compiler.\n\n```bash\nnpx nx g @nx/js:lib libs/mylib\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable with SWC compiler\" %}\n\nGenerate a buildable library using [SWC](https://swc.rs) as the compiler. This will use the `@nx/js:swc` executor.\n\n```bash\nnpx nx g @nx/js:lib libs/mylib --bundler=swc\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable with tsc\" %}\n\nGenerate a buildable library using tsc as the compiler. This will use the `@nx/js:tsc` executor.\n\n```bash\nnpx nx g @nx/js:lib libs/mylib --bundler=tsc\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable, with Rollup as a bundler\" %}\n\nGenerate a buildable library using [Rollup](https://rollupjs.org) as the bundler. This will use the `@nx/rollup:rollup` executor. It will also use [SWC](https://swc.rs) as the compiler.\n\n```bash\nnpx nx g @nx/js:lib libs/mylib --bundler=rollup\n```\n\nIf you do not want to use `swc` as the compiler, and want to use the default `babel` compiler, you can do so in your `project.json` under the `build` target options, using the [`compiler` property](/nx-api/rollup/executors/rollup#compiler):\n\n```jsonc {% fileName=\"libs/mylib/project.json\" %}\n\"build\": {\n \"executor\": \"@nx/rollup:rollup\",\n \"options\": {\n //...\n \"compiler\": \"babel\"\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable, with Vite as a bundler\" %}\n\nGenerate a buildable library using [Vite](https://vitejs.dev/) as the bundler. This will use the `@nx/vite:build` executor.\n\n```bash\nnpx nx g @nx/js:lib libs/mylib --bundler=vite\n```\n\n{% /tab %}\n\n{% tab label=\"Using ESBuild\" %}\n\nGenerate a buildable library using [ESBuild](https://esbuild.github.io/) as the bundler. This will use the `@nx/esbuild:esbuild` executor.\n\n```bash\nnpx nx g @nx/js:lib libs/mylib --bundler=esbuild\n```\n\nIf you want to specify whether you want to bundle your library or not, you can do so in your `project.json` under the `build` target options, using the [`esbuildOptions` property](https://esbuild.github.io/api/):\n\n```jsonc {% fileName=\"libs/mylib/project.json\" %}\n\"build\": {\n \"executor\": \"@nx/esbuild:esbuild\",\n \"options\": {\n //...\n \"esbuildOptions\": {\n \"bundle\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Minimal publishing target\" %}\n\nGenerate a **publishable** library with a minimal publishing target. The result will be a buildable library using the `@nx/js:tsc` executor, using `tsc` as the compiler. You can change the compiler or the bundler by passing the `--bundler` flag.\n\n```bash\nnpx nx g lib libs/mylib --publishable\n```\n\n{% /tab %}\n\n{% tab label=\"Using directory flag\" %}\n\nGenerate a library named `mylib` and put it under a directory named `myapp` (`libs/myapp/mylib`)\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=myapp`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```shell\nnpx nx g lib libs/nested/mylib\n```\n\n{% /tab %}\n\n{% tab label=\"Non-buildable library\" %}\n\nGenerate a non-buildable library.\n\n```bash\nnpx nx g @nx/js:lib libs/mylib --bundler=none\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
|
||||
"presets": []
|
||||
},
|
||||
"aliases": ["lib"],
|
||||
|
||||
@ -57,7 +57,7 @@ npm add -D @nx/nest
|
||||
You can add a new Nest application with the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/nest:app my-nest-app
|
||||
nx g @nx/nest:app apps/my-nest-app
|
||||
```
|
||||
|
||||
#### Application Proxies
|
||||
@ -65,7 +65,7 @@ nx g @nx/nest:app my-nest-app
|
||||
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||
|
||||
```shell
|
||||
nx g @nx/nest:app my-nest-app --frontendProject my-angular-app
|
||||
nx g @nx/nest:app apps/my-nest-app --frontendProject my-angular-app
|
||||
```
|
||||
|
||||
### Create Libraries
|
||||
@ -73,19 +73,19 @@ nx g @nx/nest:app my-nest-app --frontendProject my-angular-app
|
||||
You can add a new Nest library with the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/nest:lib my-nest-lib
|
||||
nx g @nx/nest:lib libs/my-nest-lib
|
||||
```
|
||||
|
||||
To make the library `buildable`, use the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/nest:lib my-nest-lib --buildable
|
||||
nx g @nx/nest:lib libs/my-nest-lib --buildable
|
||||
```
|
||||
|
||||
To make the library `publishable`, use the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/nest:lib my-nest-lib --publishable --importPath=@my-workspace/my-nest-lib
|
||||
nx g @nx/nest:lib libs/my-nest-lib --publishable --importPath=@my-workspace/my-nest-lib
|
||||
```
|
||||
|
||||
> Read more about [building and publishing libraries here](/concepts/buildable-and-publishable-libraries).
|
||||
|
||||
@ -97,7 +97,7 @@ The `@nx/next/plugin` is configured in the `plugins` array in `nx.json`.
|
||||
You can add a new application with the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/next:app my-new-app
|
||||
nx g @nx/next:app apps/my-new-app
|
||||
```
|
||||
|
||||
### Generating Libraries
|
||||
@ -111,7 +111,7 @@ Nx allows you to create libraries with just one command. Some reasons you might
|
||||
To generate a new library run:
|
||||
|
||||
```shell
|
||||
nx g @nx/next:lib my-new-lib
|
||||
nx g @nx/next:lib libs/my-new-lib
|
||||
```
|
||||
|
||||
### Generating Pages and Components
|
||||
@ -119,9 +119,9 @@ nx g @nx/next:lib my-new-lib
|
||||
Nx also provides commands to quickly generate new pages and components for your application.
|
||||
|
||||
```shell
|
||||
nx g @nx/next:page my-new-page --directory=dir-where-to-place-the-page
|
||||
nx g @nx/next:page apps/my-new-app/pages/my-new-page
|
||||
|
||||
nx g @nx/next:component my-new-component --directory=dir-where-to-place-the-component
|
||||
nx g @nx/next:component apps/my-new-app/components/my-new-component
|
||||
```
|
||||
|
||||
Above commands will add a new page `my-new-page` and a component `my-new-component` to `my-new-app` project respectively in the specified directories.
|
||||
@ -189,7 +189,7 @@ There is no need to build the library prior to using it. When you update your li
|
||||
For libraries intended to be built and published to a registry (e.g. npm) you can use the `--publishable` and `--importPath` options.
|
||||
|
||||
```shell
|
||||
nx g @nx/next:lib my-new-lib --publishable --importPath=@happynrwl/ui-components
|
||||
nx g @nx/next:lib libs/my-new-lib --publishable --importPath=@happynrwl/ui-components
|
||||
```
|
||||
|
||||
### Testing Projects
|
||||
|
||||
@ -143,7 +143,7 @@
|
||||
}
|
||||
},
|
||||
"required": [],
|
||||
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create app in a directory\" %}\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```shell\nnx g app myapp --directory=apps/nested/myapp\n```\n\n{% /tab %}\n{% tab label=\"Use a custom Express server\" %}\n\n```shell\nnx g app myapp --custom-server\n```\n\n{% /tab %}\n{% tab label=\"Use plain JavaScript (not TypeScript)\" %}\n\n```shell\nnx g app myapp --js\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create app in a directory\" %}\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```shell\nnx g app apps/nested/myapp\n```\n\n{% /tab %}\n{% tab label=\"Use a custom Express server\" %}\n\n```shell\nnx g app apps/myapp --custom-server\n```\n\n{% /tab %}\n{% tab label=\"Use plain JavaScript (not TypeScript)\" %}\n\n```shell\nnx g app apps/myapp --js\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"presets": []
|
||||
},
|
||||
"aliases": ["app"],
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
}
|
||||
},
|
||||
"required": ["name"],
|
||||
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create an app component\" %}\n\n```shell\nnx g component my-cmp --project=my-app\n```\n\n{% /tab %}\n{% tab label=\"Create a component without its own folder\" %}\n\nRunning the following will create a component under `apps/my-app/components/my-cmp.tsx` rather than `apps/my-app/components/my-cmp/my-cmp.tsx`.\n\n```shell\nnx g component my-cmp --flat --project=my-app\n```\n\n{% /tab %}\n{% tab label=\"Create component in a custom directory\" %}\n\nRunning the following will create a component under `apps/my-app/foo/my-cmp.tsx` rather than `apps/my-app/my-cmp/my-cmp.tsx`.\n\n```shell\nnx g component my-cmp --directory=foo --flat --project=my-app\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create an app component\" %}\n\n```shell\nnx g component apps/my-app/src/lib/my-cmp/my-cmp\n```\n\n{% /tab %}\n{% tab label=\"Create a component without its own folder\" %}\n\nRunning the following will create a component under `apps/my-app/components/my-cmp.tsx` rather than `apps/my-app/components/my-cmp/my-cmp.tsx`.\n\n```shell\nnx g component apps/my-app/src/lib/my-cmp\n```\n\n{% /tab %}\n{% tab label=\"Create component in a custom directory\" %}\n\nRunning the following will create a component under `apps/my-app/foo/my-cmp.tsx` rather than `apps/my-app/my-cmp/my-cmp.tsx`.\n\n```shell\nnx g component apps/my-app/foo/my-cmp\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"presets": []
|
||||
},
|
||||
"description": "Create a component.",
|
||||
|
||||
@ -144,7 +144,7 @@
|
||||
}
|
||||
},
|
||||
"required": ["name"],
|
||||
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create a new lib\" %}\n\n```shell\nnx g lib my-lib\n```\n\n{% /tab %}\n{% tab label=\"Create a new lib under a directory\" %}\n\nThe following will create a library at `libs/shared/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=shared`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```shell\nnx g lib my-lib --directory=libs/shared/my-lib\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create a new lib\" %}\n\n```shell\nnx g lib libs/my-lib\n```\n\n{% /tab %}\n{% tab label=\"Create a new lib under a directory\" %}\n\nThe following will create a library at `libs/shared/my-lib`.\n\n```shell\nnx g lib libs/shared/my-lib\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"presets": []
|
||||
},
|
||||
"aliases": ["lib"],
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
}
|
||||
},
|
||||
"required": ["name"],
|
||||
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create static page in an app\" %}\n\n```shell\nnx g page my-page --project=my-app\n```\n\n{% /tab %}\n{% tab label=\"Create dynamic page in an app\" %}\n\nThe following creates a page under `apps/my-app/pages/products/[id].tsx`.\n\n```shell\nnx g page \"[id]\" --project=my-app --directory=products\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
|
||||
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create static page in an app\" %}\n\n```shell\nnx g page apps/my-app/pages/my-page\n```\n\n{% /tab %}\n{% tab label=\"Create dynamic page in an app\" %}\n\nThe following creates a page under `apps/my-app/pages/products/[id].tsx`.\n\n```shell\nnx g page \"apps/my-app/pages/products/[id]\"\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
|
||||
"presets": []
|
||||
},
|
||||
"description": "Create a page.",
|
||||
|
||||
@ -38,7 +38,7 @@ npm add -D @nx/node
|
||||
You can add a new application with the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/node:application my-new-app
|
||||
nx g @nx/node:application apps/my-new-app
|
||||
```
|
||||
|
||||
You can run your application with `nx serve my-new-app`, which starts it in watch mode.
|
||||
@ -48,11 +48,11 @@ You can run your application with `nx serve my-new-app`, which starts it in watc
|
||||
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/node:lib my-new-lib
|
||||
nx g @nx/node:lib libs/my-new-lib
|
||||
|
||||
# If you want the library to be buildable or publishable to npm
|
||||
nx g @nx/node:lib my-new-lib --buildable
|
||||
nx g @nx/node:lib my-new-lib \
|
||||
nx g @nx/node:lib libs/my-new-lib --buildable
|
||||
nx g @nx/node:lib libs/my-new-lib \
|
||||
--publishable \
|
||||
--importPath=@myorg/my-new-lib
|
||||
```
|
||||
@ -91,7 +91,7 @@ The output is in the `dist` folder. You can customize the output folder by setti
|
||||
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||
|
||||
```shell
|
||||
nx g @nx/node:application my-new-app \
|
||||
nx g @nx/node:application apps/my-new-app \
|
||||
--frontendProject my-react-app
|
||||
```
|
||||
|
||||
|
||||
@ -74,7 +74,7 @@ The `buildStaticTargetName` and `serveStaticTargetName` options control the name
|
||||
### Generate a new Nuxt app
|
||||
|
||||
```shell
|
||||
nx g @nx/nuxt:app my-app
|
||||
nx g @nx/nuxt:app apps/my-app
|
||||
```
|
||||
|
||||
### Deploy a Nuxt app
|
||||
|
||||
@ -106,7 +106,7 @@
|
||||
}
|
||||
},
|
||||
"required": [],
|
||||
"examplesFile": "---\ntitle: Nuxt application generator examples\ndescription: This page contains examples for the @nx/nuxt:app generator.\n---\n\nYour new Nuxt application will be generated with the following directory structure, following the suggested [directory structure](https://nuxt.com/docs/guide/directory-structure) for Nuxt applications:\n\n```text\nmy-nuxt-app\n├── nuxt.config.ts\n├── project.json\n├── src\n│ ├── app.vue\n│ ├── assets\n│ │ └── css\n│ │ └── styles.css\n│ ├── components\n│ │ └── NxWelcome.vue\n│ ├── pages\n│ │ ├── about.vue\n│ │ └── index.vue\n│ ├── public\n│ │ └── favicon.ico\n│ └── server\n│ ├── api\n│ │ └── greet.ts\n│ └── tsconfig.json\n├── tsconfig.app.json\n├── tsconfig.json\n├── tsconfig.spec.json\n└── vitest.config.ts\n```\n\nYour new app will contain the following:\n\n- Two pages (home and about) under `pages`\n- A component (`NxWelcome`) under `components`\n- A `greet` API endpoint that returns a JSON response under `/api/greet`\n- Configuration for `vitest`\n- Your app's entrypoint (`app.vue`) will contain the navigation links to the home and about pages, and the `nuxt-page` component to display the contents of your pages.\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Create app in a directory\" %}\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```shell\nnx g @nx/nuxt:app myapp --directory=apps/nested/myapp\n```\n\n{% /tab %}\n\n{% tab label=\"Create app with vitest configured\" %}\n\n```shell\nnx g @nx/nuxt:app myapp --directory=apps/nested/myapp --unitTestRunner=vitest\n```\n\n{% /tab %}\n\n{% tab label=\"Use plain JavaScript (not TypeScript)\" %}\n\n```shell\nnx g @nx/nuxt:app myapp --js\n```\n\n{% /tab %}\n{% /tabs %}\n\n## Generate pages and components\n\nYou can use the the [`@nx/vue:component` generator](/nx-api/vue/generators/component) to generate new pages and components for your application. You can read more on the [`@nx/vue:component` generator documentation page](/nx-api/vue/generators/component), but here are some examples:\n\n{% tabs %}\n{% tab label=\"New page\" %}\n\n```shell\nnx g @nx/nuxt:component --directory=my-app/src/pages --name=my-page\n```\n\n{% /tab %}\n\n{% tab label=\"New component\" %}\n\n```shell\nnx g @nx/nuxt:component --directory=my-app/src/components/my-cmp --name=my-cmp\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"examplesFile": "---\ntitle: Nuxt application generator examples\ndescription: This page contains examples for the @nx/nuxt:app generator.\n---\n\nYour new Nuxt application will be generated with the following directory structure, following the suggested [directory structure](https://nuxt.com/docs/guide/directory-structure) for Nuxt applications:\n\n```text\nmy-nuxt-app\n├── nuxt.config.ts\n├── project.json\n├── src\n│ ├── app.vue\n│ ├── assets\n│ │ └── css\n│ │ └── styles.css\n│ ├── components\n│ │ └── NxWelcome.vue\n│ ├── pages\n│ │ ├── about.vue\n│ │ └── index.vue\n│ ├── public\n│ │ └── favicon.ico\n│ └── server\n│ ├── api\n│ │ └── greet.ts\n│ └── tsconfig.json\n├── tsconfig.app.json\n├── tsconfig.json\n├── tsconfig.spec.json\n└── vitest.config.ts\n```\n\nYour new app will contain the following:\n\n- Two pages (home and about) under `pages`\n- A component (`NxWelcome`) under `components`\n- A `greet` API endpoint that returns a JSON response under `/api/greet`\n- Configuration for `vitest`\n- Your app's entrypoint (`app.vue`) will contain the navigation links to the home and about pages, and the `nuxt-page` component to display the contents of your pages.\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Create app in a directory\" %}\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```shell\nnx g @nx/nuxt:app =apps/nested/myapp\n```\n\n{% /tab %}\n\n{% tab label=\"Create app with vitest configured\" %}\n\n```shell\nnx g @nx/nuxt:app apps/nested/myapp --unitTestRunner=vitest\n```\n\n{% /tab %}\n\n{% tab label=\"Use plain JavaScript (not TypeScript)\" %}\n\n```shell\nnx g @nx/nuxt:app apps/myapp --js\n```\n\n{% /tab %}\n{% /tabs %}\n\n## Generate pages and components\n\nYou can use the the [`@nx/vue:component` generator](/nx-api/vue/generators/component) to generate new pages and components for your application. You can read more on the [`@nx/vue:component` generator documentation page](/nx-api/vue/generators/component), but here are some examples:\n\n{% tabs %}\n{% tab label=\"New page\" %}\n\n```shell\nnx g @nx/nuxt:component my-app/src/pages/my-page\n```\n\n{% /tab %}\n\n{% tab label=\"New component\" %}\n\n```shell\nnx g @nx/nuxt:component my-app/src/components/my-cmp\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"presets": []
|
||||
},
|
||||
"aliases": ["app"],
|
||||
|
||||
@ -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
|
||||
|
||||
@ -104,7 +104,7 @@ npm add -D @nx/playwright
|
||||
By default, when creating a new frontend application, Nx will prompt for which e2e test runner to use. Select `playwright` or pass in the arg `--e2eTestRunner=playwright`
|
||||
|
||||
```shell
|
||||
nx g @nx/web:app frontend --e2eTestRunner=playwright
|
||||
nx g @nx/web:app apps/frontend --e2eTestRunner=playwright
|
||||
```
|
||||
|
||||
### Add Playwright e2e to an existing project
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
"$id": "NxPluginExecutor",
|
||||
"title": "Create an Executor for an Nx Plugin",
|
||||
"description": "Create an Executor for an Nx Plugin.",
|
||||
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Basic executor\" %}\n\nCreate a new executor called `build` inside the plugin `my-plugin`:\n\n```bash\nnx g @nx/plugin:executor build --project my-plugin\n```\n\n{% /tab %}\n{% tab label=\"With custom hashing\" %}\n\nCreate a new executor called `build` inside the plugin `my-plugin`, that uses a custom hashing function:\n\n```bash\nnx g @nx/plugin:executor build --project my-plugin --includeHasher\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Basic executor\" %}\n\nCreate a new executor called `build` inside the plugin `my-plugin`:\n\n```bash\nnx g @nx/plugin:executor tools/my-plugin/src/executors/build\n```\n\n{% /tab %}\n{% tab label=\"With custom hashing\" %}\n\nCreate a new executor called `build` inside the plugin `my-plugin`, that uses a custom hashing function:\n\n```bash\nnx g @nx/plugin:executor tools/my-plugin/src/executors/build --includeHasher\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"type": "object",
|
||||
"examples": [
|
||||
{
|
||||
|
||||
@ -103,7 +103,7 @@ Once a React Native configuration file has been identified, the targets are crea
|
||||
To create additional React Native apps run:
|
||||
|
||||
```shell
|
||||
nx g @nx/react-native:app <your-app-name>
|
||||
nx g @nx/react-native:app apps/<your-app-name>
|
||||
```
|
||||
|
||||
### Generating Libraries
|
||||
@ -111,7 +111,7 @@ nx g @nx/react-native:app <your-app-name>
|
||||
To generate a new library run:
|
||||
|
||||
```shell
|
||||
nx g @nx/react-native:lib <your-lib-name>
|
||||
nx g @nx/react-native:lib libs/<your-lib-name>
|
||||
```
|
||||
|
||||
### Generating Components
|
||||
@ -119,7 +119,7 @@ nx g @nx/react-native:lib <your-lib-name>
|
||||
To generate a new component inside library run:
|
||||
|
||||
```shell
|
||||
nx g @nx/react-native:component <your-component-name> --directory=<component-directory> --export
|
||||
nx g @nx/react-native:component <component-path> --export
|
||||
```
|
||||
|
||||
Replace `<component-directory>` with the directory where you want to place the component. It must be a path to a directory relative to the workspace root and located inside the library project root.
|
||||
@ -133,7 +133,7 @@ The Nx CLI provides the [`migrate` command](/features/automate-updating-dependen
|
||||
To upgrade native iOS and Android code to latest, you can use the [upgrade-native](/nx-api/react-native/generators/upgrade-native) generator:
|
||||
|
||||
```shell
|
||||
nx generate @nx/react-native:upgrade-native <your-app-name>
|
||||
nx generate @nx/react-native:upgrade-native apps/<your-app-name>
|
||||
```
|
||||
|
||||
This is a command that will replace the iOS and Android native code folder entirely.
|
||||
|
||||
@ -52,7 +52,7 @@ npm add -D @nx/react
|
||||
You can add a new application with the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/react:app my-new-app
|
||||
nx g @nx/react:app apps/my-new-app
|
||||
```
|
||||
|
||||
To start the application in development mode, run `nx serve my-new-app`.
|
||||
@ -60,12 +60,12 @@ To start the application in development mode, run `nx serve my-new-app`.
|
||||
And add a new library as follows:
|
||||
|
||||
```shell
|
||||
nx g @nx/react:lib my-new-lib
|
||||
nx g @nx/react:lib libs/my-new-lib
|
||||
|
||||
# If you want the library to be buildable or publishable to npm
|
||||
nx g @nx/react:lib my-new-lib --bundler=vite
|
||||
nx g @nx/react:lib my-new-lib --bundler=rollup
|
||||
nx g @nx/react:lib my-new-lib \
|
||||
nx g @nx/react:lib libs/my-new-lib --bundler=vite
|
||||
nx g @nx/react:lib libs/my-new-lib --bundler=rollup
|
||||
nx g @nx/react:lib libs/my-new-lib \
|
||||
--publishable \
|
||||
--importPath=@myorg/my-new-lib
|
||||
```
|
||||
@ -77,14 +77,11 @@ Read more about [building and publishing libraries here](/concepts/buildable-and
|
||||
Adding a component to an existing project can be done with:
|
||||
|
||||
```shell
|
||||
nx g @nx/react:component my-new-component \
|
||||
--project=my-new-app
|
||||
nx g @nx/react:component libs/my-new-lib/src/lib/my-new-component
|
||||
|
||||
# Note: If you want to export the component
|
||||
# from the library use --export
|
||||
nx g @nx/react:component my-new-component \
|
||||
--project=my-new-lib \
|
||||
--export
|
||||
nx g @nx/react:component libs/my-new-lib/src/lib/my-new-component --export
|
||||
```
|
||||
|
||||
Replace `my-new-app` and `my-new-lib` with the name of your projects.
|
||||
@ -94,7 +91,7 @@ Replace `my-new-app` and `my-new-lib` with the name of your projects.
|
||||
If you want to add a new hook, run the following
|
||||
|
||||
```shell
|
||||
nx g @nx/react:hook my-new-hook --project=my-new-lib
|
||||
nx g @nx/react:hook libs/my-new-lib/src/lib/my-new-hook
|
||||
```
|
||||
|
||||
Replace `my-new-lib` with the name of your project.
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
}
|
||||
},
|
||||
"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/react:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/react:app my-app --bundler=vite\n```\n\nWhen choosing `vite` as the bundler, your unit tests will be set up with `vitest`, unless you choose `none` for `unitTestRunner`.\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/react:app my-app --directory=apps/my-dir/my-app --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nx/react:app my-app --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/react:application apps/my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/react:app apps/my-app --bundler=vite\n```\n\nWhen choosing `vite` as the bundler, your unit tests will be set up with `vitest`, unless you choose `none` for `unitTestRunner`.\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/react:app apps/my-dir/my-app --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nx/react:app apps/my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"presets": []
|
||||
},
|
||||
"aliases": ["app"],
|
||||
|
||||
@ -88,7 +88,7 @@ npm add -D @nx/remix
|
||||
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, omit the `--directory` flag. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.
|
||||
{% /callout %}
|
||||
|
||||
```{% command="nx g @nx/remix:app myapp --directory=apps/myapp" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:app apps/myapp" path="~/acme" %}
|
||||
NX Generating @nx/remix:application
|
||||
|
||||
✔ What unit test runner should be used? · vitest
|
||||
@ -181,7 +181,7 @@ When developing your application, it often makes sense to split your codebase in
|
||||
|
||||
To generate a library to use in your Remix application run:
|
||||
|
||||
```{% command="nx g @nx/remix:lib login --directory=libs/login" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:lib libs/login" path="~/acme" %}
|
||||
NX Generating @nx/remix:library
|
||||
|
||||
✔ What test runner should be used? · vitest
|
||||
@ -228,7 +228,7 @@ You can also run test on your library:
|
||||
|
||||
To generate a route for your application:
|
||||
|
||||
```{% command="nx g @nx/remix:route admin --path=apps/myapp/app/routes" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:route apps/myapp/app/routes/admin" path="~/acme" %}
|
||||
NX Generating @nx/remix:route
|
||||
|
||||
CREATE apps/myapp/app/routes/admin.tsx
|
||||
@ -241,7 +241,7 @@ To use a Route Loader where the logic lives in your library, follow the steps be
|
||||
|
||||
1. Generate a loader for your route:
|
||||
|
||||
```{% command="nx g @nx/remix:loader admin --path=apps/myapp/app/routes" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:loader apps/myapp/app/routes/admin.tsx" path="~/acme" %}
|
||||
NX Generating @nx/remix:loader
|
||||
|
||||
UPDATE apps/myapp/app/routes/admin.tsx
|
||||
|
||||
@ -112,19 +112,19 @@ You can generate a [React](/nx-api/react) application or library or a [Web](/nx-
|
||||
To generate a React application using Vite.js, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/react:app my-app --bundler=vite
|
||||
nx g @nx/react:app apps/my-app --bundler=vite
|
||||
```
|
||||
|
||||
To generate a React library using Vite.js, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/react:lib my-lib --bundler=vite
|
||||
nx g @nx/react:lib libs/my-lib --bundler=vite
|
||||
```
|
||||
|
||||
To generate a Web application using Vite.js, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/web:app my-app --bundler=vite
|
||||
nx g @nx/web:app apps/my-app --bundler=vite
|
||||
```
|
||||
|
||||
### Modify an existing React or Web project to use Vite.js
|
||||
|
||||
@ -51,13 +51,13 @@ npm add -D @nx/vue
|
||||
To generate a Vue application, run the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/vue:app my-app
|
||||
nx g @nx/vue:app apps/my-app
|
||||
```
|
||||
|
||||
To generate a Vue library, run the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/vue:lib my-lib
|
||||
nx g @nx/vue:lib libs/my-lib
|
||||
```
|
||||
|
||||
## More Documentation
|
||||
|
||||
@ -130,7 +130,7 @@
|
||||
}
|
||||
},
|
||||
"required": ["name"],
|
||||
"examplesFile": "---\ntitle: Vue application generator examples\ndescription: This page contains examples for the @nx/vue:app generator.\n---\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```shell\nnx g @nx/vue:app 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```shell\nnx g @nx/vue:app my-app --directory=apps/my-dir/my-app --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```shell\nnx g @nx/vue:app my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"examplesFile": "---\ntitle: Vue application generator examples\ndescription: This page contains examples for the @nx/vue:app generator.\n---\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```shell\nnx g @nx/vue:app 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```shell\nnx g @nx/vue:app apps/my-dir/my-app --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```shell\nnx g @nx/vue:app apps/my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"presets": []
|
||||
},
|
||||
"aliases": ["app"],
|
||||
|
||||
@ -46,7 +46,7 @@ npm add -D @nx/web
|
||||
You can add a new application with the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/web:app my-new-app
|
||||
nx g @nx/web:app apps/my-new-app
|
||||
```
|
||||
|
||||
The application uses no framework and generates with web components. You can add any framework you want on top of the default setup.
|
||||
@ -62,10 +62,10 @@ If you are looking to add a React application, check out the [React plugin](/nx-
|
||||
To create a generic TypeScript library (i.e. non-framework specific), use the [`@nx/js`](/nx-api/js) plugin.
|
||||
|
||||
```shell
|
||||
nx g @nx/js:lib my-new-lib
|
||||
nx g @nx/js:lib libs/my-new-lib
|
||||
|
||||
# If you want the library to be publishable to npm
|
||||
nx g @nx/js:lib my-new-lib \
|
||||
nx g @nx/js:lib libs/my-new-lib \
|
||||
--publishable \
|
||||
--importPath=@myorg/my-new-lib
|
||||
```
|
||||
|
||||
@ -112,7 +112,7 @@
|
||||
}
|
||||
},
|
||||
"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/web:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/web:app my-app --bundler=vite\n```\n\nWhen choosing `vite` as the bundler, your unit tests will be set up with `vitest`, unless you choose `none` for `unitTestRunner`.\n\n{% /tab %}\n\n{% tab label=\"Specify directory\" %}\n\nCreate an application named `my-app` in the `my-dir` directory:\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/web:app my-app --directory=apps/my-dir/my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nx/web:app my-app --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/web:application apps/my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/web:app apps/my-app --bundler=vite\n```\n\nWhen choosing `vite` as the bundler, your unit tests will be set up with `vitest`, unless you choose `none` for `unitTestRunner`.\n\n{% /tab %}\n\n{% tab label=\"Specify directory\" %}\n\nCreate an application named `my-app` in the `my-dir` directory:\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/web:app apps/my-dir/my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nx/web:app apps/my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
||||
"presets": []
|
||||
},
|
||||
"aliases": ["app"],
|
||||
|
||||
@ -96,17 +96,17 @@ You can generate a [React](/nx-api/react) application or a [Web](/nx-api/web) ap
|
||||
To generate a React application using Webpack, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/react:app my-app --bundler=webpack
|
||||
nx g @nx/react:app apps/my-app --bundler=webpack
|
||||
```
|
||||
|
||||
To generate a Node application using Webpack, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/node:app my-app --bundler=webpack
|
||||
nx g @nx/node:app apps/my-app --bundler=webpack
|
||||
```
|
||||
|
||||
To generate a Web application using Webpack, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/web:app my-app --bundler=webpack
|
||||
nx g @nx/web:app apps/my-app --bundler=webpack
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@ The workspace plugin contains executors and generators that are useful for any N
|
||||
|
||||
## Creating Local Generators
|
||||
|
||||
Codifying your organization's best practices into local generators is a great way to ensure that the best practices are easy to follow and implement. Running `nx g @nx/plugin:plugin feature` will create a local plugin with a generator which is written the same way generators are written for Nx plugins.
|
||||
Codifying your organization's best practices into local generators is a great way to ensure that the best practices are easy to follow and implement. Running `nx g @nx/plugin:plugin packages/feature` will create a local plugin with a generator which is written the same way generators are written for Nx plugins.
|
||||
|
||||
> See more about [local generators](/extending-nx/recipes/local-generators)
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -103,22 +103,22 @@ Next, generate the host and remote applications.
|
||||
{% tab label="React" %}
|
||||
|
||||
```shell
|
||||
nx g @nx/react:host host --remotes=shop,cart,about
|
||||
nx g @nx/react:host apps/host --remotes=shop,cart,about
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% tab label="Angular" %}
|
||||
|
||||
```shell
|
||||
nx g @nx/angular:host host --remotes=shop,cart,about
|
||||
nx g @nx/angular:host apps/host --remotes=shop,cart,about
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% /tabs %}
|
||||
|
||||
{% callout type="note" title="More details" %}
|
||||
You can leave off the `--remotes` option and add them later with `nx g @nx/react:remote shop --host=host`
|
||||
or `nx g @nx/angular:remote shop --host=host`.
|
||||
You can leave off the `--remotes` option and add them later with `nx g @nx/react:remote apps/shop --host=host`
|
||||
or `nx g @nx/angular:remote apps/shop --host=host`.
|
||||
{% /callout %}
|
||||
|
||||
Now, serve `host` to view it in your browser.
|
||||
|
||||
@ -53,16 +53,16 @@ application, and `nx g remote` for remote applications.
|
||||
{% tab label="React" %}
|
||||
|
||||
```shell
|
||||
nx g @nx/react:host shell --remotes=shop,cart
|
||||
nx g @nx/react:remote about --host=shell
|
||||
nx g @nx/react:host apps/shell --remotes=shop,cart
|
||||
nx g @nx/react:remote apps/about --host=shell
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% tab label="Angular" %}
|
||||
|
||||
```shell
|
||||
nx g @nx/angular:host shell --remotes=shop,cart
|
||||
nx g @nx/angular:remote about --host=shell
|
||||
nx g @nx/angular:host apps/shell --remotes=shop,cart
|
||||
nx g @nx/angular:remote apps/about --host=shell
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
|
||||
@ -8,13 +8,13 @@ In Nx 13.10+, local nx plugins can contain executors that are used in the worksp
|
||||
|
||||
```shell
|
||||
npm add -D @nx/plugin
|
||||
nx g @nx/plugin:plugin my-plugin --directory=tools/my-plugin
|
||||
nx g @nx/plugin:plugin tools/my-plugin
|
||||
```
|
||||
|
||||
- Use the Nx CLI to generate the initial files needed for your executor. Replace `my-executor` with the name of your workspace executor.
|
||||
|
||||
```shell
|
||||
nx generate @nx/plugin:executor my-executor --directory=tools/my-plugin/src/executors/my-executor
|
||||
nx generate @nx/plugin:executor tools/my-plugin/src/executors/my-executor
|
||||
```
|
||||
|
||||
- Copy the code for your workspace executor into the newly created executor's folder. e.g. `libs/my-plugin/src/executors/my-executor/`
|
||||
|
||||
@ -16,13 +16,13 @@ When migrating to Nx 16, a new workspace plugin is automatically generated in th
|
||||
|
||||
```shell
|
||||
npm add -D @nx/plugin
|
||||
nx g @nx/plugin:plugin my-plugin --directory=tools/my-plugin
|
||||
nx g @nx/plugin:plugin tools/my-plugin
|
||||
```
|
||||
|
||||
- Use the Nx CLI to generate the initial files needed for your generator. Replace `my-generator` with the name of your workspace generator.
|
||||
|
||||
```shell
|
||||
nx generate @nx/plugin:generator my-generator --directory=tools/my-plugin/src/generators/my-generator
|
||||
nx generate @nx/plugin:generator tools/my-plugin/src/generators/my-generator
|
||||
```
|
||||
|
||||
- Copy the code for your workspace generator into the newly created generator's folder. e.g. `libs/my-plugin/src/generators/my-generator/`
|
||||
|
||||
@ -15,13 +15,13 @@ Generators come as part of [Nx plugins](/concepts/nx-plugins) and can be invoked
|
||||
Here's an example of generating a React library:
|
||||
|
||||
```shell
|
||||
nx g @nx/react:lib mylib --directory=packages/mylib
|
||||
nx g @nx/react:lib packages/mylib
|
||||
```
|
||||
|
||||
You can also specify just the generator name and Nx will prompt you to pick between the installed plugins that provide a generator with that name.
|
||||
|
||||
```shell
|
||||
nx g lib mylib --directory=packages/mylib
|
||||
nx g lib packages/mylib
|
||||
```
|
||||
|
||||
When running this command, you could be prompted to choose between the `@nx/react` and `@nx/js` plugins that each provide a library generator.
|
||||
|
||||
@ -5,8 +5,8 @@ Nx is a general-purpose build system and a general-purpose CLI. It works with Ja
|
||||
TypeScript is a great choice for many teams, but not for everyone. If you want to use Nx with JavaScript, simply pass `--js` to all generate commands, as follows:
|
||||
|
||||
```shell
|
||||
nx g @nx/react:app myapp --js
|
||||
nx g @nx/react:component mycmp --project=myapp --js
|
||||
nx g @nx/react:app apps/myapp --js
|
||||
nx g @nx/react:component apps/myapp/src/lib/mycmp --js
|
||||
```
|
||||
|
||||
You can build/test/lint/serve your applications and libraries the same way whether you use JavaScript and TypeScript. You can also mix and match them.
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -171,7 +171,7 @@ nx add @nx/react-native
|
||||
To create additional React Native apps run:
|
||||
|
||||
```shell
|
||||
npx nx g @nx/react-native:app mobile --directory=apps/mobile
|
||||
npx nx g @nx/react-native:app apps/mobile
|
||||
```
|
||||
|
||||
## Generating a Library
|
||||
@ -185,7 +185,7 @@ Nx allows you to create libraries with just one command. Some reasons you might
|
||||
To generate a new library run:
|
||||
|
||||
```shell
|
||||
npx nx g @nx/react-native:lib shared-ui-layout --directory=libs/shared-ui-layout
|
||||
npx nx g @nx/react-native:lib libs/shared-ui-layout
|
||||
```
|
||||
|
||||
And you will see the following:
|
||||
@ -225,7 +225,7 @@ Run:
|
||||
To generate a new component inside `shared-ui-layout` run:
|
||||
|
||||
```shell
|
||||
npx nx g @nx/react-native:component layout --directory=libs/shared-ui-layout/src/lib/layout --export
|
||||
npx nx g @nx/react-native:component libs/shared-ui-layout/src/lib/layout/layout --export
|
||||
```
|
||||
|
||||
And you will see the following updated for `shared-ui-layout`:
|
||||
@ -270,8 +270,8 @@ That's it! There is no need to build the library prior to using it. When you upd
|
||||
For libraries intended to be built and published to a registry (e.g. npm) you can use the `--publishable` and `--importPath` options.
|
||||
|
||||
```shell
|
||||
npx nx g @nx/react-native:lib shared-ui-layout --directory=libs/shared-ui-layout --publishable --importPath=@happynrwl/ui-components
|
||||
npx nx g @nx/react-native:component layout --directory=libs/shared-ui-layout/src/lib/layout --export
|
||||
npx nx g @nx/react-native:lib libs/shared-ui-layout --publishable --importPath=@happynrwl/ui-components
|
||||
npx nx g @nx/react-native:component libs/shared-ui-layout/src/lib/layout/layout --export
|
||||
```
|
||||
|
||||
Run `npx nx build shared-ui-layout` to build the library. It will generate the following:
|
||||
|
||||
@ -27,7 +27,7 @@ nx add @nx/remix
|
||||
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, omit the `--directory` flag. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.
|
||||
{% /callout %}
|
||||
|
||||
```{% command="nx g @nx/remix:app myapp --directory=apps/myapp" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:app apps/myapp" path="~/acme" %}
|
||||
NX Generating @nx/remix:application
|
||||
|
||||
✔ What unit test runner should be used? · vitest
|
||||
@ -111,7 +111,7 @@ When developing your application, it often makes sense to split your codebase in
|
||||
|
||||
To generate a library to use in your Remix application run:
|
||||
|
||||
```{% command="nx g @nx/remix:lib login --directory=libs/login" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:lib libs/login" path="~/acme" %}
|
||||
NX Generating @nx/remix:library
|
||||
|
||||
✔ What test runner should be used? · vitest
|
||||
@ -158,7 +158,7 @@ You can also run test on your library:
|
||||
|
||||
To generate a route for your application:
|
||||
|
||||
```{% command="nx g @nx/remix:route admin --path=apps/myapp/app/routes" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:route apps/myapp/app/routes/admin" path="~/acme" %}
|
||||
NX Generating @nx/remix:route
|
||||
|
||||
CREATE apps/myapp/app/routes/admin.tsx
|
||||
@ -171,7 +171,7 @@ To use a Route Loader where the logic lives in your library, follow the steps be
|
||||
|
||||
1. Generate a loader for your route:
|
||||
|
||||
```{% command="nx g @nx/remix:loader admin --path=apps/myapp/app/routes" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:loader apps/myapp/app/routes/admin.tsx" path="~/acme" %}
|
||||
NX Generating @nx/remix:loader
|
||||
|
||||
UPDATE apps/myapp/app/routes/admin.tsx
|
||||
|
||||
@ -16,7 +16,7 @@ the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived)
|
||||
You can generate a new buildable library with:
|
||||
|
||||
```shell
|
||||
nx g @nx/angular:lib my-lib --directory=libs/my-lib --buildable
|
||||
nx g @nx/angular:lib libs/my-lib --buildable
|
||||
```
|
||||
|
||||
The generated buildable library uses the `@nx/angular:ng-packagr-lite` executor which is optimized for the incremental
|
||||
@ -53,7 +53,7 @@ path is later changed in `ng-package.json`, it needs to be updated as well in th
|
||||
|
||||
The `@nx/angular:package` executor also supports incremental builds. It is used to build and package an Angular library
|
||||
to be distributed as an NPM package following the Angular Package Format (APF) specification. It will be automatically
|
||||
configured when generating a publishable library (`nx g @nx/angular:lib my-lib --publishable --importPath my-lib`).
|
||||
configured when generating a publishable library (`nx g @nx/angular:lib libs/my-lib --publishable --importPath my-lib`).
|
||||
{% /callout %}
|
||||
|
||||
## Adjust the application executor
|
||||
|
||||
@ -13,19 +13,19 @@ post [Set up Tailwind CSS with Angular in an Nx workspace](https://medium.com/nr
|
||||
To generate an Angular application with Tailwind CSS configured run:
|
||||
|
||||
```shell
|
||||
npx nx g @nx/angular:app my-app --add-tailwind
|
||||
npx nx g @nx/angular:app apps/my-app --add-tailwind
|
||||
```
|
||||
|
||||
To generate an Angular buildable library with Tailwind CSS configured run:
|
||||
|
||||
```shell
|
||||
npx nx g @nx/angular:lib my-lib --buildable --add-tailwind
|
||||
npx nx g @nx/angular:lib libs/my-lib --buildable --add-tailwind
|
||||
```
|
||||
|
||||
To generate an Angular publishable library with Tailwind CSS configured run:
|
||||
|
||||
```shell
|
||||
npx nx g @nx/angular:lib my-lib --publishable --importPath=@my-org/my-lib --add-tailwind
|
||||
npx nx g @nx/angular:lib libs/my-lib --publishable --importPath=@my-org/my-lib --add-tailwind
|
||||
```
|
||||
|
||||
To add Tailwind CSS to an existing Angular application, buildable library or publishable library, run:
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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,7 +107,7 @@ 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
|
||||
@ -115,7 +115,7 @@ npx nx g @nx/expo:lib your-lib-name
|
||||
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`
|
||||
|
||||
@ -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
|
||||
|
||||
@ -62,7 +62,7 @@ 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
|
||||
@ -70,7 +70,7 @@ nx g @nx/js:lib my-lib
|
||||
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`
|
||||
|
||||
@ -57,7 +57,7 @@ npm add -D @nx/nest
|
||||
You can add a new Nest application with the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/nest:app my-nest-app
|
||||
nx g @nx/nest:app apps/my-nest-app
|
||||
```
|
||||
|
||||
#### Application Proxies
|
||||
@ -65,7 +65,7 @@ nx g @nx/nest:app my-nest-app
|
||||
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||
|
||||
```shell
|
||||
nx g @nx/nest:app my-nest-app --frontendProject my-angular-app
|
||||
nx g @nx/nest:app apps/my-nest-app --frontendProject my-angular-app
|
||||
```
|
||||
|
||||
### Create Libraries
|
||||
@ -73,19 +73,19 @@ nx g @nx/nest:app my-nest-app --frontendProject my-angular-app
|
||||
You can add a new Nest library with the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/nest:lib my-nest-lib
|
||||
nx g @nx/nest:lib libs/my-nest-lib
|
||||
```
|
||||
|
||||
To make the library `buildable`, use the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/nest:lib my-nest-lib --buildable
|
||||
nx g @nx/nest:lib libs/my-nest-lib --buildable
|
||||
```
|
||||
|
||||
To make the library `publishable`, use the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/nest:lib my-nest-lib --publishable --importPath=@my-workspace/my-nest-lib
|
||||
nx g @nx/nest:lib libs/my-nest-lib --publishable --importPath=@my-workspace/my-nest-lib
|
||||
```
|
||||
|
||||
> Read more about [building and publishing libraries here](/concepts/buildable-and-publishable-libraries).
|
||||
|
||||
@ -97,7 +97,7 @@ The `@nx/next/plugin` is configured in the `plugins` array in `nx.json`.
|
||||
You can add a new application with the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/next:app my-new-app
|
||||
nx g @nx/next:app apps/my-new-app
|
||||
```
|
||||
|
||||
### Generating Libraries
|
||||
@ -111,7 +111,7 @@ Nx allows you to create libraries with just one command. Some reasons you might
|
||||
To generate a new library run:
|
||||
|
||||
```shell
|
||||
nx g @nx/next:lib my-new-lib
|
||||
nx g @nx/next:lib libs/my-new-lib
|
||||
```
|
||||
|
||||
### Generating Pages and Components
|
||||
@ -119,9 +119,9 @@ nx g @nx/next:lib my-new-lib
|
||||
Nx also provides commands to quickly generate new pages and components for your application.
|
||||
|
||||
```shell
|
||||
nx g @nx/next:page my-new-page --directory=dir-where-to-place-the-page
|
||||
nx g @nx/next:page apps/my-new-app/pages/my-new-page
|
||||
|
||||
nx g @nx/next:component my-new-component --directory=dir-where-to-place-the-component
|
||||
nx g @nx/next:component apps/my-new-app/components/my-new-component
|
||||
```
|
||||
|
||||
Above commands will add a new page `my-new-page` and a component `my-new-component` to `my-new-app` project respectively in the specified directories.
|
||||
@ -189,7 +189,7 @@ There is no need to build the library prior to using it. When you update your li
|
||||
For libraries intended to be built and published to a registry (e.g. npm) you can use the `--publishable` and `--importPath` options.
|
||||
|
||||
```shell
|
||||
nx g @nx/next:lib my-new-lib --publishable --importPath=@happynrwl/ui-components
|
||||
nx g @nx/next:lib libs/my-new-lib --publishable --importPath=@happynrwl/ui-components
|
||||
```
|
||||
|
||||
### Testing Projects
|
||||
|
||||
@ -38,7 +38,7 @@ npm add -D @nx/node
|
||||
You can add a new application with the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/node:application my-new-app
|
||||
nx g @nx/node:application apps/my-new-app
|
||||
```
|
||||
|
||||
You can run your application with `nx serve my-new-app`, which starts it in watch mode.
|
||||
@ -48,11 +48,11 @@ You can run your application with `nx serve my-new-app`, which starts it in watc
|
||||
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/node:lib my-new-lib
|
||||
nx g @nx/node:lib libs/my-new-lib
|
||||
|
||||
# If you want the library to be buildable or publishable to npm
|
||||
nx g @nx/node:lib my-new-lib --buildable
|
||||
nx g @nx/node:lib my-new-lib \
|
||||
nx g @nx/node:lib libs/my-new-lib --buildable
|
||||
nx g @nx/node:lib libs/my-new-lib \
|
||||
--publishable \
|
||||
--importPath=@myorg/my-new-lib
|
||||
```
|
||||
@ -91,7 +91,7 @@ The output is in the `dist` folder. You can customize the output folder by setti
|
||||
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||
|
||||
```shell
|
||||
nx g @nx/node:application my-new-app \
|
||||
nx g @nx/node:application apps/my-new-app \
|
||||
--frontendProject my-react-app
|
||||
```
|
||||
|
||||
|
||||
@ -74,7 +74,7 @@ The `buildStaticTargetName` and `serveStaticTargetName` options control the name
|
||||
### Generate a new Nuxt app
|
||||
|
||||
```shell
|
||||
nx g @nx/nuxt:app my-app
|
||||
nx g @nx/nuxt:app apps/my-app
|
||||
```
|
||||
|
||||
### Deploy a Nuxt app
|
||||
|
||||
@ -104,7 +104,7 @@ npm add -D @nx/playwright
|
||||
By default, when creating a new frontend application, Nx will prompt for which e2e test runner to use. Select `playwright` or pass in the arg `--e2eTestRunner=playwright`
|
||||
|
||||
```shell
|
||||
nx g @nx/web:app frontend --e2eTestRunner=playwright
|
||||
nx g @nx/web:app apps/frontend --e2eTestRunner=playwright
|
||||
```
|
||||
|
||||
### Add Playwright e2e to an existing project
|
||||
|
||||
@ -103,7 +103,7 @@ Once a React Native configuration file has been identified, the targets are crea
|
||||
To create additional React Native apps run:
|
||||
|
||||
```shell
|
||||
nx g @nx/react-native:app <your-app-name>
|
||||
nx g @nx/react-native:app apps/<your-app-name>
|
||||
```
|
||||
|
||||
### Generating Libraries
|
||||
@ -111,7 +111,7 @@ nx g @nx/react-native:app <your-app-name>
|
||||
To generate a new library run:
|
||||
|
||||
```shell
|
||||
nx g @nx/react-native:lib <your-lib-name>
|
||||
nx g @nx/react-native:lib libs/<your-lib-name>
|
||||
```
|
||||
|
||||
### Generating Components
|
||||
@ -119,7 +119,7 @@ nx g @nx/react-native:lib <your-lib-name>
|
||||
To generate a new component inside library run:
|
||||
|
||||
```shell
|
||||
nx g @nx/react-native:component <your-component-name> --directory=<component-directory> --export
|
||||
nx g @nx/react-native:component <component-path> --export
|
||||
```
|
||||
|
||||
Replace `<component-directory>` with the directory where you want to place the component. It must be a path to a directory relative to the workspace root and located inside the library project root.
|
||||
@ -133,7 +133,7 @@ The Nx CLI provides the [`migrate` command](/features/automate-updating-dependen
|
||||
To upgrade native iOS and Android code to latest, you can use the [upgrade-native](/nx-api/react-native/generators/upgrade-native) generator:
|
||||
|
||||
```shell
|
||||
nx generate @nx/react-native:upgrade-native <your-app-name>
|
||||
nx generate @nx/react-native:upgrade-native apps/<your-app-name>
|
||||
```
|
||||
|
||||
This is a command that will replace the iOS and Android native code folder entirely.
|
||||
|
||||
@ -52,7 +52,7 @@ npm add -D @nx/react
|
||||
You can add a new application with the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/react:app my-new-app
|
||||
nx g @nx/react:app apps/my-new-app
|
||||
```
|
||||
|
||||
To start the application in development mode, run `nx serve my-new-app`.
|
||||
@ -60,12 +60,12 @@ To start the application in development mode, run `nx serve my-new-app`.
|
||||
And add a new library as follows:
|
||||
|
||||
```shell
|
||||
nx g @nx/react:lib my-new-lib
|
||||
nx g @nx/react:lib libs/my-new-lib
|
||||
|
||||
# If you want the library to be buildable or publishable to npm
|
||||
nx g @nx/react:lib my-new-lib --bundler=vite
|
||||
nx g @nx/react:lib my-new-lib --bundler=rollup
|
||||
nx g @nx/react:lib my-new-lib \
|
||||
nx g @nx/react:lib libs/my-new-lib --bundler=vite
|
||||
nx g @nx/react:lib libs/my-new-lib --bundler=rollup
|
||||
nx g @nx/react:lib libs/my-new-lib \
|
||||
--publishable \
|
||||
--importPath=@myorg/my-new-lib
|
||||
```
|
||||
@ -77,14 +77,11 @@ Read more about [building and publishing libraries here](/concepts/buildable-and
|
||||
Adding a component to an existing project can be done with:
|
||||
|
||||
```shell
|
||||
nx g @nx/react:component my-new-component \
|
||||
--project=my-new-app
|
||||
nx g @nx/react:component libs/my-new-lib/src/lib/my-new-component
|
||||
|
||||
# Note: If you want to export the component
|
||||
# from the library use --export
|
||||
nx g @nx/react:component my-new-component \
|
||||
--project=my-new-lib \
|
||||
--export
|
||||
nx g @nx/react:component libs/my-new-lib/src/lib/my-new-component --export
|
||||
```
|
||||
|
||||
Replace `my-new-app` and `my-new-lib` with the name of your projects.
|
||||
@ -94,7 +91,7 @@ Replace `my-new-app` and `my-new-lib` with the name of your projects.
|
||||
If you want to add a new hook, run the following
|
||||
|
||||
```shell
|
||||
nx g @nx/react:hook my-new-hook --project=my-new-lib
|
||||
nx g @nx/react:hook libs/my-new-lib/src/lib/my-new-hook
|
||||
```
|
||||
|
||||
Replace `my-new-lib` with the name of your project.
|
||||
|
||||
@ -88,7 +88,7 @@ npm add -D @nx/remix
|
||||
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, omit the `--directory` flag. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.
|
||||
{% /callout %}
|
||||
|
||||
```{% command="nx g @nx/remix:app myapp --directory=apps/myapp" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:app apps/myapp" path="~/acme" %}
|
||||
NX Generating @nx/remix:application
|
||||
|
||||
✔ What unit test runner should be used? · vitest
|
||||
@ -181,7 +181,7 @@ When developing your application, it often makes sense to split your codebase in
|
||||
|
||||
To generate a library to use in your Remix application run:
|
||||
|
||||
```{% command="nx g @nx/remix:lib login --directory=libs/login" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:lib libs/login" path="~/acme" %}
|
||||
NX Generating @nx/remix:library
|
||||
|
||||
✔ What test runner should be used? · vitest
|
||||
@ -228,7 +228,7 @@ You can also run test on your library:
|
||||
|
||||
To generate a route for your application:
|
||||
|
||||
```{% command="nx g @nx/remix:route admin --path=apps/myapp/app/routes" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:route apps/myapp/app/routes/admin" path="~/acme" %}
|
||||
NX Generating @nx/remix:route
|
||||
|
||||
CREATE apps/myapp/app/routes/admin.tsx
|
||||
@ -241,7 +241,7 @@ To use a Route Loader where the logic lives in your library, follow the steps be
|
||||
|
||||
1. Generate a loader for your route:
|
||||
|
||||
```{% command="nx g @nx/remix:loader admin --path=apps/myapp/app/routes" path="~/acme" %}
|
||||
```{% command="nx g @nx/remix:loader apps/myapp/app/routes/admin.tsx" path="~/acme" %}
|
||||
NX Generating @nx/remix:loader
|
||||
|
||||
UPDATE apps/myapp/app/routes/admin.tsx
|
||||
|
||||
@ -112,19 +112,19 @@ You can generate a [React](/nx-api/react) application or library or a [Web](/nx-
|
||||
To generate a React application using Vite.js, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/react:app my-app --bundler=vite
|
||||
nx g @nx/react:app apps/my-app --bundler=vite
|
||||
```
|
||||
|
||||
To generate a React library using Vite.js, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/react:lib my-lib --bundler=vite
|
||||
nx g @nx/react:lib libs/my-lib --bundler=vite
|
||||
```
|
||||
|
||||
To generate a Web application using Vite.js, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/web:app my-app --bundler=vite
|
||||
nx g @nx/web:app apps/my-app --bundler=vite
|
||||
```
|
||||
|
||||
### Modify an existing React or Web project to use Vite.js
|
||||
|
||||
@ -51,13 +51,13 @@ npm add -D @nx/vue
|
||||
To generate a Vue application, run the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/vue:app my-app
|
||||
nx g @nx/vue:app apps/my-app
|
||||
```
|
||||
|
||||
To generate a Vue library, run the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/vue:lib my-lib
|
||||
nx g @nx/vue:lib libs/my-lib
|
||||
```
|
||||
|
||||
## More Documentation
|
||||
|
||||
@ -46,7 +46,7 @@ npm add -D @nx/web
|
||||
You can add a new application with the following:
|
||||
|
||||
```shell
|
||||
nx g @nx/web:app my-new-app
|
||||
nx g @nx/web:app apps/my-new-app
|
||||
```
|
||||
|
||||
The application uses no framework and generates with web components. You can add any framework you want on top of the default setup.
|
||||
@ -62,10 +62,10 @@ If you are looking to add a React application, check out the [React plugin](/nx-
|
||||
To create a generic TypeScript library (i.e. non-framework specific), use the [`@nx/js`](/nx-api/js) plugin.
|
||||
|
||||
```shell
|
||||
nx g @nx/js:lib my-new-lib
|
||||
nx g @nx/js:lib libs/my-new-lib
|
||||
|
||||
# If you want the library to be publishable to npm
|
||||
nx g @nx/js:lib my-new-lib \
|
||||
nx g @nx/js:lib libs/my-new-lib \
|
||||
--publishable \
|
||||
--importPath=@myorg/my-new-lib
|
||||
```
|
||||
|
||||
@ -96,17 +96,17 @@ You can generate a [React](/nx-api/react) application or a [Web](/nx-api/web) ap
|
||||
To generate a React application using Webpack, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/react:app my-app --bundler=webpack
|
||||
nx g @nx/react:app apps/my-app --bundler=webpack
|
||||
```
|
||||
|
||||
To generate a Node application using Webpack, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/node:app my-app --bundler=webpack
|
||||
nx g @nx/node:app apps/my-app --bundler=webpack
|
||||
```
|
||||
|
||||
To generate a Web application using Webpack, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/web:app my-app --bundler=webpack
|
||||
nx g @nx/web:app apps/my-app --bundler=webpack
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@ The workspace plugin contains executors and generators that are useful for any N
|
||||
|
||||
## Creating Local Generators
|
||||
|
||||
Codifying your organization's best practices into local generators is a great way to ensure that the best practices are easy to follow and implement. Running `nx g @nx/plugin:plugin feature` will create a local plugin with a generator which is written the same way generators are written for Nx plugins.
|
||||
Codifying your organization's best practices into local generators is a great way to ensure that the best practices are easy to follow and implement. Running `nx g @nx/plugin:plugin packages/feature` will create a local plugin with a generator which is written the same way generators are written for Nx plugins.
|
||||
|
||||
> See more about [local generators](/extending-nx/recipes/local-generators)
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ npx create-nx-plugin my-plugin
|
||||
|
||||
```shell {% title="Add a plugin to an existing workspace" %}
|
||||
npx nx add @nx/plugin
|
||||
npx nx g plugin my-plugin
|
||||
npx nx g plugin tools/my-plugin
|
||||
```
|
||||
|
||||
{% /side-by-side %}
|
||||
@ -47,7 +47,7 @@ You can follow along with one of the step by step tutorials below that is focuse
|
||||
Wire up a new generator with this terminal command:
|
||||
|
||||
```shell
|
||||
npx nx g generator library-with-readme --directory=my-plugin/src/generators/library-with-readme
|
||||
npx nx g generator my-plugin/src/generators/library-with-readme
|
||||
```
|
||||
|
||||
### Understand the Generator Functionality
|
||||
|
||||
@ -21,7 +21,7 @@ Then we , install the `@nx/plugin` package and generate a plugin:
|
||||
|
||||
```shell
|
||||
npx nx add @nx/plugin
|
||||
npx nx g @nx/plugin:plugin recommended --directory=tools/recommended
|
||||
npx nx g @nx/plugin:plugin tools/recommended
|
||||
```
|
||||
|
||||
This will create a `recommended` project that contains all your plugin code.
|
||||
@ -31,7 +31,7 @@ This will create a `recommended` project that contains all your plugin code.
|
||||
To create a new generator run:
|
||||
|
||||
```shell
|
||||
npx nx generate @nx/plugin:generator library --directory="tools/recommended/src/generators/library"
|
||||
npx nx generate @nx/plugin:generator tools/recommended/src/generators/library
|
||||
```
|
||||
|
||||
The new generator is located in `tools/recommended/src/generators/library`. The `generator.ts` file contains the code that runs the generator. We can delete the `files` directory since we won't be using it and update the `generator.ts` file with the following code:
|
||||
|
||||
@ -187,7 +187,7 @@ If you create a generator named `init`, Nx will automatically run that generator
|
||||
To create the generator run the following command:
|
||||
|
||||
```shell
|
||||
npx nx g generator init --directory=src/generators/init
|
||||
npx nx g generator src/generators/init
|
||||
```
|
||||
|
||||
Then we can edit the `generator.ts` file to define the generator functionality:
|
||||
@ -256,7 +256,7 @@ export interface InitGeneratorSchema {}
|
||||
Let's make one more generator to automatically create a simple Astro application. First we'll create the generator:
|
||||
|
||||
```shell
|
||||
npx nx g generator application --directory=src/generators/application
|
||||
npx nx g generator src/generators/application
|
||||
```
|
||||
|
||||
Then we'll update the `generator.ts` file to define the generator functionality:
|
||||
|
||||
@ -92,7 +92,7 @@ Then generate a project
|
||||
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, omit the `--directory` flag. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.
|
||||
{% /callout %}
|
||||
|
||||
```{% command="nx g @nx/js:lib ui --directory=libs/ui --simpleName --minimal" path="~/astro-app" %}
|
||||
```{% command="nx g @nx/js:lib libs/ui --minimal" path="~/astro-app" %}
|
||||
NX Generating @nx/js:library
|
||||
|
||||
✔ Which unit test runner would you like to use? · none
|
||||
|
||||
@ -34,7 +34,7 @@ The command below uses the `as-provided` directory flag behavior, which is the d
|
||||
{% /callout %}
|
||||
|
||||
```shell
|
||||
nx g @nx/express:app my-express-api --directory=apps/my-express-api
|
||||
nx g @nx/express:app apps/my-express-api
|
||||
```
|
||||
|
||||
Serve the API by running
|
||||
@ -54,7 +54,7 @@ The command below uses the `as-provided` directory flag behavior, which is the d
|
||||
{% /callout %}
|
||||
|
||||
```shell
|
||||
nx g @nx/js:lib my-lib --directory=libs/my-lib
|
||||
nx g @nx/js:lib libs/my-lib
|
||||
```
|
||||
|
||||
Once the library is created, update the following files.
|
||||
|
||||
@ -47,7 +47,7 @@ The command below uses the `as-provided` directory flag behavior, which is the d
|
||||
{% /callout %}
|
||||
|
||||
```shell
|
||||
nx g @nx/node:app fastify-api --directory=apps/fastify-api
|
||||
nx g @nx/node:app apps/fastify-api
|
||||
```
|
||||
|
||||
Serve the API by running
|
||||
@ -67,7 +67,7 @@ The command below uses the `as-provided` directory flag behavior, which is the d
|
||||
{% /callout %}
|
||||
|
||||
```shell
|
||||
nx g @nx/node:lib my-lib --directory=libs/my-lib
|
||||
nx g @nx/node:lib libs/my-lib
|
||||
```
|
||||
|
||||
Once the library is created, update the following files.
|
||||
|
||||
@ -68,7 +68,7 @@ The command below uses the `as-provided` directory flag behavior, which is the d
|
||||
We'll start with a node application and then tweak the settings to match what we need. Add a new node application to your workspace with the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/node:app my-lit-app --directory=apps/my-lit-app
|
||||
nx g @nx/node:app apps/my-lit-app
|
||||
```
|
||||
|
||||
Choose `none` for the node framework, since we won't be using this as a node app.
|
||||
@ -192,7 +192,7 @@ The command below uses the `as-provided` directory flag behavior, which is the d
|
||||
Let's create a library that our Lit application is going to consume. To create a new library, install the `@nx/js` package and run:
|
||||
|
||||
```shell
|
||||
nx g @nx/js:lib my-lib --directory=libs/my-lib
|
||||
nx g @nx/js:lib libs/my-lib
|
||||
```
|
||||
|
||||
Once the library is created, update the following files.
|
||||
|
||||
@ -73,7 +73,7 @@ We'll start with a web application and then tweak the settings to match what we
|
||||
workspace with the following command:
|
||||
|
||||
```shell
|
||||
nx g @nx/web:app my-solid-app --directory=apps/my-solid-app --bundler=vite
|
||||
nx g @nx/web:app apps/my-solid-app --bundler=vite
|
||||
```
|
||||
|
||||
The `@nx/web:app` generator will create some files that are unnecessary for our Solid application.
|
||||
@ -252,7 +252,7 @@ Let's create a library that our Solid application is going to consume. To create
|
||||
package and run:
|
||||
|
||||
```shell
|
||||
nx g @nx/js:lib my-lib --directory=libs/my-lib
|
||||
nx g @nx/js:lib libs/my-lib
|
||||
```
|
||||
|
||||
Once the library is created, update the following files.
|
||||
|
||||
@ -269,7 +269,7 @@ The command below uses the `as-provided` directory flag behavior, which is the d
|
||||
{% /callout %}
|
||||
|
||||
```shell
|
||||
nx generate @nx/js:library --name=Counter --directory=libs/counter --unitTestRunner=vitest --bundler=vite --importPath=@acme/counter
|
||||
nx generate @nx/js:library libs/counter --unitTestRunner=vitest --bundler=vite --importPath=@acme/counter
|
||||
```
|
||||
|
||||
Create the Counter component at `libs/counter/src/lib/Counter.svelte` and copy the contents of your `src/App.svelte` file into it.
|
||||
|
||||
@ -45,7 +45,10 @@ import {
|
||||
import { libraryGenerator } from '@nx/js';
|
||||
|
||||
export default async function (tree: Tree, schema: any) {
|
||||
await libraryGenerator(tree, { name: schema.name });
|
||||
await libraryGenerator(tree, {
|
||||
name: schema.name,
|
||||
directory: `libs/${schema.name}`,
|
||||
});
|
||||
const libraryRoot = readProjectConfiguration(tree, schema.name).root;
|
||||
generateFiles(
|
||||
tree, // the virtual file system
|
||||
|
||||
@ -16,7 +16,7 @@ If you don't already have a local plugin, use Nx to generate one:
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @nx/plugin
|
||||
nx g @nx/plugin:plugin my-plugin --directory=tools/my-plugin
|
||||
nx g @nx/plugin:plugin tools/my-plugin
|
||||
```
|
||||
|
||||
Note that `latest` should match the version of the `nx` plugins installed in your workspace.
|
||||
@ -24,7 +24,7 @@ Note that `latest` should match the version of the `nx` plugins installed in you
|
||||
Use the Nx CLI to generate the initial files needed for your generator.
|
||||
|
||||
```shell
|
||||
nx generate @nx/plugin:generator my-generator --directory=tools/my-plugin/src/generators/my-generator
|
||||
nx generate @nx/plugin:generator tools/my-plugin/src/generators/my-generator
|
||||
```
|
||||
|
||||
After the command is finished, the generator is created in the plugin `generators` folder.
|
||||
|
||||
@ -61,7 +61,7 @@ Nx allows you to do this with a single command:
|
||||
|
||||
{% tab label="Angular" %}
|
||||
|
||||
```{% command="npx nx g @nx/angular:host store --ssr --remotes=product,checkout" path="~/myorg" %}
|
||||
```{% command="npx nx g @nx/angular:host apps/store --ssr --remotes=product,checkout" path="~/myorg" %}
|
||||
|
||||
```
|
||||
|
||||
@ -69,7 +69,7 @@ Nx allows you to do this with a single command:
|
||||
|
||||
{% tab label="React" %}
|
||||
|
||||
```{% command="npx nx g @nx/react:host store --ssr --remotes=product,checkout" path="~/myorg" %}
|
||||
```{% command="npx nx g @nx/react:host apps/store --ssr --remotes=product,checkout" path="~/myorg" %}
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ To generate only a host application in your workspace, run the following command
|
||||
{% tabs %}
|
||||
{% tab label="React" %}
|
||||
|
||||
```{% command="nx g @nx/react:host shell --directory=apps/react/shell" %}
|
||||
```{% command="nx g @nx/react:host apps/shell --directory=apps/react/shell" %}
|
||||
NX Generating @nx/react:host
|
||||
|
||||
CREATE apps/react/shell/src/app/app.spec.tsx
|
||||
@ -48,7 +48,7 @@ CREATE apps/react/shell/webpack.config.prod.ts
|
||||
{% /tab %}
|
||||
{% tab label="Angular" %}
|
||||
|
||||
```{% command="nx g @nx/angular:host shell --directory=apps/angular/shell" %}
|
||||
```{% command="nx g @nx/angular:host apps/shell --directory=apps/angular/shell" %}
|
||||
NX Generating @nx/angular:host
|
||||
|
||||
CREATE apps/angular/shell/project.json
|
||||
@ -86,7 +86,7 @@ To scaffold a host application along with remote applications in your workspace,
|
||||
{% tabs %}
|
||||
{% tab label="React" %}
|
||||
|
||||
```{% command="nx g @nx/react:host shell-with-remotes --directory=apps/react/with-remotes/shell --remotes=remote1,remote2" %}
|
||||
```{% command="nx g @nx/react:host apps/react/with-remotes/shell --remotes=remote1,remote2" %}
|
||||
NX Generating @nx/react:host
|
||||
|
||||
CREATE apps/react/with-remotes/shell/src/app/app.spec.tsx
|
||||
@ -166,7 +166,7 @@ CREATE apps/react/with-remotes/remote2/webpack.config.prod.ts
|
||||
{% /tab %}
|
||||
{% tab label="Angular" %}
|
||||
|
||||
```{% command="nx g @nx/angular:host shell --directory=apps/angular/with-remotes/shell --remotes=remote1,remote2" %}
|
||||
```{% command="nx g @nx/angular:host apps/angular/with-remotes/shell --remotes=remote1,remote2" %}
|
||||
> NX Generating @nx/angular:host
|
||||
|
||||
CREATE apps/angular/with-remotes/shell/project.json
|
||||
|
||||
@ -17,7 +17,7 @@ To generate a remote application in your workspace, run the following command:
|
||||
{% tabs %}
|
||||
{% tab label="React" %}
|
||||
|
||||
```{% command="nx g @nx/react:remote myremote --directory=apps/react/myremote" %}
|
||||
```{% command="nx g @nx/react:remote apps/react/myremote" %}
|
||||
NX Generating @nx/react:remote
|
||||
|
||||
CREATE apps/react/myremote/src/app/app.spec.tsx
|
||||
@ -49,7 +49,7 @@ UPDATE tsconfig.base.json
|
||||
{% /tab %}
|
||||
{% tab label="Angular" %}
|
||||
|
||||
```{% command="nx g @nx/angular:remote myremote --directory=apps/angular/myremote" %}
|
||||
```{% command="nx g @nx/angular:remote apps/angular/myremote" %}
|
||||
NX Generating @nx/angular:host
|
||||
|
||||
CREATE apps/angular/myremote/project.json
|
||||
@ -125,7 +125,7 @@ The command would look like the following:
|
||||
{% tabs %}
|
||||
{% tab label="React" %}
|
||||
|
||||
```{% command="nx g @nx/react:remote myremote --directory=apps/react/myremote --host=shell" %}
|
||||
```{% command="nx g @nx/react:remote apps/react/myremote --host=shell" %}
|
||||
NX Generating @nx/react:remote
|
||||
|
||||
CREATE apps/react/myremote/src/app/app.spec.tsx
|
||||
@ -158,7 +158,7 @@ UPDATE tsconfig.base.json
|
||||
{% /tab %}
|
||||
{% tab label="Angular" %}
|
||||
|
||||
```{% command="nx g @nx/angular:remote myremote --directory=apps/angular/myremote --host=shell" %}
|
||||
```{% command="nx g @nx/angular:remote apps/angular/myremote --host=shell" %}
|
||||
> NX Generating @nx/angular:host
|
||||
|
||||
CREATE apps/angular/myremote/project.json
|
||||
|
||||
@ -217,7 +217,7 @@ This will scaffold a new library for us to use.
|
||||
We need an Angular Service that we will use to hold state:
|
||||
|
||||
```shell
|
||||
nx g @nx/angular:service user --project=data-access-user
|
||||
nx g @nx/angular:service libs/shared/data-access-user/src/lib/user
|
||||
```
|
||||
|
||||
This will create the `libs/shared/data-access-user/src/lib/user.service.ts` file. Change its contents to match:
|
||||
|
||||
@ -21,7 +21,7 @@ Since we are using Nx, we will create a library for this module.
|
||||
**Create a library**
|
||||
|
||||
```shell
|
||||
nx generate @nx/js:library --name=hello --unitTestRunner=jest --projectNameAndRootFormat=as-provided
|
||||
nx generate @nx/js:library hello --unitTestRunner=jest --projectNameAndRootFormat=as-provided
|
||||
```
|
||||
|
||||
Update the `hello.ts` file with the following code:
|
||||
|
||||
@ -91,9 +91,9 @@ using executors, then the Node, Nest and Express app generators have an option t
|
||||
can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||
|
||||
```shell
|
||||
nx g @nx/node:app <node-app> --frontendProject my-react-app
|
||||
nx g @nx/nest:app <nest-app> --frontendProject my-react-app
|
||||
nx g @nx/express:app <express-app> --frontendProject my-react-app
|
||||
nx g @nx/node:app apps/<node-app> --frontendProject my-react-app
|
||||
nx g @nx/nest:app apps/<nest-app> --frontendProject my-react-app
|
||||
nx g @nx/express:app apps/<express-app> --frontendProject my-react-app
|
||||
```
|
||||
|
||||
This command will generate and configure a `proxy.conf.json` file that will be used by the frontend project's `serve` target to redirect calls to `/api` to instead go to `http://localhost:3000/api`.
|
||||
|
||||
@ -34,7 +34,7 @@ npx create-nx-plugin my-org --pluginName my-plugin
|
||||
To create our preset inside of our plugin we can run
|
||||
|
||||
```shell
|
||||
nx generate @nx/plugin:generator --name=preset --project=happynrwl
|
||||
nx generate @nx/plugin:generator packages/happynrwl/src/generators/preset
|
||||
```
|
||||
|
||||
{% callout type="warning" title="Double check" %}
|
||||
|
||||
@ -10,13 +10,13 @@ If you don't already have a plugin, use Nx to generate one:
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @nx/plugin
|
||||
nx g @nx/plugin:plugin my-plugin --directory tools/my-plugin
|
||||
nx g @nx/plugin:plugin tools/my-plugin
|
||||
```
|
||||
|
||||
Use the Nx CLI to generate the initial files needed for your executor.
|
||||
|
||||
```shell
|
||||
nx generate @nx/plugin:executor echo --directory=tools/my-plugin/src/executors/echo
|
||||
nx generate @nx/plugin:executor tools/my-plugin/src/executors/echo
|
||||
```
|
||||
|
||||
After the command is finished, the executor is created in the plugin `executors` folder.
|
||||
@ -176,7 +176,7 @@ For other ideas on how to create your own executors, you can always check out Nx
|
||||
|
||||
For most executors, the default hashing in Nx makes sense. The output of the executor is dependent on the files in the project that it is being run for, or that project's dependencies, and nothing else. Changing a miscellaneous file at the workspace root will not affect that executor, and changing _*any*_ file inside of the project may affect the executor. When dealing with targets which only depend on a small subset of the files in a project, or may depend on arbitrary data that is not stored within the project, the default hasher may not make sense anymore. In these cases, the target will either experience more frequent cache misses than necessary or not be able to be cached.
|
||||
|
||||
Executors can provide a custom hasher that Nx uses when determining if a target run should be a cache hit, or if it must be run. When generating an executor for a plugin, you can use `nx g @nx/plugin:executor my-executor --project my-plugin --includeHasher` to automatically add a custom hasher.
|
||||
Executors can provide a custom hasher that Nx uses when determining if a target run should be a cache hit, or if it must be run. When generating an executor for a plugin, you can use `nx g @nx/plugin:executor packages/my-plugin/src/executors/my-executor --includeHasher` to automatically add a custom hasher.
|
||||
|
||||
If you want to add a custom hasher manually, create a new file beside your executor's implementation. We will use `hasher.ts` as an example here. You'll also need to update `executors.json`, so that it resembles something like this:
|
||||
|
||||
|
||||
@ -11,7 +11,11 @@ For this example, we'll create a new migration generator that updates repos to u
|
||||
### 1. Generate a migration
|
||||
|
||||
```shell
|
||||
nx generate @nx/plugin:migration 'Change Executor Name' --packageVersion=2.0.1 --project=pluginName --description='Changes the executor name from oldExecutorName to newExecutorName'
|
||||
nx generate @nx/plugin:migration libs/pluginName/src/migrations/change-executor-name \
|
||||
--name='Change Executor Name' \
|
||||
--packageVersion=2.0.1 \
|
||||
--project=pluginName \
|
||||
--description='Changes the executor name from oldExecutorName to newExecutorName'
|
||||
```
|
||||
|
||||
This command will update the following files:
|
||||
|
||||
@ -50,7 +50,7 @@ For this recipe, we'll assume that the root-level app is named `my-app`. The hig
|
||||
3. Create a new app using the appropriate plugin under `apps/temp`
|
||||
|
||||
```shell
|
||||
nx g app temp
|
||||
nx g app apps/temp
|
||||
```
|
||||
|
||||
4. Move the `/src` (and `/public`, if present) folders to `apps/temp/`, overwriting the folders already there.
|
||||
|
||||
@ -25,7 +25,7 @@ The command below uses the `as-provided` directory flag behavior, which is the d
|
||||
{% /callout %}
|
||||
|
||||
```shell
|
||||
nx g @nx/react:library storybook-host --directory=libs/storybook-host --bundler=none --unitTestRunner=none --projectNameAndRootFormat=as-provided
|
||||
nx g @nx/react:library lib/storybook-host --bundler=none --unitTestRunner=none --projectNameAndRootFormat=as-provided
|
||||
```
|
||||
|
||||
Now, you have a new library, which will act as a shell/host for all your stories.
|
||||
|
||||
@ -91,15 +91,15 @@ The commands below uses the `as-provided` directory flag behavior, which is the
|
||||
{% /callout %}
|
||||
|
||||
```shell
|
||||
nx g @nx/angular:lib storybook-host-client --directory=libs/storybook-host-client --projectNameAndRootFormat=as-provided
|
||||
nx g @nx/angular:lib libs/storybook-host-client
|
||||
```
|
||||
|
||||
```shell
|
||||
nx g @nx/angular:lib storybook-host-admin --directory=libs/storybook-host-admin --projectNameAndRootFormat=as-provided
|
||||
nx g @nx/angular:lib libs/storybook-host-admin
|
||||
```
|
||||
|
||||
```shell
|
||||
nx g @nx/angular:lib storybook-host-shared --directory=libs/storybook-host-shared --projectNameAndRootFormat=as-provided
|
||||
nx g @nx/angular:lib libs/storybook-host-shared
|
||||
```
|
||||
|
||||
### Generate the Storybook configuration for the libraries
|
||||
|
||||
@ -35,7 +35,7 @@ The command below uses the `as-provided` directory flag behavior, which is the d
|
||||
So, let’s use React for the Storybook Composition host library:
|
||||
|
||||
```shell
|
||||
nx g @nx/react:lib storybook-host --directory=libs/storybook-host --bundler=none --unitTestRunner=none --projectNameAndRootFormat=as-provided
|
||||
nx g @nx/react:lib libs/storybook-host --bundler=none --unitTestRunner=none
|
||||
```
|
||||
|
||||
Now that your library is generated, you can write your intro in the generated component (you can also do this later, it does not matter).
|
||||
|
||||
@ -60,7 +60,7 @@ nx add my-plugin
|
||||
Runs a generator that creates and/or modifies files based on a generator from a plugin.
|
||||
|
||||
```shell
|
||||
nx generate @nx/react:component my-component
|
||||
nx generate @nx/react:component libs/my-lib/src/lib/my-component
|
||||
```
|
||||
|
||||
{% cards %}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user