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
3.3 KiB
| title | description |
|---|---|
| Generate Code | Learn how to use Nx code generators to automate repetitive tasks, scaffold new projects, and maintain consistency in your codebase. |
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
- 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 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:
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.
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:
nx list @nx/react
Use Nx Console
If you prefer a visual interface, then Nx Console 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.
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:
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 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" /%}
