From f6a985d80f2f5a6e828bbc0ee15a41a4e9af1a15 Mon Sep 17 00:00:00 2001 From: Juri Strumpflohner Date: Tue, 6 Dec 2022 16:29:47 +0100 Subject: [PATCH] feat(nxdev): allow to change columns on cards (#13522) --- docs/generated/packages/vite.json | 2 +- docs/map.json | 18 +++--- .../1-code-generation.md | 2 +- .../angular-tutorial/1-code-generation.md | 4 +- .../angular-tutorial/2-project-graph.md | 2 +- .../shared/angular-tutorial/3-task-running.md | 2 +- .../4-workspace-optimization.md | 2 +- docs/shared/angular-tutorial/5-summary.md | 2 +- docs/shared/core-tutorial/01-create-blog.md | 2 +- docs/shared/getting-started/intro.md | 61 +++++++++++-------- .../migration/adding-to-existing-project.md | 6 -- .../1-code-generation.md | 3 +- .../react-tutorial/1-code-generation.md | 4 +- docs/shared/react-tutorial/2-project-graph.md | 2 +- docs/shared/react-tutorial/3-task-running.md | 2 +- .../4-workspace-optimization.md | 2 +- docs/shared/react-tutorial/5-summary.md | 2 +- docs/shared/vite-plugin.md | 4 -- .../src/lib/tags/cards.component.tsx | 22 ++++++- .../ui-markdoc/src/lib/tags/cards.schema.ts | 7 ++- .../src/lib/tags/personas.component.tsx | 14 +++++ 21 files changed, 102 insertions(+), 63 deletions(-) diff --git a/docs/generated/packages/vite.json b/docs/generated/packages/vite.json index 5fdfd535c4..eb22652a0d 100644 --- a/docs/generated/packages/vite.json +++ b/docs/generated/packages/vite.json @@ -11,7 +11,7 @@ "id": "overview", "path": "/packages/vite", "file": "shared/vite-plugin", - "content": "The Nx plugin for [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/).\n\n{% callout type=\"warning\" title=\"Early release plugin\" %}\nThis Nx plugin is in active development and may not be ready for real-world use. The planned release date for the stable plugin is December, 2022.\n{% /callout %}\n\n[Vite.js](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.\n\nWhy should you use this plugin?\n\n- Instant dev server start\n- Lightning fast Hot-Module Reloading\n- _Fast_ builds using Vite.\n- Vite-powered tests with smart and instant watch mode\n\nRead more about Vite and Vitest in the [Vite documentation](https://vitejs.dev/).\n\n## Setting up Vite\n\nYou can create a new workspace that uses Vite with one of the following commands:\n\n- Generate a new monorepo with a Web Components app set up with Vite\n\n```shell\nnpx create-nx-workspace@latest --preset=web-components\n```\n\n- Generate a new standalone React app set up with Vite\n\n```shell\nnpx create-nx-workspace@latest --preset=react-standalone\n```\n\n### Add Vite to an existing workspace\n\nTo add the Vite plugin to an existing workspace, run the following:\n\n{% tabs %}\n{% tab label=\"npm\" %}\n\n```shell\nnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"yarn\" %}\n\n```shell\nyarn add -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"pnpm\" %}\n\n```shell\npnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% /tabs %}\n\n### Initialize Vite.js\n\nAfter you install the plugin, you need to initialize Vite.js. You can do this by running the `init` executor. This executor will make sure to install all the necessary dependencies.\n\n```bash\nnx g @nrwl/vite:init\n```\n\n{% callout type=\"note\" title=\"Choosing a framework\" %}\nYou will notice that the executor will ask you of the framework you are planning to use. This is just to make sure that the right dependencies are installed. You can always install manually any other dependencies you need.\n{% /callout %}\n\n## Generate an application using Vite\n\nYou can generate a React or a Web application that uses Vite.js. The `@nrwl/react:app` and `@nrwl/web:app` generators accept the `bundler` option, where you can pass `vite`. This will generate a new application configured to use Vite.js, and it will also install all the necessary dependencies.\n\nTo generate a React application using Vite.js, run the following:\n\n```bash\nnx g @nrwl/react:app my-app --bundler=vite\n```\n\nTo generate a Web application using Vite.js, run the following:\n\n```bash\nnx g @nrwl/web:app my-app --bundler=vite\n```\n\n## Modify an existing React or Web application to use Vite.js\n\nYou can use the `@nrwl/vite:configuration` generator to change your React or Web application to use Vite.js. This generator will modify your application's configuration to use Vite.js, and it will also install all the necessary dependencies.\n\nYou can read more about this generator on the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator page.\n\n## Set up your apps to use Vite.js manually\n\nYou can use the `@nrwl/vite:dev-server` and the `@nrwl/vite:build` executors to serve and build your applications using Vite.js. To do this, you need to make a few adjustments to your application.\n\n{% github-repository url=\"https://github.com/mandarini/nx-recipes/tree/feat/react-vite-recipe/vite-example\" /%}\n\n### 1. Change the executors in your `project.json`\n\n#### The `serve` target\n\nIn your app's `project.json` file, change the executor of your `serve` target to use `@nrwl/vite:dev-server` and set it up with the following options:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"serve\": {\n \"executor\": \"@nrwl/vite:dev-server\",\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"buildTarget\": \"my-app:build\",\n \"port\": 4200,\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% callout type=\"note\" title=\"Other options\" %}\nYou do not have to set the `port` here, necessarily. You can also specify the port in the `vite.config.ts` file (see **Step 2** below).\nThe same goes for all other Vite.js options that you can find the [Vite.js documentation](https://vitejs.dev/config/). All these can be added in your `vite.config.ts` file.\n{% /callout %}\n\n#### The `build` target\n\nIn your app's `project.json` file, change the executor of your `build` target to use `@nrwl/vite:build` and set it up with the following options:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nrwl/vite:build\",\n ...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% callout type=\"note\" title=\"Other options\" %}\nYou can specify more options in the `vite.config.ts` file (see **Step 2** below).\n{% /callout %}\n\n### 2. Configure Vite.js\n\n#### TypeScript paths\n\nYou need to use the [`vite-tsconfig-paths` plugin](https://www.npmjs.com/package/vite-tsconfig-paths) to make sure that your TypeScript paths are resolved correctly in your monorepo.\n\n#### React plugin\n\nIf you are using React, you need to use the [`@vitejs/plugin-react` plugin](https://www.npmjs.com/package/@vitejs/plugin-react).\n\n#### How your `vite.config.ts` looks like\n\nAdd a `vite.config.ts` file to the root of your app. If you are not using React, you can skip adding the `react` plugin, of course.\n\n```ts\n// eg. apps/my-app/vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';\n\nexport default defineConfig({\n plugins: [\n react(),\n ViteTsConfigPathsPlugin({\n root: '../../',\n projects: ['tsconfig.base.json'],\n }),\n ],\n});\n```\n\n{% callout type=\"note\" title=\"The `root` path\" %}\nMake sure the `root` path in the `ViteTsConfigPathsPlugin` options is correct. It should be the path to the root of your workspace.\n{% /callout %}\n\nIn that config file, you can configure Vite.js as you would normally do. For more information, see the [Vite.js documentation](https://vitejs.dev/config/).\n\n#### Creating a root `vite.config.ts` file\n\nYou can create a `vite.config.ts` file to the root of your workspace, as well as at the root of each of your applications. This file is used to configure Vite. You can read more about the configuration options in the [Vite documentation](https://vitejs.dev/config/).\n\nThe root `vite.config.ts` file can be used for all applications, and you can place in there general configurations that would apply for all your apps using Vite in your workspace. The application-specific `vite.config.ts` files can be used to override the root configuration, or, for example, import framework-specific plugins (eg. the `'@vitejs/plugin-react'` for React apps). The application-specific configuration files extend (using [`mergeConfig`](https://vitejs.dev/guide/api-javascript.html#mergeconfig)) the root configuration file. You can adjust this behavior to your needs.\n\nSo, if you are using a root `vite.config.ts` file, you should adjust your code as follows:\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n plugins: [],\n});\n```\n\nand then in your app's `vite.config.ts` file:\n\n```ts\n// eg. apps/my-app/vite.config.ts\nimport { mergeConfig } from 'vite';\nimport baseConfig from '../../vite.config';\nimport react from '@vitejs/plugin-react';\nimport ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';\n\nexport default mergeConfig(baseConfig, {\n plugins: [\n react(),\n ViteTsConfigPathsPlugin({\n root: '../../',\n projects: ['tsconfig.base.json'],\n }),\n ],\n});\n```\n\n### 3. Move `index.html` and point it to your app's entrypoint\n\nFirst of all, move your `index.html` file to the root of your app (eg. from `apps/my-app/src/index.html` to `apps/my-app/index.html`).\n\nThen, add a module `script` tag pointing to the `main.tsx` (or `main.ts`) file of your app:\n\n```html\n...\n \n
\n \n \n\n```\n\n### 4. Add a `public` folder\n\nYou can add a `public` folder to the root of your app. You can read more about the public folder in the [Vite.js documentation](https://vitejs.dev/guide/assets.html#the-public-directory).\n\n```treeview\nmyorg/\n├── apps/\n│ ├── my-app/\n│ │ ├── src/\n│ │ │ ├── app/\n│ │ │ ├── assets/\n│ │ │ ├── ...\n│ │ │ └── main.tsx\n│ │ ├── index.html\n│ │ ├── public/\n| . | . | ├── favicon.ico\n│ │ │ └── my-page.md\n│ │ ├── project.json\n│ │ ├── ...\n│ │ ├── tsconfig.app.json\n│ │ ├── tsconfig.json\n│ │ └── tsconfig.spec.json\n```\n\nYou can use the `public` folder to store static **assets**, such as images, fonts, and so on. You can also use it to store Markdown files, which you can then import in your app and use as a source of content.\n\n### 5. Adjust your app's tsconfig.json\n\nChange your app's `tsconfig.json` (eg. `apps/my-app/tsconfig.json`) `compilerOptions` to the following:\n\n#### For React apps\n\n```json\n...\n \"compilerOptions\": {\n \"jsx\": \"react-jsx\",\n \"allowJs\": false,\n \"esModuleInterop\": false,\n \"allowSyntheticDefaultImports\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"isolatedModules\": true,\n \"lib\": [\"DOM\", \"DOM.Iterable\", \"ESNext\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Node\",\n \"noEmit\": true,\n \"resolveJsonModule\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"target\": \"ESNext\",\n \"types\": [\"vite/client\"],\n \"useDefineForClassFields\": true\n },\n...\n```\n\n#### For Web apps\n\n```json\n...\n \"compilerOptions\": {\n \"target\": \"ESNext\",\n \"useDefineForClassFields\": true,\n \"module\": \"ESNext\",\n \"lib\": [\"ESNext\", \"DOM\"],\n \"moduleResolution\": \"Node\",\n \"strict\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"esModuleInterop\": true,\n \"noEmit\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noImplicitReturns\": true,\n \"skipLibCheck\": true,\n \"types\": [\"vite/client\"]\n },\n \"include\": [\"src\"],\n...\n```\n\nYou can read more about the TypeScript compiler options in the [Vite.js documentation](https://vitejs.dev/guide/features.html#typescript-compiler-options).\n\n### 6. Use Vite.js!\n\nNow you can finally serve and build your app using Vite.js:\n\n#### Serve the app\n\n```\nnx serve my-app\n```\n\nor\n\n```\nnx run my-app:serve\n```\n\nNow, visit [http://localhost:4200](http://localhost:4200) to see your app running!\n\n#### Build the app\n\n```\nnx build my-app\n```\n\nor\n\n```\nnx run my-app:build\n```\n" + "content": "The Nx plugin for [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/).\n\n[Vite.js](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.\n\nWhy should you use this plugin?\n\n- Instant dev server start\n- Lightning fast Hot-Module Reloading\n- _Fast_ builds using Vite.\n- Vite-powered tests with smart and instant watch mode\n\nRead more about Vite and Vitest in the [Vite documentation](https://vitejs.dev/).\n\n## Setting up Vite\n\nYou can create a new workspace that uses Vite with one of the following commands:\n\n- Generate a new monorepo with a Web Components app set up with Vite\n\n```shell\nnpx create-nx-workspace@latest --preset=web-components\n```\n\n- Generate a new standalone React app set up with Vite\n\n```shell\nnpx create-nx-workspace@latest --preset=react-standalone\n```\n\n### Add Vite to an existing workspace\n\nTo add the Vite plugin to an existing workspace, run the following:\n\n{% tabs %}\n{% tab label=\"npm\" %}\n\n```shell\nnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"yarn\" %}\n\n```shell\nyarn add -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"pnpm\" %}\n\n```shell\npnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% /tabs %}\n\n### Initialize Vite.js\n\nAfter you install the plugin, you need to initialize Vite.js. You can do this by running the `init` executor. This executor will make sure to install all the necessary dependencies.\n\n```bash\nnx g @nrwl/vite:init\n```\n\n{% callout type=\"note\" title=\"Choosing a framework\" %}\nYou will notice that the executor will ask you of the framework you are planning to use. This is just to make sure that the right dependencies are installed. You can always install manually any other dependencies you need.\n{% /callout %}\n\n## Generate an application using Vite\n\nYou can generate a React or a Web application that uses Vite.js. The `@nrwl/react:app` and `@nrwl/web:app` generators accept the `bundler` option, where you can pass `vite`. This will generate a new application configured to use Vite.js, and it will also install all the necessary dependencies.\n\nTo generate a React application using Vite.js, run the following:\n\n```bash\nnx g @nrwl/react:app my-app --bundler=vite\n```\n\nTo generate a Web application using Vite.js, run the following:\n\n```bash\nnx g @nrwl/web:app my-app --bundler=vite\n```\n\n## Modify an existing React or Web application to use Vite.js\n\nYou can use the `@nrwl/vite:configuration` generator to change your React or Web application to use Vite.js. This generator will modify your application's configuration to use Vite.js, and it will also install all the necessary dependencies.\n\nYou can read more about this generator on the [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator page.\n\n## Set up your apps to use Vite.js manually\n\nYou can use the `@nrwl/vite:dev-server` and the `@nrwl/vite:build` executors to serve and build your applications using Vite.js. To do this, you need to make a few adjustments to your application.\n\n{% github-repository url=\"https://github.com/mandarini/nx-recipes/tree/feat/react-vite-recipe/vite-example\" /%}\n\n### 1. Change the executors in your `project.json`\n\n#### The `serve` target\n\nIn your app's `project.json` file, change the executor of your `serve` target to use `@nrwl/vite:dev-server` and set it up with the following options:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"serve\": {\n \"executor\": \"@nrwl/vite:dev-server\",\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"buildTarget\": \"my-app:build\",\n \"port\": 4200,\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% callout type=\"note\" title=\"Other options\" %}\nYou do not have to set the `port` here, necessarily. You can also specify the port in the `vite.config.ts` file (see **Step 2** below).\nThe same goes for all other Vite.js options that you can find the [Vite.js documentation](https://vitejs.dev/config/). All these can be added in your `vite.config.ts` file.\n{% /callout %}\n\n#### The `build` target\n\nIn your app's `project.json` file, change the executor of your `build` target to use `@nrwl/vite:build` and set it up with the following options:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nrwl/vite:build\",\n ...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% callout type=\"note\" title=\"Other options\" %}\nYou can specify more options in the `vite.config.ts` file (see **Step 2** below).\n{% /callout %}\n\n### 2. Configure Vite.js\n\n#### TypeScript paths\n\nYou need to use the [`vite-tsconfig-paths` plugin](https://www.npmjs.com/package/vite-tsconfig-paths) to make sure that your TypeScript paths are resolved correctly in your monorepo.\n\n#### React plugin\n\nIf you are using React, you need to use the [`@vitejs/plugin-react` plugin](https://www.npmjs.com/package/@vitejs/plugin-react).\n\n#### How your `vite.config.ts` looks like\n\nAdd a `vite.config.ts` file to the root of your app. If you are not using React, you can skip adding the `react` plugin, of course.\n\n```ts\n// eg. apps/my-app/vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';\n\nexport default defineConfig({\n plugins: [\n react(),\n ViteTsConfigPathsPlugin({\n root: '../../',\n projects: ['tsconfig.base.json'],\n }),\n ],\n});\n```\n\n{% callout type=\"note\" title=\"The `root` path\" %}\nMake sure the `root` path in the `ViteTsConfigPathsPlugin` options is correct. It should be the path to the root of your workspace.\n{% /callout %}\n\nIn that config file, you can configure Vite.js as you would normally do. For more information, see the [Vite.js documentation](https://vitejs.dev/config/).\n\n#### Creating a root `vite.config.ts` file\n\nYou can create a `vite.config.ts` file to the root of your workspace, as well as at the root of each of your applications. This file is used to configure Vite. You can read more about the configuration options in the [Vite documentation](https://vitejs.dev/config/).\n\nThe root `vite.config.ts` file can be used for all applications, and you can place in there general configurations that would apply for all your apps using Vite in your workspace. The application-specific `vite.config.ts` files can be used to override the root configuration, or, for example, import framework-specific plugins (eg. the `'@vitejs/plugin-react'` for React apps). The application-specific configuration files extend (using [`mergeConfig`](https://vitejs.dev/guide/api-javascript.html#mergeconfig)) the root configuration file. You can adjust this behavior to your needs.\n\nSo, if you are using a root `vite.config.ts` file, you should adjust your code as follows:\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n plugins: [],\n});\n```\n\nand then in your app's `vite.config.ts` file:\n\n```ts\n// eg. apps/my-app/vite.config.ts\nimport { mergeConfig } from 'vite';\nimport baseConfig from '../../vite.config';\nimport react from '@vitejs/plugin-react';\nimport ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';\n\nexport default mergeConfig(baseConfig, {\n plugins: [\n react(),\n ViteTsConfigPathsPlugin({\n root: '../../',\n projects: ['tsconfig.base.json'],\n }),\n ],\n});\n```\n\n### 3. Move `index.html` and point it to your app's entrypoint\n\nFirst of all, move your `index.html` file to the root of your app (eg. from `apps/my-app/src/index.html` to `apps/my-app/index.html`).\n\nThen, add a module `script` tag pointing to the `main.tsx` (or `main.ts`) file of your app:\n\n```html\n...\n \n
\n \n \n\n```\n\n### 4. Add a `public` folder\n\nYou can add a `public` folder to the root of your app. You can read more about the public folder in the [Vite.js documentation](https://vitejs.dev/guide/assets.html#the-public-directory).\n\n```treeview\nmyorg/\n├── apps/\n│ ├── my-app/\n│ │ ├── src/\n│ │ │ ├── app/\n│ │ │ ├── assets/\n│ │ │ ├── ...\n│ │ │ └── main.tsx\n│ │ ├── index.html\n│ │ ├── public/\n| . | . | ├── favicon.ico\n│ │ │ └── my-page.md\n│ │ ├── project.json\n│ │ ├── ...\n│ │ ├── tsconfig.app.json\n│ │ ├── tsconfig.json\n│ │ └── tsconfig.spec.json\n```\n\nYou can use the `public` folder to store static **assets**, such as images, fonts, and so on. You can also use it to store Markdown files, which you can then import in your app and use as a source of content.\n\n### 5. Adjust your app's tsconfig.json\n\nChange your app's `tsconfig.json` (eg. `apps/my-app/tsconfig.json`) `compilerOptions` to the following:\n\n#### For React apps\n\n```json\n...\n \"compilerOptions\": {\n \"jsx\": \"react-jsx\",\n \"allowJs\": false,\n \"esModuleInterop\": false,\n \"allowSyntheticDefaultImports\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"isolatedModules\": true,\n \"lib\": [\"DOM\", \"DOM.Iterable\", \"ESNext\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Node\",\n \"noEmit\": true,\n \"resolveJsonModule\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"target\": \"ESNext\",\n \"types\": [\"vite/client\"],\n \"useDefineForClassFields\": true\n },\n...\n```\n\n#### For Web apps\n\n```json\n...\n \"compilerOptions\": {\n \"target\": \"ESNext\",\n \"useDefineForClassFields\": true,\n \"module\": \"ESNext\",\n \"lib\": [\"ESNext\", \"DOM\"],\n \"moduleResolution\": \"Node\",\n \"strict\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"esModuleInterop\": true,\n \"noEmit\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noImplicitReturns\": true,\n \"skipLibCheck\": true,\n \"types\": [\"vite/client\"]\n },\n \"include\": [\"src\"],\n...\n```\n\nYou can read more about the TypeScript compiler options in the [Vite.js documentation](https://vitejs.dev/guide/features.html#typescript-compiler-options).\n\n### 6. Use Vite.js!\n\nNow you can finally serve and build your app using Vite.js:\n\n#### Serve the app\n\n```\nnx serve my-app\n```\n\nor\n\n```\nnx run my-app:serve\n```\n\nNow, visit [http://localhost:4200](http://localhost:4200) to see your app running!\n\n#### Build the app\n\n```\nnx build my-app\n```\n\nor\n\n```\nnx run my-app:build\n```\n" } ], "generators": [ diff --git a/docs/map.json b/docs/map.json index 5f14d27983..c7ca16e72e 100644 --- a/docs/map.json +++ b/docs/map.json @@ -29,14 +29,14 @@ "file": "shared/npm-tutorial/integrated" }, { - "name": "React Tutorial", - "id": "react-tutorial", - "file": "shared/react-tutorial/1-code-generation" + "name": "React Standalone Tutorial", + "id": "react-standalone-tutorial", + "file": "shared/react-standalone-tutorial/1-code-generation" }, { - "name": "Angular Tutorial", - "id": "angular-tutorial", - "file": "shared/angular-tutorial/1-code-generation" + "name": "Angular Standalone Tutorial", + "id": "angular-standalone-tutorial", + "file": "shared/angular-standalone-tutorial/1-code-generation" }, { "name": "Node Tutorial", @@ -83,7 +83,7 @@ ] }, { - "name": "React Tutorial", + "name": "React Monorepo Tutorial", "id": "react-tutorial", "description": "In this tutorial you'll create a frontend-focused workspace with Nx.", "itemList": [ @@ -147,7 +147,7 @@ ] }, { - "name": "Angular Tutorial", + "name": "Angular Monorepo Tutorial", "id": "angular-tutorial", "description": "Learn to use Nx with this Angular tutorial where you will learn about all its main feature with a real project.", "itemList": [ @@ -179,7 +179,7 @@ ] }, { - "name": "Angular Standalon Tutorial", + "name": "Angular Standalone Tutorial", "id": "angular-standalone-tutorial", "description": "Learn to use Nx with this Angular tutorial where you will learn about all its main feature with a real project.", "itemList": [ diff --git a/docs/shared/angular-standalone-tutorial/1-code-generation.md b/docs/shared/angular-standalone-tutorial/1-code-generation.md index 227bb4331e..e0e1a9d4ca 100644 --- a/docs/shared/angular-standalone-tutorial/1-code-generation.md +++ b/docs/shared/angular-standalone-tutorial/1-code-generation.md @@ -6,7 +6,7 @@ description: In this tutorial you'll create a frontend-focused workspace with Nx {% callout type="check" title="Standalone Repo" %} This tutorial sets up a repo with a single application at the root level that breaks out its code into libraries to add structure. -You can find more information on about other repo styles in [our introduction](/getting-started/intro). +Looking for a Angular monorepo setup? Check our [Angular monorepo tutorial](/angular-tutorial/1-code-generation). {% /callout %} # Angular Standalone Tutorial - Part 1: Code Generation diff --git a/docs/shared/angular-tutorial/1-code-generation.md b/docs/shared/angular-tutorial/1-code-generation.md index a782557353..207282e4c2 100644 --- a/docs/shared/angular-tutorial/1-code-generation.md +++ b/docs/shared/angular-tutorial/1-code-generation.md @@ -1,5 +1,5 @@ --- -title: 'Angular Tutorial - Part 1: Code Generation' +title: 'Angular Monorepo Tutorial - Part 1: Code Generation' description: In this tutorial you'll create a frontend-focused workspace with Nx. --- @@ -9,7 +9,7 @@ There are two styles of repos: integrated and package-based. This tutorial shows You can find more information on the difference between the two in [our introduction](/getting-started/intro). {% /callout %} -# Angular Tutorial - Part 1: Code Generation +# Angular Monorepo Tutorial - Part 1: Code Generation ## Contents diff --git a/docs/shared/angular-tutorial/2-project-graph.md b/docs/shared/angular-tutorial/2-project-graph.md index 0d71353baa..981ddb643f 100644 --- a/docs/shared/angular-tutorial/2-project-graph.md +++ b/docs/shared/angular-tutorial/2-project-graph.md @@ -1,4 +1,4 @@ -# Angular Tutorial - Part 2: Project Graph +# Angular Monorepo Tutorial - Part 2: Project Graph Run the command: `npx nx graph`. A browser should open up with the following contents: diff --git a/docs/shared/angular-tutorial/3-task-running.md b/docs/shared/angular-tutorial/3-task-running.md index 5998d59263..436a3aeda1 100644 --- a/docs/shared/angular-tutorial/3-task-running.md +++ b/docs/shared/angular-tutorial/3-task-running.md @@ -1,4 +1,4 @@ -# Angular Tutorial - 3: Task-Running +# Angular Monorepo Tutorial - 3: Task-Running Common tasks include: diff --git a/docs/shared/angular-tutorial/4-workspace-optimization.md b/docs/shared/angular-tutorial/4-workspace-optimization.md index b56a72fd7d..d8ca28b111 100644 --- a/docs/shared/angular-tutorial/4-workspace-optimization.md +++ b/docs/shared/angular-tutorial/4-workspace-optimization.md @@ -1,4 +1,4 @@ -# Angular Tutorial - Part 4: Workspace Optimization +# Angular Monorepo Tutorial - Part 4: Workspace Optimization ## Testing Affected Projects diff --git a/docs/shared/angular-tutorial/5-summary.md b/docs/shared/angular-tutorial/5-summary.md index 2c306df498..1711dcb18f 100644 --- a/docs/shared/angular-tutorial/5-summary.md +++ b/docs/shared/angular-tutorial/5-summary.md @@ -1,4 +1,4 @@ -# Angular Tutorial - Part 5: Summary +# Angular Monorepo Tutorial - Part 5: Summary In this tutorial you: diff --git a/docs/shared/core-tutorial/01-create-blog.md b/docs/shared/core-tutorial/01-create-blog.md index a96ad77726..1075e3a56e 100644 --- a/docs/shared/core-tutorial/01-create-blog.md +++ b/docs/shared/core-tutorial/01-create-blog.md @@ -3,7 +3,7 @@ In this tutorial you create multiple projects in a monorepo and take advantage of the core Nx features with a minimum of configuration. {% callout type="check" title="Package-Based Repo" %} -This tutorial sets up a [package-based repo](/concepts/integrated-vs-package-based). If you prefer an [integrated repo](/concepts/integrated-vs-package-based), check out the [React](/getting-started/react-tutorial), [Angular](/getting-started/angular-tutorial) or [Node](/getting-started/node-tutorial) tutorials. +This tutorial sets up a [package-based repo](/concepts/integrated-vs-package-based). If you prefer an [integrated repo](/concepts/integrated-vs-package-based), check out the [React](/react-tutorial/1-code-generation), [Angular](/angular-tutorial/1-code-generation) or [Node](/getting-started/node-tutorial) tutorials. {% /callout %} ## Contents: diff --git a/docs/shared/getting-started/intro.md b/docs/shared/getting-started/intro.md index d745e93223..7eadecf734 100644 --- a/docs/shared/getting-started/intro.md +++ b/docs/shared/getting-started/intro.md @@ -18,41 +18,54 @@ Get a pre-configured setup. Nx configures your favorite frameworks and lets you {% /persona %} -{% persona type="lerna" title="Add to an Existing Monorepo" url="/recipes/adopting-nx/adding-to-monorepo" %} +{% persona type="react" title="Create a Standalone React app" url="/getting-started/react-standalone-tutorial" %} -Incrementally add Nx to your repo and enjoy faster CI runs and local development. All without modifying your existing setup. +A modern React setup with built-in support for Vite, ESLint, Cypress and more. Think CRA but modern, always up-to-date and scalable. -- [Add Nx to an Existing Monorepo](/recipes/adopting-nx/adding-to-monorepo) +- [Create a Standalone React app](/getting-started/react-standalone-tutorial) {% /persona %} -{% persona type="angular" title="Enter Modern Angular" url="/recipes/adopting-nx/migration-angular" %} -Enhance your Angular development experience by leveraging its advanced generators and integrations with modern tooling. +{% persona type="angular" title="Create a Standalone Angular app" url="/getting-started/angular-standalone-tutorial" %} -- [Switch from the Angular CLI to Nx](/recipes/adopting-nx/migration-angular) +A modern Angular development experience powered by advanced generators and integrations with modern tooling. + +- [Create a Standalone Angular app](/getting-started/angular-standalone-tutorial) {% /persona %} + {% /personas %} +## Adopting Nx + +Coming from an existing project and want to adopt Nx? We have a few recipes to help you get started. + +{% cards cols="4" %} + +{% card title="Add to Existing Monorepo" description="Add Nx to your existing NPM/YARN/PNPM workspace" type="documentation" url="/recipes/adopting-nx/adding-to-monorepo" /%} + +{% card title="Add to any Project" description="Add Nx to an standalone project" type="documentation" url="/recipes/adopting-nx/adding-to-existing-project" /%} + +{% card title="Migrate from CRA" description="Migrate from a CRA setup and automatically switch to Vite" type="documentation" url="/recipes/adopting-nx/migration-cra" /%} + +{% card title="Migrate from Angular CLI" description="Automatically migrate from the Angular CLI" type="documentation" url="/recipes/adopting-nx/migration-angular" /%} + +{% /cards %} + +## Why Nx? + +Nx has two main goals: + +- **Speed up your existing workflow with minimum effort.** +- **Provide a first-rate developer experience no matter the size of the repo.** + +It achieves speed that via [computation caching](/core-features/cache-task-results), by only [run tasks affected by a given change](/core-features/run-tasks#run-tasks-affected-by-a-pr) and by being able to [distribute your task execution](/core-features/distribute-task-execution) across multiple agents in CI. + +High quality DX is implemented via [code generators](/plugin-features/use-code-generators), [IDE extensions](/core-features/integrate-with-editors#integrate-with-editors) and by helping you [keep your codebase evergreen](/core-features/automate-updating-dependencies). + +## How does Nx compare to other tools? + If you know other tools in the monorepo space, here is how Nx compares: - [Monorepo.tools](https://monorepo.tools) - [Nx and Turborepo](/more-concepts/turbo-and-nx) - -## Nx Has Two Goals - -**Speed up your existing workflow with minimum effort.** - -- Never rebuild the same code twice by [caching task results](/core-features/cache-task-results). -- Only [run tasks affected by the current PR](/core-features/run-tasks#run-tasks-affected-by-a-pr). -- [Distribute your task execution](/core-features/distribute-task-execution) across multiple agents in CI. - -These features can be enabled without touching your existing workflows if you use Nx with a [package-based repo](/concepts/integrated-vs-package-based). - -**Provide a first-rate developer experience no matter the size of the repo:** - -- Encode common coding tasks in [code generators](/plugin-features/use-code-generators) to make them easily repeatable. -- Offload the maintenance burden of [updating dependencies and configuration files](/core-features/automate-updating-dependencies) to the Nrwl team. -- [Enforce project boundaries](/core-features/enforce-project-boundaries) based on your own organization structure. - -These features and the [integrated repository](/concepts/integrated-vs-package-based) mindset allow large teams to collaborate in a single monorepo without getting in each other's way. diff --git a/docs/shared/migration/adding-to-existing-project.md b/docs/shared/migration/adding-to-existing-project.md index bf0f10170b..6f50eb02f8 100644 --- a/docs/shared/migration/adding-to-existing-project.md +++ b/docs/shared/migration/adding-to-existing-project.md @@ -80,12 +80,6 @@ Here's an example of a `build` and `lint` script being wrapped by Nx: "devDependencies": { ... "nx": "15.3.0" - }, - "nx": { - "includeScripts": [ - "build", - "lint" - ] } } ``` diff --git a/docs/shared/react-standalone-tutorial/1-code-generation.md b/docs/shared/react-standalone-tutorial/1-code-generation.md index 705c8a442c..1404ce9a79 100644 --- a/docs/shared/react-standalone-tutorial/1-code-generation.md +++ b/docs/shared/react-standalone-tutorial/1-code-generation.md @@ -6,7 +6,8 @@ description: In this tutorial you'll create a frontend-focused workspace with Nx {% callout type="check" title="Standalone Repo" %} This tutorial sets up a repo with a single application at the root level that breaks out its code into libraries to add structure. -You can find more information on about other repo styles in [our introduction](/getting-started/intro). +Looking for a React monorepo setup? Check our [React monorepo tutorial](/react-tutorial/1-code-generation). + {% /callout %} # React Standalone Tutorial - Part 1: Code Generation diff --git a/docs/shared/react-tutorial/1-code-generation.md b/docs/shared/react-tutorial/1-code-generation.md index ba9c22cd8d..6f171b2f47 100644 --- a/docs/shared/react-tutorial/1-code-generation.md +++ b/docs/shared/react-tutorial/1-code-generation.md @@ -1,5 +1,5 @@ --- -title: 'React Tutorial - Part 1: Code Generation' +title: 'React Monorepo Tutorial - Part 1: Code Generation' description: In this tutorial you'll create a frontend-focused workspace with Nx. --- @@ -9,7 +9,7 @@ There are two styles of repos: integrated and package-based. This tutorial shows You can find more information on the difference between the two in [our introduction](/getting-started/intro). {% /callout %} -# React Tutorial - Part 1: Code Generation +# React Monorepo Tutorial - Part 1: Code Generation ## Contents diff --git a/docs/shared/react-tutorial/2-project-graph.md b/docs/shared/react-tutorial/2-project-graph.md index 8ec4038d3c..9697217417 100644 --- a/docs/shared/react-tutorial/2-project-graph.md +++ b/docs/shared/react-tutorial/2-project-graph.md @@ -1,4 +1,4 @@ -# React Tutorial - Part 2: Project Graph +# React Monorepo Tutorial - Part 2: Project Graph Run the command: `npx nx graph`. A browser should open up with the following contents: diff --git a/docs/shared/react-tutorial/3-task-running.md b/docs/shared/react-tutorial/3-task-running.md index 9a1ecdb8b4..f53f31928e 100644 --- a/docs/shared/react-tutorial/3-task-running.md +++ b/docs/shared/react-tutorial/3-task-running.md @@ -1,4 +1,4 @@ -# React Tutorial - 3: Task-Running +# React Monorepo Tutorial - 3: Task-Running Common tasks include: diff --git a/docs/shared/react-tutorial/4-workspace-optimization.md b/docs/shared/react-tutorial/4-workspace-optimization.md index e56cc20291..80a6956568 100644 --- a/docs/shared/react-tutorial/4-workspace-optimization.md +++ b/docs/shared/react-tutorial/4-workspace-optimization.md @@ -1,4 +1,4 @@ -# React Tutorial - Part 4: Workspace Optimization +# React Monorepo Tutorial - Part 4: Workspace Optimization ## Testing Affected Projects diff --git a/docs/shared/react-tutorial/5-summary.md b/docs/shared/react-tutorial/5-summary.md index 6dfb951e22..0b50a4fb98 100644 --- a/docs/shared/react-tutorial/5-summary.md +++ b/docs/shared/react-tutorial/5-summary.md @@ -1,4 +1,4 @@ -# React Tutorial - Part 5: Summary +# React Monorepo Tutorial - Part 5: Summary In this tutorial you: diff --git a/docs/shared/vite-plugin.md b/docs/shared/vite-plugin.md index 8157cf6d21..b67d60bffd 100644 --- a/docs/shared/vite-plugin.md +++ b/docs/shared/vite-plugin.md @@ -1,9 +1,5 @@ The Nx plugin for [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/). -{% callout type="warning" title="Early release plugin" %} -This Nx plugin is in active development and may not be ready for real-world use. The planned release date for the stable plugin is December, 2022. -{% /callout %} - [Vite.js](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. Why should you use this plugin? diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx index 2cb839e5b4..cb8fb56506 100644 --- a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx +++ b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx @@ -6,9 +6,24 @@ import { } from '@heroicons/react/24/outline'; import { ReactNode } from 'react'; -export function Cards({ children }: { children: ReactNode }) { +export function Cards({ + cols = 2, + children, +}: { + cols: number; + children: ReactNode; +}) { + const gridColums: { [key: number]: string } = { + 1: 'lg:grid-cols-1', + 2: 'lg:grid-cols-2', + 3: 'lg:grid-cols-3', + 4: 'lg:grid-cols-4', + }; + return ( -
+
{children}
); @@ -39,11 +54,12 @@ export function Card({ return (
{!!hasYoutubeId && ( Youtube Link )} diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.schema.ts b/nx-dev/ui-markdoc/src/lib/tags/cards.schema.ts index 14cdff0435..85b8ec74bb 100644 --- a/nx-dev/ui-markdoc/src/lib/tags/cards.schema.ts +++ b/nx-dev/ui-markdoc/src/lib/tags/cards.schema.ts @@ -2,7 +2,12 @@ import { Schema } from '@markdoc/markdoc'; export const cards: Schema = { render: 'Cards', - attributes: {}, + attributes: { + cols: { + type: 'Number', + description: 'The number of colums per row', + }, + }, }; export const card: Schema = { diff --git a/nx-dev/ui-markdoc/src/lib/tags/personas.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/personas.component.tsx index fac2df3880..39e879af94 100644 --- a/nx-dev/ui-markdoc/src/lib/tags/personas.component.tsx +++ b/nx-dev/ui-markdoc/src/lib/tags/personas.component.tsx @@ -16,6 +16,7 @@ type PersonaType = | 'distribute' | 'javascript' | 'lerna' + | 'react' | 'angular' | 'integrated'; const typeMap: Record< @@ -106,6 +107,19 @@ const typeMap: Record<
), }, + react: { + image: ( + + + + ), + }, angular: { image: (