Skip to content

Commit

Permalink
docs(devkit): improve structure and fix some typos
Browse files Browse the repository at this point in the history
  • Loading branch information
juristr committed Jul 5, 2023
1 parent c64f26e commit 4691d84
Showing 1 changed file with 11 additions and 9 deletions.
20 changes: 11 additions & 9 deletions docs/shared/recipes/plugins/create-preset.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## Preset
# Create a Custom Plugin Preset

When you create a new nx workspace, you run the command: [`npx create-nx-workspace`](/packages/nx/documents/create-nx-workspace).
This command accepts a `--preset` option, for example: `npx create-nx-workspace --preset=react-standalone`.
Expand All @@ -9,30 +9,32 @@ src="https://www.youtube.com/embed/yGUrF0-uqaU"
title="Develop a Nx Preset for your Nx Plugin"
width="100%" /%}

### Custom Preset
## What is a preset?

At its core a preset is a generator, which we can create inside of a plugin.
At its core, a preset is a special [generator](/plugin-features/use-code-generators) that is shipped as part of an Nx Plugin package.

All first-party Nx presets are built into nx itself, but you can [create your own plugin](/plugins/intro/getting-started) and create a generator with the magic name: `preset`. Once you've [published your plugin](/plugins/tutorials/publish-plugin) on npm, you can now run. the create-nx-workspace command with the preset option set to the name of your published package.
All first-party Nx presets are built into Nx itself, but you can [create your own plugin](/plugins/intro/getting-started) and create a generator with the magic name: `preset`. Once you've [published your plugin](/plugins/tutorials/publish-plugin) on npm, you can now run the `create-nx-workspace` command with the preset option set to the name of your published package.

For example, take
To use a concrete example, let's look at the [`qwik-nx`](https://www.npmjs.com/package/qwik-nx) Nx community plugin. They include a [preset generator](https://github.com/qwikifiers/qwik-nx/tree/main/packages/qwik-nx/src/generators/preset) that you can use to create a new Nx workspace with Qwik support.

```shell
npx create-nx-workspace --preset=qwik-nx
```

This command will create a new Qwik preset based on the [published npm package: `qwik-nx`](https://www.npmjs.com/package/qwik-nx). If we check this package's source code, we can see that it has a [generator named `preset`](https://github.com/qwikifiers/qwik-nx/tree/main/packages/qwik-nx/src/generators/preset).
## Create a new Nx plugin

If you **don't** have an existing plugin you can create one by running

```shell
npx create-nx-plugin my-org --pluginName my-plugin
npx create-nx-plugin my-org --pluginName my-plugin
```

## Creating a "Preset" generator

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 --name=preset --project=happynrwl
```

{% callout type="warning" title="Double check" %}
Expand Down Expand Up @@ -90,7 +92,7 @@ export default async function (tree: Tree, options: PresetGeneratorSchema) {

To get an in-depth guide on customizing/running or debugging your generator see [local generators](/plugins/recipes/local-generators).

#### Usage
## Usage

Before you are able to use your newly created preset you must package and publish it to a registry.

Expand Down

0 comments on commit 4691d84

Please sign in to comment.