8fa7065cf1
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 #
70 lines
3.1 KiB
Markdown
70 lines
3.1 KiB
Markdown
# Generate Code
|
|
|
|
{% youtube src="https://youtu.be/hSM6MgWOYr8" title="Generate Code" /%}
|
|
|
|
Code generators are like automation scripts designed to streamline your workflow. Essentially, they are TypeScript functions that accept parameters and help boost your productivity by:
|
|
|
|
- Allowing you to **scaffold new projects** or **augment existing projects** with new features, like [adding Storybook support](/nx-api/storybook#generating-storybook-configuration)
|
|
- **Automating repetitive tasks** in your development workflow
|
|
- Ensuring your **code is consistent and follows best practices**
|
|
|
|
## Invoke Generators
|
|
|
|
Generators come as part of [Nx plugins](/concepts/nx-plugins) and can be invoked using the `nx generate` command (or `nx g`) using the following syntax: `nx g <plugin-name>:<generator-name> [options]`.
|
|
|
|
Here's an example of generating a React library:
|
|
|
|
```shell
|
|
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 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.
|
|
|
|
To see a list of available generators in a given plugin, run `nx list <plugin-name>`. As an example, to list all generators in the @nx/react plugin:
|
|
|
|
```shell
|
|
nx list @nx/react
|
|
```
|
|
|
|
### Use Nx Console
|
|
|
|
If you prefer a visual interface, then [Nx Console](/getting-started/editor-setup) is an excellent alternative. It provides a way to visually find and run generators:
|
|
|
|
|
|
|
|
Nx Console is an IDE extension that can be [installed here](/getting-started/editor-setup).
|
|
|
|
## Build Your Own Generator
|
|
|
|
You can also customize existing generators by overwriting their behavior or create completely new ones. This is a powerful mechanism as it allows you to:
|
|
|
|
- **automate** your organization's specific processes and workflows
|
|
- **standardize** how and where projects are created in your workspace to make sure they reflect your organization's best practices and coding standards
|
|
- **ensure** that your codebase follows your organization's best practices and style guides
|
|
|
|
At their core, generators are just functions with a specific signature and input options that get invoked by Nx. Something like the following:
|
|
|
|
```typescript
|
|
import { Tree, formatFiles, installPackagesTask } from '@nx/devkit';
|
|
|
|
export default async function (tree: Tree, schema: any) {
|
|
// Your implementation here
|
|
// ...
|
|
|
|
await formatFiles(tree);
|
|
return () => {
|
|
installPackagesTask(tree);
|
|
};
|
|
}
|
|
```
|
|
|
|
To help build generators, Nx provides the `@nx/devkit` package containing utilities and helpers. Learn more about creating your own generators on [our docs page](/extending-nx/recipes/local-generators) or watch the video below:
|
|
|
|
{% youtube src="https://www.youtube.com/embed/myqfGDWC2go" title="Scaffold new Pkgs in a PNPM Workspaces Monorepo" caption="Demonstrates how to use Nx generators in a PNPM workspace to automate the creation of libraries" /%}
|