docs: Add CLI references in docs

docs/docs/guides/developer-guide/cli/index.md

@@ -14,9 +14,7 @@ such as creating new plugins, entities, API extensions and more.
 The Vendure CLI comes installed with a new Vendure project by default from v2.2.0+
 :::
 
-You can install the CLI locally in your Vendure project, or you can run it without installation using `npx`. 
-The advantage of installing locally is that you can more easily control the installed version, and you 
-can reference the CLI using the `vendure` command.
+To manually install the CLI, run:
 
 <Tabs groupId="package-manager">
 <TabItem value="npm" label="npm" default>

docs/docs/guides/developer-guide/database-entity/index.md

@@ -3,6 +3,10 @@ title: "Define a database entity"
 showtoc: true
 ---
 
+:::cli
+Use `npx vendure add` to easily add a new entity to a plugin.
+:::
+
 Your plugin can define new database entities to model the data it needs to store. For instance, a product
 review plugin would need a way to store reviews. This would be done by defining a new database entity.
 

docs/docs/guides/developer-guide/migrations/index.md

@@ -45,25 +45,9 @@ Since we have `synchronize` set to `false`, we need to generate a migration to a
 
 ### 1. Generate a migration
 
-Run the following command:
-
-
-<Tabs>
-<TabItem value="npm" label="npm" default>
-
-```
-npm run migration:generate add-keywords-field
-```
-
-</TabItem>
-<TabItem value="yarn" label="yarn">
-
-```
-yarn migration:generate add-keywords-field
-```
-
-</TabItem>
-</Tabs>
+:::cli
+Run `npx vendure migrate` and select "Generate a new migration"
+:::
 
 ### 2. Check the migration file
 
@@ -110,22 +94,9 @@ runMigrations(config)
 
 It is also possible to run the migration manually without starting the server:
 
-<Tabs>
-<TabItem value="npm" label="npm" default>
-
-```
-npm run migration:run
-```
-
-</TabItem>
-<TabItem value="yarn" label="yarn">
-
-```
-yarn migration:run
-```
-
-</TabItem>
-</Tabs>
+:::cli
+Run `npx vendure migrate` and select "Run pending migrations"
+:::
 
 :::caution
 TypeORM will attempt to run each migration inside a transaction. This means that if one of the migration commands fails, then the entire transaction will be rolled back to its original state.
@@ -139,9 +110,12 @@ You can read more about this issue in [typeorm/issues/7054](https://github.com/t
 
 Now we'll dive into what's going on under the hood.
 
-Vendure exposes a some helper function which wrap around the underlying [TypeORM migration functionality](https://typeorm.io/migrations). The reason for using these helper functions rather than using the TypeORM CLI directly is that Vendure generates additional schema information based on custom fields and plugin configurations which are not available to the TypeORM CLI.
+Vendure exposes a some helper function which wrap around the underlying [TypeORM migration functionality](https://typeorm.io/migrations). The 
+reason for using these helper functions rather than using the TypeORM CLI directly is that Vendure generates additional 
+schema information based on custom fields and plugin configurations which are not available to the TypeORM CLI.
 
-In a standard Vendure installation, you'll see the following migration script in your project root directory:
+In a standard Vendure installation prior to v2.2.0, you'll see the following migration script in your project root directory.
+Running the `vendure migrate` command also uses a very similar script internally.
 
 ```ts title="migration.ts"
 import { generateMigration, revertLastMigration, runMigrations } from '@vendure/core';

docs/docs/guides/developer-guide/plugins/index.mdx

@@ -134,7 +134,20 @@ export class MyPlugin implements NestModule {
 }
 ```
 
-## Writing your first plugin
+## Create a Plugin via CLI
+
+:::cli
+Run the `npx vendure add` command, and select "Create a new Vendure plugin".
+
+This will guide you through the creation of a new plugin and automate all aspects of the process.
+
+This is the recommended way of creating a new plugin.
+:::
+
+## Writing a plugin from scratch
+
+Although the [Vendure CLI](/guides/developer-guide/cli/) is the recommended way to create a new plugin, it can be useful to understand the process of creating
+a plugin manually.
 
 In Vendure **plugins** are used to extend the core functionality of the server. Plugins can be pre-made functionality that you can install via npm, or they can be custom plugins that you write yourself.
 

docs/docs/guides/developer-guide/worker-job-queue/index.mdx

@@ -214,6 +214,10 @@ The resolver just defines how to handle the new `addVideoToProduct` mutation, de
 
 ### Creating a job queue
 
+:::cli
+Use `npx vendure add` to easily add a job queue to a service.
+:::
+
 The [`JobQueueService`](/reference/typescript-api/job-queue/job-queue-service/) creates and manages job queues. The queue is created when the
 application starts up (see [NestJS lifecycle events](https://docs.nestjs.com/fundamentals/lifecycle-events)), and then we can use the `add()` method to add jobs to the queue.
 
@@ -291,7 +295,6 @@ Plugin code typically gets executed on both the server _and_ the worker. Therefo
 what context you are in. This can be done with the [ProcessContext](/reference/typescript-api/common/process-context/) provider.
 :::
 
-
 Finally, the `ProductVideoPlugin` brings it all together, extending the GraphQL API, defining the required CustomField to store the transcoded video URL, and registering our service and resolver. The [PluginCommonModule](/reference/typescript-api/plugin/plugin-common-module/) is imported as it exports the `JobQueueService`.
 
 ```ts title="src/plugins/product-video/product-video.plugin.ts"

docs/docs/guides/extending-the-admin-ui/getting-started/index.md

@@ -16,9 +16,21 @@ UI extensions fall into two categories:
 -   **Providers**: these are used to add new functionality to the Admin UI, such as adding buttons to pages, adding new nav menu items, or defining custom form inputs. They would typically be defined in a file named `providers.ts`.
 -   **Routes**: these are used to define new pages in the Admin UI, such as a new page for managing a custom entity. They would typically be defined in a file named `routes.ts`.
 
-## Install `@vendure/ui-devkit`
+## Setup
 
-To extend the Admin UI, install the [`@vendure/ui-devkit` package](https://www.npmjs.com/package/@vendure/ui-devkit) as a dev dependency:
+:::cli
+Use `npx vendure add` and select "Set up Admin UI extensions".
+
+Then follow the prompts, which will guide you through the process of 
+setting up the necessary files and folders for your UI extensions.
+:::
+
+### Manual setup
+
+It is recommended to use the `vendure add` command as described above, but if you prefer to set up the 
+Admin UI extensions manually, follow these steps:
+
+First, install the [`@vendure/ui-devkit` package](https://www.npmjs.com/package/@vendure/ui-devkit) as a dev dependency:
 
 <Tabs>
 <TabItem value="npm" label="npm" default>

docs/docs/guides/getting-started/installation/index.md

@@ -8,9 +8,10 @@ import TabItem from '@theme/TabItem';
 
 ## Requirements
  
-* [Node.js](https://nodejs.org/en/) **v16** or above, with support for **even-numbered Node.js versions**.
+* [Node.js](https://nodejs.org/en/) **v18** or above, with support for **even-numbered Node.js versions**.
 * The [supported TypeScript version](https://github.com/vendure-ecommerce/vendure/blob/master/packages/create/src/constants.ts#L7) is set upon installation. Upgrading to a newer version of TypeScript might result in compilation errors.
 * If you want to use MySQL, MariaDB, or Postgres as your data store, then you'll need an instance available locally. However, **if you are just testing out Vendure, we recommend using SQLite**, which has no external requirements.
+* If you use **Yarn**, from Vendure v2.2.0+, you'll need to use **Yarn 2** (Berry) or above.
 
 ## @vendure/create
 
@@ -89,6 +90,11 @@ Open the Admin UI at [http://localhost:3000/admin](http://localhost:3000/admin)
 * **password**: superadmin
 :::
 
+
+:::cli
+Use `npx vendure add` to start adding plugins & custom functionality to your Vendure server.
+:::
+
 ### Troubleshooting
 
 If you encounter any issues during installation, you can get a more detailed output by setting the log level to `verbose`:

docs/docs/guides/how-to/codegen/index.md

@@ -8,12 +8,19 @@ write any types for your API calls.
 
 To do this, we will use [Graphql Code Generator](https://the-guild.dev/graphql/codegen).
 
+:::cli
+Use `npx vendure add` and select "Set up GraphQL code generation" to quickly set up code generation.
+:::
+
 :::note
 This guide is for adding codegen to your Vendure plugins & Admin UI extensions. For a guide on adding codegen to your storefront, see the [Storefront Codegen](/guides/storefront/codegen/) guide.
 :::
 
 ## Installation
 
+It is recommended to use the `vendure add` CLI command as detailed above to set up codegen. 
+If you prefer to set it up manually, follow the steps below.
+
 First, install the required dependencies:
 
 ```bash

docs/docusaurus.config.js

@@ -41,6 +41,10 @@ const config = {
                     sidebarPath: require.resolve('./sidebars.js'),
                     editUrl: 'https://github.com/vendure-ecommerce/vendure/blob/master/docs/',
                     showLastUpdateTime: true,
+                    admonitions: {
+                        tag: ':::',
+                        keywords: ['note', 'tip', 'info', 'caution', 'danger', 'cli'],
+                    },
                 },
                 blog: false,
                 theme: {

docs/src/css/overrides.css

@@ -57,3 +57,12 @@ button.DocSearch-Button {
     width: 250px;
     border: 1px solid var(--color-docsearch-border);
 }
+
+.theme-admonition-cli {
+    background-color: #2b2b2b;
+    color: #fff;
+}
+
+.theme-admonition-cli a:link, .theme-admonition-cli a:visited {
+    color: #fff;
+}

docs/src/theme/Admonition/index.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import Admonition from '@theme-original/Admonition';
+import Link from '@docusaurus/Link';
+
+export default function AdmonitionWrapper(props) {
+    if (props.type !== 'cli') {
+        return <Admonition {...props} />;
+    }
+    return (
+        <Admonition
+            icon={<CliIcon />}
+            title={'Vendure CLI'}
+            {...props}
+            children={
+                <>
+                    {props.children}
+                    <div style={{ fontSize: '12px' }}>
+                        Learn more about the <Link href={'/guides/developer-guide/cli/'}>Vendure CLI</Link>
+                    </div>
+                </>
+            }
+        />
+    );
+}
+
+function CliIcon() {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-6 h-6"
+            style={{ fill: 'rgb(8 32 41)', stroke: '#fff' }}
+        >
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"
+            />
+        </svg>
+    );
+}