diff --git a/docs/shared/getting-started/installation.md b/docs/shared/getting-started/installation.md index ee8eca6447..d9b3268732 100644 --- a/docs/shared/getting-started/installation.md +++ b/docs/shared/getting-started/installation.md @@ -5,36 +5,34 @@ Create a new Nx workspace using the following command: {% tabs %} {% tab label="npm" %} -```shell -npm create nx-workspace -``` +{% terminal-command command="npx create-nx-workspace" /%} {% /tab %} {% tab label="yarn" %} -```shell -yarn create nx-workspace -``` +{% terminal-command command="npx create-nx-workspace --pm yarn" /%} {% /tab %} {% tab label="pnpm" %} -```shell -pnpm create nx-workspace -``` +{% terminal-command command="npx create-nx-workspace --pm pnpm" /%} {% /tab %} {% /tabs %} This will guide you through the setup, asking whether you want a monorepo or a standalone app and whether you want to start with a blank or a preconfigured setup. -```{% command="npm create nx-workspace" %} -? Choose what to create … -Package-based monorepo: Nx makes it fast but lets you run things your way. -Integrated monorepo: Nx configures your favorite frameworks and lets you focus on shipping features. -Standalone React app: Nx configures Vite (or Webpack), ESLint, and Cypress. -Standalone Angular app: Nx configures Jest, ESLint, and Cypress. -Standalone Node app: Nx configures a framework (ex. Express), esbuild, ESlint and Jest. +```{% command="npx create-nx-workspace" %} + + > NX Let's create a new workspace [https://nx.dev/getting-started/intro] + +✔ Where would you like to create your workspace? · myorg +? Which stack do you want to use? … +None: Configures a minimal structure without specific frameworks or technologies. +TS/JS: Configures a TypeScript/JavaScript package without specific frameworks or platforms. +React: Configures a React app with your framework of choice. +Angular: Configures a Angular app with modern tooling. +Node: Configures a Node API with your framework of choice. ``` Once you've created your workspace, you can @@ -50,9 +48,7 @@ Learn more about [running tasks](/core-features/run-tasks). If you want to add Nx to an existing repository run: -```shell -npx nx@latest init -``` +{% terminal-command command="npx nx@latest init" /%} You can also manually install the nx NPM package and create a [nx.json](https://nx.dev/reference/nx-json) to configure it. Learn more about [adopting Nx in an existing project](/recipes/adopting-nx) @@ -63,23 +59,17 @@ You can install Nx globally. Depending on your package manager, use one of the f {% tabs %} {% tab label="npm" %} -```shell -npm install --global nx@latest -``` +{% terminal-command command="npm install --global nx@latest" /%} {% /tab %} {% tab label="yarn" %} -```shell -yarn global add nx@latest -``` +{% terminal-command command="yarn global add nx@latest" /%} {% /tab %} {% tab label="pnpm" %} -```shell -pnpm install --global nx@latest -``` +{% terminal-command command="pnpm install --global nx@latest" /%} {% /tab %} {% /tabs %} diff --git a/docs/shared/getting-started/intro.md b/docs/shared/getting-started/intro.md index fd1f2ca146..e373e88e21 100644 --- a/docs/shared/getting-started/intro.md +++ b/docs/shared/getting-started/intro.md @@ -1,6 +1,26 @@ # Intro to Nx -Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. Learn more about [how Nx works](/getting-started/why-nx). +Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. Find out more about [why you should use Nx](/getting-started/why-nx). + +If instead you want to jump right into it, run the following command. It will guide you through the setup: + +{% tabs %} +{% tab label="npm" %} + +{% terminal-command command="npx create-nx-workspace" /%} + +{% /tab %} +{% tab label="yarn" %} + +{% terminal-command command="npx create-nx-workspace --pm yarn" /%} + +{% /tab %} +{% tab label="pnpm" %} + +{% terminal-command command="npx create-nx-workspace --pm pnpm" /%} + +{% /tab %} +{% /tabs %} You can use Nx to quickly scaffold a new standalone project or even an entire monorepo. It can be incrementally adopted and will grow with your project as it scales. @@ -70,7 +90,11 @@ A modern Node server with scaffolding for Express, Fastify or Koa. There's also ## Adding Nx to an Existing Project or Monorepo -Coming from an existing project and want to adopt Nx? We have a few recipes to help you get started. +If you have an existing project and want to adopt Nx or migrate to Nx just run the following command which guides you through the migration process: + +{% terminal-command command="npx nx@latest init" /%} + +Alternatively, here are some recipes that give you more details based on the technology stack you're using: {% cards cols="2" %} diff --git a/nx-dev/ui-markdoc/src/index.ts b/nx-dev/ui-markdoc/src/index.ts index b88b4e7476..98773fe96e 100644 --- a/nx-dev/ui-markdoc/src/index.ts +++ b/nx-dev/ui-markdoc/src/index.ts @@ -39,6 +39,10 @@ import { Tab, Tabs } from './lib/tags/tabs.component'; import { tab, tabs } from './lib/tags/tabs.schema'; import { YouTube } from './lib/tags/youtube.components'; import { youtube } from './lib/tags/youtube.schema'; +import { + TerminalCommand, + terminalCommand, +} from './lib/tags/terminal-command.component'; // TODO fix this export export { GithubRepository } from './lib/tags/github-repository.component'; @@ -70,6 +74,7 @@ export const getMarkdocCustomConfig = ( tabs, 'title-card': titleCard, youtube, + 'terminal-command': terminalCommand, }, }, components: { @@ -92,6 +97,7 @@ export const getMarkdocCustomConfig = ( Tabs, TitleCard, YouTube, + TerminalCommand, }, }); diff --git a/nx-dev/ui-markdoc/src/lib/nodes/fences/terminal-output.component.tsx b/nx-dev/ui-markdoc/src/lib/nodes/fences/terminal-output.component.tsx index 8d872cb961..2dc7772626 100644 --- a/nx-dev/ui-markdoc/src/lib/nodes/fences/terminal-output.component.tsx +++ b/nx-dev/ui-markdoc/src/lib/nodes/fences/terminal-output.component.tsx @@ -7,7 +7,7 @@ export function TerminalOutput({ isMessageBelow, path, }: { - content: ReactNode; + content: ReactNode | null; command: string; isMessageBelow: boolean; path: string; @@ -25,19 +25,21 @@ export function TerminalOutput({ - Terminal +

- - {path} - + {path && ( + + {path} + + )} ❯

{command}

-
{content}
+
{content}
); diff --git a/nx-dev/ui-markdoc/src/lib/tags/terminal-command.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/terminal-command.component.tsx new file mode 100644 index 0000000000..9e3a2f852f --- /dev/null +++ b/nx-dev/ui-markdoc/src/lib/tags/terminal-command.component.tsx @@ -0,0 +1,33 @@ +import { Schema } from '@markdoc/markdoc'; +import { TerminalOutput } from '../nodes/fences/terminal-output.component'; + +export const terminalCommand: Schema = { + render: 'TerminalCommand', + attributes: { + command: { + type: 'String', + required: true, + }, + path: { + type: 'String', + required: false, + }, + }, +}; + +export function TerminalCommand({ + command, + path, +}: { + command: string; + path: string; +}): JSX.Element { + return ( + + ); +}