nx/docs/shared/plugins/intro.md
Jack Hsu 66eaf2fc74
docs(misc): remove /nx-api pages (#31453)
This PR removes the `/nx-api` pages from `nx-dev`. They are already
redirected from `/nx-api` to either `/technologies` or
`/reference/core-api` URLs.

e.g. `/nx-api/nx` goes to `/reference/core-api/nx` and `/nx-api/react`
goes to `/technologies/react/api`

**Changes**:
- Remove old `nx-api.json` from being generated in
`scripts/documentation/generators/generate-manifests.ts` -- this was
used to generate the sitemap
- Remove `pages/nx-api` from Next.js app since we don't need them
- Remove workaround from link checker
`scripts/documentation/internal-link-checker.ts` -- the angular
rspack/rsbuild and other workarounds are gone now that they are proper
docs in `map.json`
- Update Powerpack/Remote Cache reference docs to exclude API documents
(since they are duplicated in the Intro page) --
`nx-dev/models-document/src/lib/mappings.ts`
- All content in `docs` have been updated with new URL structure

**Note:** Redirects are already handled, and Claude Code was used to
verify the updated `docs/` URLs (see report below). The twelve 404s
links were updated by hand.

## Verification Report

https://gist.github.com/jaysoo/c7863fe7e091cb77929d1976165c357a
2025-06-04 16:57:01 -04:00

5.1 KiB

title description
Extending Nx with Plugins Learn how to create custom Nx plugins to enforce best practices, integrate tools, and share functionality across your organization's repositories.

Extending Nx with Plugins

Nx's core functionality focuses on task running and understanding your project and task graph. Nx plugins leverage that functionality to enforce best practices, seamlessly integrate tooling and allow developers to get up and running quickly.

As your repository grows, you'll discover more reasons to create your own plugin

  • You can help encourage your coworkers to consistently follow best practices by creating code generators that are custom built for your repository.
  • You can remove duplicate configuration and ensure accurate caching settings by writing your own inferred tasks.
  • For organizations with multiple monorepos, you can encourage consistency across repositories by providing a repository preset and writing migrations that will help keep every project in sync.
  • You can write a plugin that integrates a tool or framework into Nx and then share your plugin with the broader community.

Create Your Own Plugin

Get started developing your own plugin with a few terminal commands:

{% side-by-side %}

npx create-nx-plugin my-plugin
npx nx add @nx/plugin
npx nx g plugin tools/my-plugin

{% /side-by-side %}

Learn by Doing

You can follow along with one of the step by step tutorials below that is focused on a particular use-case. These tutorials expect you to already have the following skills:

{% cards cols="2" %}

{% link-card title="Enforce Best Practices in Your Repository" type="tutorial" url="/extending-nx/tutorials/organization-specific-plugin" icon="BuildingOfficeIcon" /%} {% link-card title="Integrate a Tool Into an Nx Repository" type="tutorial" url="/extending-nx/tutorials/tooling-plugin" icon="WrenchScrewdriverIcon" /%}

{% /cards %}

Create Your First Code Generator

Wire up a new generator with this terminal command:

npx nx g generator my-plugin/src/generators/library-with-readme

Understand the Generator Functionality

This command will register the generator in the plugin's generators.json file and create some default generator code in the library-with-readme folder. The libraryWithReadmeGenerator function in the generator.ts file is where the generator functionality is defined.

export async function libraryWithReadmeGenerator(
  tree: Tree,
  options: LibraryWithReadmeGeneratorSchema
) {
  const projectRoot = `libs/${options.name}`;
  addProjectConfiguration(tree, options.name, {
    root: projectRoot,
    projectType: 'library',
    sourceRoot: `${projectRoot}/src`,
    targets: {},
  });
  generateFiles(tree, path.join(__dirname, 'files'), projectRoot, options);
  await formatFiles(tree);
}

This generator calls the following functions:

  • addProjectConfiguration - Create a new project configured for TypeScript code.
  • generateFiles - Create files in the new project based on the template files in the files folder.
  • formatFiles - Format the newly created files with Prettier.

You can find more helper functions in the Nx Devkit reference documentation.

Create a README Template File

We can remove the generated index.ts.template file and add our own README.md.template file in the files folder.

# <%= name %>

This was generated by the `library-with-readme` generator!

The template files that are used in the generateFiles function can inject variables and functionality using the EJS syntax. Our README template will replace <%= name %> with the name specified in the generator. Read more about the EJS syntax in the creating files with a generator recipe.

Run Your Generator

You can test your generator in dry-run mode with the following command:

npx nx g my-plugin:library-with-readme mylib --dry-run

If you're happy with the files that are generated, you can actually run the generator by removing the --dry-run flag.

Next Steps