docs(nx-dev): nest 5 minute tutorials under getting started (#17897)

2023-07-04 15:17:49 +02:00 · 2023-07-04 15:17:49 +02:00 · b41ca210fe
commit b41ca210fe
parent 388611854f
14 changed files with 245 additions and 117 deletions
--- a/docs/generated/manifests/menus.json
+++ b/docs/generated/manifests/menus.json
@ -31,6 +31,55 @@
            "isExternal": false,
            "children": [],
            "disableCollapsible": false
+          },
+          {
+            "name": "5 min Tutorials",
+            "path": "/getting-started/tutorials",
+            "id": "tutorials",
+            "isExternal": false,
+            "children": [
+              {
+                "name": "Package-Based Monorepo",
+                "path": "/getting-started/tutorials/package-based-repo-tutorial",
+                "id": "package-based-repo-tutorial",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              },
+              {
+                "name": "Integrated Monorepo",
+                "path": "/getting-started/tutorials/integrated-repo-tutorial",
+                "id": "integrated-repo-tutorial",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              },
+              {
+                "name": "React Standalone",
+                "path": "/getting-started/tutorials/react-standalone-tutorial",
+                "id": "react-standalone-tutorial",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              },
+              {
+                "name": "Angular Standalone",
+                "path": "/getting-started/tutorials/angular-standalone-tutorial",
+                "id": "angular-standalone-tutorial",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              },
+              {
+                "name": "Node Standalone",
+                "path": "/getting-started/tutorials/node-server-tutorial",
+                "id": "node-server-tutorial",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              }
+            ],
+            "disableCollapsible": false
          }
        ],
        "disableCollapsible": false
@ -61,13 +110,13 @@
      },
      {
        "name": "5 min Tutorials",
-        "path": "/tutorials",
+        "path": "/getting-started/tutorials",
        "id": "tutorials",
        "isExternal": false,
        "children": [
          {
            "name": "Package-Based Monorepo",
-            "path": "/tutorials/package-based-repo-tutorial",
+            "path": "/getting-started/tutorials/package-based-repo-tutorial",
            "id": "package-based-repo-tutorial",
            "isExternal": false,
            "children": [],
@ -75,7 +124,7 @@
          },
          {
            "name": "Integrated Monorepo",
-            "path": "/tutorials/integrated-repo-tutorial",
+            "path": "/getting-started/tutorials/integrated-repo-tutorial",
            "id": "integrated-repo-tutorial",
            "isExternal": false,
            "children": [],
@ -83,7 +132,7 @@
          },
          {
            "name": "React Standalone",
-            "path": "/tutorials/react-standalone-tutorial",
+            "path": "/getting-started/tutorials/react-standalone-tutorial",
            "id": "react-standalone-tutorial",
            "isExternal": false,
            "children": [],
@ -91,7 +140,7 @@
          },
          {
            "name": "Angular Standalone",
-            "path": "/tutorials/angular-standalone-tutorial",
+            "path": "/getting-started/tutorials/angular-standalone-tutorial",
            "id": "angular-standalone-tutorial",
            "isExternal": false,
            "children": [],
@ -99,7 +148,7 @@
          },
          {
            "name": "Node Standalone",
-            "path": "/tutorials/node-server-tutorial",
+            "path": "/getting-started/tutorials/node-server-tutorial",
            "id": "node-server-tutorial",
            "isExternal": false,
            "children": [],
@ -110,7 +159,7 @@
      },
      {
        "name": "Package-Based Monorepo",
-        "path": "/tutorials/package-based-repo-tutorial",
+        "path": "/getting-started/tutorials/package-based-repo-tutorial",
        "id": "package-based-repo-tutorial",
        "isExternal": false,
        "children": [],
@ -118,7 +167,7 @@
      },
      {
        "name": "Integrated Monorepo",
-        "path": "/tutorials/integrated-repo-tutorial",
+        "path": "/getting-started/tutorials/integrated-repo-tutorial",
        "id": "integrated-repo-tutorial",
        "isExternal": false,
        "children": [],
@ -126,7 +175,7 @@
      },
      {
        "name": "React Standalone",
-        "path": "/tutorials/react-standalone-tutorial",
+        "path": "/getting-started/tutorials/react-standalone-tutorial",
        "id": "react-standalone-tutorial",
        "isExternal": false,
        "children": [],
@ -134,7 +183,7 @@
      },
      {
        "name": "Angular Standalone",
-        "path": "/tutorials/angular-standalone-tutorial",
+        "path": "/getting-started/tutorials/angular-standalone-tutorial",
        "id": "angular-standalone-tutorial",
        "isExternal": false,
        "children": [],
@ -142,7 +191,7 @@
      },
      {
        "name": "Node Standalone",
-        "path": "/tutorials/node-server-tutorial",
+        "path": "/getting-started/tutorials/node-server-tutorial",
        "id": "node-server-tutorial",
        "isExternal": false,
        "children": [],
--- a/docs/generated/manifests/nx.json
+++ b/docs/generated/manifests/nx.json
@ -34,6 +34,67 @@
        "isExternal": false,
        "path": "/getting-started/why-nx",
        "tags": []
+      },
+      {
+        "id": "tutorials",
+        "name": "5 min Tutorials",
+        "description": "Get started with basic information, concepts and tutorials.",
+        "file": "",
+        "itemList": [
+          {
+            "id": "package-based-repo-tutorial",
+            "name": "Package-Based Monorepo",
+            "description": "",
+            "file": "shared/npm-tutorial/package-based",
+            "itemList": [],
+            "isExternal": false,
+            "path": "/getting-started/tutorials/package-based-repo-tutorial",
+            "tags": []
+          },
+          {
+            "id": "integrated-repo-tutorial",
+            "name": "Integrated Monorepo",
+            "description": "",
+            "file": "shared/npm-tutorial/integrated",
+            "itemList": [],
+            "isExternal": false,
+            "path": "/getting-started/tutorials/integrated-repo-tutorial",
+            "tags": []
+          },
+          {
+            "id": "react-standalone-tutorial",
+            "name": "React Standalone",
+            "description": "",
+            "file": "shared/react-standalone-tutorial/react-standalone",
+            "itemList": [],
+            "isExternal": false,
+            "path": "/getting-started/tutorials/react-standalone-tutorial",
+            "tags": []
+          },
+          {
+            "id": "angular-standalone-tutorial",
+            "name": "Angular Standalone",
+            "description": "",
+            "file": "shared/angular-standalone-tutorial/angular-standalone",
+            "itemList": [],
+            "isExternal": false,
+            "path": "/getting-started/tutorials/angular-standalone-tutorial",
+            "tags": []
+          },
+          {
+            "id": "node-server-tutorial",
+            "name": "Node Standalone",
+            "description": "",
+            "file": "shared/node-server-tutorial/1-code-generation",
+            "itemList": [],
+            "isExternal": false,
+            "path": "/getting-started/tutorials/node-server-tutorial",
+            "tags": []
+          }
+        ],
+        "isExternal": false,
+        "path": "/getting-started/tutorials",
+        "tags": []
      }
    ],
    "isExternal": false,
@ -70,7 +131,7 @@
    "path": "/getting-started/why-nx",
    "tags": []
  },
-  "/tutorials": {
+  "/getting-started/tutorials": {
    "id": "tutorials",
    "name": "5 min Tutorials",
    "description": "Get started with basic information, concepts and tutorials.",
@ -83,7 +144,7 @@
        "file": "shared/npm-tutorial/package-based",
        "itemList": [],
        "isExternal": false,
-        "path": "/tutorials/package-based-repo-tutorial",
+        "path": "/getting-started/tutorials/package-based-repo-tutorial",
        "tags": []
      },
      {
@ -93,7 +154,7 @@
        "file": "shared/npm-tutorial/integrated",
        "itemList": [],
        "isExternal": false,
-        "path": "/tutorials/integrated-repo-tutorial",
+        "path": "/getting-started/tutorials/integrated-repo-tutorial",
        "tags": []
      },
      {
@ -103,7 +164,7 @@
        "file": "shared/react-standalone-tutorial/react-standalone",
        "itemList": [],
        "isExternal": false,
-        "path": "/tutorials/react-standalone-tutorial",
+        "path": "/getting-started/tutorials/react-standalone-tutorial",
        "tags": []
      },
      {
@ -113,7 +174,7 @@
        "file": "shared/angular-standalone-tutorial/angular-standalone",
        "itemList": [],
        "isExternal": false,
-        "path": "/tutorials/angular-standalone-tutorial",
+        "path": "/getting-started/tutorials/angular-standalone-tutorial",
        "tags": []
      },
      {
@ -123,62 +184,62 @@
        "file": "shared/node-server-tutorial/1-code-generation",
        "itemList": [],
        "isExternal": false,
-        "path": "/tutorials/node-server-tutorial",
+        "path": "/getting-started/tutorials/node-server-tutorial",
        "tags": []
      }
    ],
    "isExternal": false,
-    "path": "/tutorials",
+    "path": "/getting-started/tutorials",
    "tags": []
  },
-  "/tutorials/package-based-repo-tutorial": {
+  "/getting-started/tutorials/package-based-repo-tutorial": {
    "id": "package-based-repo-tutorial",
    "name": "Package-Based Monorepo",
    "description": "",
    "file": "shared/npm-tutorial/package-based",
    "itemList": [],
    "isExternal": false,
-    "path": "/tutorials/package-based-repo-tutorial",
+    "path": "/getting-started/tutorials/package-based-repo-tutorial",
    "tags": []
  },
-  "/tutorials/integrated-repo-tutorial": {
+  "/getting-started/tutorials/integrated-repo-tutorial": {
    "id": "integrated-repo-tutorial",
    "name": "Integrated Monorepo",
    "description": "",
    "file": "shared/npm-tutorial/integrated",
    "itemList": [],
    "isExternal": false,
-    "path": "/tutorials/integrated-repo-tutorial",
+    "path": "/getting-started/tutorials/integrated-repo-tutorial",
    "tags": []
  },
-  "/tutorials/react-standalone-tutorial": {
+  "/getting-started/tutorials/react-standalone-tutorial": {
    "id": "react-standalone-tutorial",
    "name": "React Standalone",
    "description": "",
    "file": "shared/react-standalone-tutorial/react-standalone",
    "itemList": [],
    "isExternal": false,
-    "path": "/tutorials/react-standalone-tutorial",
+    "path": "/getting-started/tutorials/react-standalone-tutorial",
    "tags": []
  },
-  "/tutorials/angular-standalone-tutorial": {
+  "/getting-started/tutorials/angular-standalone-tutorial": {
    "id": "angular-standalone-tutorial",
    "name": "Angular Standalone",
    "description": "",
    "file": "shared/angular-standalone-tutorial/angular-standalone",
    "itemList": [],
    "isExternal": false,
-    "path": "/tutorials/angular-standalone-tutorial",
+    "path": "/getting-started/tutorials/angular-standalone-tutorial",
    "tags": []
  },
-  "/tutorials/node-server-tutorial": {
+  "/getting-started/tutorials/node-server-tutorial": {
    "id": "node-server-tutorial",
    "name": "Node Standalone",
    "description": "",
    "file": "shared/node-server-tutorial/1-code-generation",
    "itemList": [],
    "isExternal": false,
-    "path": "/tutorials/node-server-tutorial",
+    "path": "/getting-started/tutorials/node-server-tutorial",
    "tags": []
  },
  "/core-tutorial": {
--- a/docs/map.json
+++ b/docs/map.json
@ -27,38 +27,38 @@
              "name": "Why Nx?",
              "id": "why-nx",
              "file": "shared/getting-started/why-nx"
-            }
-          ]
-        },
-        {
-          "name": "5 min Tutorials",
-          "id": "tutorials",
-          "description": "Get started with basic information, concepts and tutorials.",
-          "itemList": [
-            {
-              "name": "Package-Based Monorepo",
-              "id": "package-based-repo-tutorial",
-              "file": "shared/npm-tutorial/package-based"
            },
            {
-              "name": "Integrated Monorepo",
-              "id": "integrated-repo-tutorial",
-              "file": "shared/npm-tutorial/integrated"
-            },
-            {
-              "name": "React Standalone",
-              "id": "react-standalone-tutorial",
-              "file": "shared/react-standalone-tutorial/react-standalone"
-            },
-            {
-              "name": "Angular Standalone",
-              "id": "angular-standalone-tutorial",
-              "file": "shared/angular-standalone-tutorial/angular-standalone"
-            },
-            {
-              "name": "Node Standalone",
-              "id": "node-server-tutorial",
-              "file": "shared/node-server-tutorial/1-code-generation"
+              "name": "5 min Tutorials",
+              "id": "tutorials",
+              "description": "Get started with basic information, concepts and tutorials.",
+              "itemList": [
+                {
+                  "name": "Package-Based Monorepo",
+                  "id": "package-based-repo-tutorial",
+                  "file": "shared/npm-tutorial/package-based"
+                },
+                {
+                  "name": "Integrated Monorepo",
+                  "id": "integrated-repo-tutorial",
+                  "file": "shared/npm-tutorial/integrated"
+                },
+                {
+                  "name": "React Standalone",
+                  "id": "react-standalone-tutorial",
+                  "file": "shared/react-standalone-tutorial/react-standalone"
+                },
+                {
+                  "name": "Angular Standalone",
+                  "id": "angular-standalone-tutorial",
+                  "file": "shared/angular-standalone-tutorial/angular-standalone"
+                },
+                {
+                  "name": "Node Standalone",
+                  "id": "node-server-tutorial",
+                  "file": "shared/node-server-tutorial/1-code-generation"
+                }
+              ]
            }
          ]
        },
--- a/docs/shared/concepts/integrated-vs-package-based.md
+++ b/docs/shared/concepts/integrated-vs-package-based.md
@ -18,7 +18,7 @@ A package-based repo is a collection of packages that depend on each other via `
 Lerna, Yarn, Lage, [Turborepo](/more-concepts/turbo-and-nx) and Nx (without plugins) support this style.

 {% cards %}
-{% card title="Tutorial: Getting Started with Package-Based Repos" description="Walkthrough for creating a package-based monorepo with Nx" type="documentation" url="/tutorials/package-based-repo-tutorial" /%}
+{% card title="Tutorial: Getting Started with Package-Based Repos" description="Walkthrough for creating a package-based monorepo with Nx" type="documentation" url="/getting-started/tutorials/package-based-repo-tutorial" /%}
 {% /cards %}

 ## Integrated Repos
@ -28,7 +28,7 @@ An integrated repo contains projects that depend on each other through standard
 Bazel and Nx (with plugins) support this style.

 {% cards %}
-{% card title="Tutorial: Getting Started with Integrated Repos" description="Walkthrough for creating an integrated monorepo with Nx" type="documentation" url="/tutorials/integrated-repo-tutorial" /%}
+{% card title="Tutorial: Getting Started with Integrated Repos" description="Walkthrough for creating an integrated monorepo with Nx" type="documentation" url="/getting-started/tutorials/integrated-repo-tutorial" /%}
 {% /cards %}

 ## Standalone Applications
@ -37,8 +37,8 @@ Nx plugins, especially the [generators](/plugin-features/use-code-generators), [

 {% cards %}
 {% card title="Standalone Applications with Nx" description="Learn what Standlone Apps are and how Nx can be useful" type="video" url="https://youtu.be/qEaVzh-oBBc" /%}
-{% card title="Tutorial: React Standalone Tutorial" description="Walkthrough for creating a React standalone application with Nx" type="documentation" url="/tutorials/react-standalone-tutorial" /%}
-{% card title="Tutorial: Angular Standalone Tutorial" description="Walkthrough for creating an Angular standalone application with Nx" type="documentation" url="/tutorials/angular-standalone-tutorial" /%}
+{% card title="Tutorial: React Standalone Tutorial" description="Walkthrough for creating a React standalone application with Nx" type="documentation" url="/getting-started/tutorials/react-standalone-tutorial" /%}
+{% card title="Tutorial: Angular Standalone Tutorial" description="Walkthrough for creating an Angular standalone application with Nx" type="documentation" url="/getting-started/tutorials/angular-standalone-tutorial" /%}
 {% /cards %}

 ## How to Choose
--- 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](/react-tutorial/1-code-generation), [Angular](/angular-tutorial/1-code-generation) or [Node](/tutorials/node-server-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/tutorials/node-server-tutorial) tutorials.
 {% /callout %}

 ## Contents:
--- a/docs/shared/getting-started/intro.md
+++ b/docs/shared/getting-started/intro.md
@ -17,18 +17,18 @@ You can use Nx to quickly scaffold a new standalone project or even an entire mo
 Its modular architecture lets you adopt Nx for package-based monorepos in combination with NPM, Yarn or PNPM, or create a fully integrated monorepo using Nx plugins. Learn more with the tutorials below.

 {% personas %}
-{% persona type="javascript" title="New Package-Based Repo" url="/tutorials/package-based-repo-tutorial" %}
+{% persona type="javascript" title="New Package-Based Repo" url="/getting-started/tutorials/package-based-repo-tutorial" %}
 Create a monorepo with Yarn, NPM or PNPM. Nx makes it fast, but lets you run things your way.

- [Get started with your package-based repo](/tutorials/package-based-repo-tutorial)
+- [Get started with your package-based repo](/getting-started/tutorials/package-based-repo-tutorial)

 {% /persona %}

-{% persona type="integrated" title="New Integrated Repo" url="/tutorials/integrated-repo-tutorial" %}
+{% persona type="integrated" title="New Integrated Repo" url="/getting-started/tutorials/integrated-repo-tutorial" %}

 Get a pre-configured setup. Nx configures your favorite frameworks and lets you focus on shipping features.

- [Get started with your integrated repo](/tutorials/integrated-repo-tutorial)
+- [Get started with your integrated repo](/getting-started/tutorials/integrated-repo-tutorial)

 {% /persona %}

@ -42,27 +42,27 @@ Nx works well not just for monorepos. Nx plugins help you scaffold new standalon

 {% cards cols="3" %}

-{% persona type="react" title="Create a Standalone React app" url="/tutorials/react-standalone-tutorial" %}
+{% persona type="react" title="Create a Standalone React app" url="/getting-started/tutorials/react-standalone-tutorial" %}

 A modern React setup with built-in support for Vite, ESLint, Cypress, and more. Think CRA but modern, always up-to-date and scalable.

- [Create a Standalone React app](/tutorials/react-standalone-tutorial)
+- [Create a Standalone React app](/getting-started/tutorials/react-standalone-tutorial)

 {% /persona %}

-{% persona type="angular" title="Create a Standalone Angular app" url="/tutorials/angular-standalone-tutorial" %}
+{% persona type="angular" title="Create a Standalone Angular app" url="/getting-started/tutorials/angular-standalone-tutorial" %}

 A modern Angular development experience powered by advanced generators and integrations with modern tooling.

- [Create a Standalone Angular app](/tutorials/angular-standalone-tutorial)
+- [Create a Standalone Angular app](/getting-started/tutorials/angular-standalone-tutorial)

 {% /persona %}

-{% persona type="node" title="Create a Standalone Node server" url="/tutorials/node-server-tutorial" %}
+{% persona type="node" title="Create a Standalone Node server" url="/getting-started/tutorials/node-server-tutorial" %}

 A modern Node server with scaffolding for Express, Fastify or Koa. There's also Docker support built-in.

- [Create a Standalone Node server](/tutorials/node-server-tutorial)
+- [Create a Standalone Node server](/getting-started/tutorials/node-server-tutorial)

 {% /persona %}

--- a/docs/shared/guides/nx-and-angular-cli.md
+++ b/docs/shared/guides/nx-and-angular-cli.md
@ -46,7 +46,7 @@ Replace `[package]` with the name of the package you're trying to add.

 Nx can improve your developer experience without rearranging folders in your workspace and without the need to have multiple apps in the same repo. The changes outlined in the previous sections are the only modifications to your existing workflow that are needed, then Nx opens the door to many more DX improvements.

-Without any additional changes, Nx provides task caching, automated architecture diagrams and IDE integrations. Then, with some minor configuration, you can add task pipelines, distributed caching and CI improvements. To take full advantage of these features, you can begin to separate your large application into self-contained libraries. For an introduction to this process, complete the [Angular Standalone Tutorial](/tutorials/angular-standalone-tutorial).
+Without any additional changes, Nx provides task caching, automated architecture diagrams and IDE integrations. Then, with some minor configuration, you can add task pipelines, distributed caching and CI improvements. To take full advantage of these features, you can begin to separate your large application into self-contained libraries. For an introduction to this process, complete the [Angular Standalone Tutorial](/getting-started/tutorials/angular-standalone-tutorial).

 ## More Info

--- a/docs/shared/migration/adding-to-monorepo.md
+++ b/docs/shared/migration/adding-to-monorepo.md
@ -4,7 +4,7 @@
 Interested in migrating from [Lerna](https://github.com/lerna/lerna) in particular? In case you missed it, Lerna v6 is powering Nx underneath. As a result, Lerna gets all the modern features such as caching and task pipelines. Read more on [https://lerna.js.org/upgrade](https://lerna.js.org/upgrade).
 {% /callout %}

-Nx has first class support for [package-based monorepos](/tutorials/package-based-repo-tutorial). As a result, if you have an existing NPM/Yarn or PNPM based monorepo setup, you can easily add Nx to get
+Nx has first-class support for [package-based monorepos](/getting-started/tutorials/package-based-repo-tutorial). As a result, if you have an existing NPM/Yarn or PNPM-based monorepo setup, you can easily add Nx to get

 - fast [task scheduling](/core-features/run-tasks)
 - support for [task pipelines](/concepts/task-pipeline-configuration)
@ -12,7 +12,7 @@ Nx has first class support for [package-based monorepos](/tutorials/package-base
 - optionally [remote caching with Nx Cloud](/core-features/share-your-cache)
 - optionally [distributed task execution with Nx Cloud](/core-features/distribute-task-execution)

-This is a low-impact operation because all that needs to be done is to install the `nx` package at the root-level and add an `nx.json` for configuring caching and task pipelines.
+This is a low-impact operation because all that needs to be done is to install the `nx` package at the root level and add an `nx.json` for configuring caching and task pipelines.

 ## Installing Nx

--- a/docs/shared/npm-tutorial/integrated.md
+++ b/docs/shared/npm-tutorial/integrated.md
@ -233,6 +233,6 @@ npx nx affected -t build

 {% card title="React Tutorial" description="A step-by-step tutorial showing how to build an integrated monorepo with React applications sharing code." url="/react-tutorial/1-code-generation" /%}

-{% card title="Node.js Tutorial" description="A step-by-step tutorial showing how to build an integrated monorepo with Node.js applications sharing code." url="/tutorials/node-server-tutorial" /%}
+{% card title="Node.js Tutorial" description="A step-by-step tutorial showing how to build an integrated monorepo with Node.js applications sharing code." url="/getting-started/tutorials/node-server-tutorial" /%}

 {% /cards %}
--- a/docs/shared/reference/sitemap.md
+++ b/docs/shared/reference/sitemap.md
@ -4,12 +4,12 @@
    - [Getting Started](/getting-started/intro)
    - [Installation](/getting-started/installation)
    - [Why Nx?](/getting-started/why-nx)
-  - [5 min Tutorials](/tutorials)
-    - [Package-Based Monorepo](/tutorials/package-based-repo-tutorial)
-    - [Integrated Monorepo](/tutorials/integrated-repo-tutorial)
-    - [React Standalone](/tutorials/react-standalone-tutorial)
-    - [Angular Standalone](/tutorials/angular-standalone-tutorial)
-    - [Node Standalone](/tutorials/node-server-tutorial)
+    - [5 min Tutorials](/getting-started/tutorials)
+      - [Package-Based Monorepo](/getting-started/tutorials/package-based-repo-tutorial)
+      - [Integrated Monorepo](/getting-started/tutorials/integrated-repo-tutorial)
+      - [React Standalone](/getting-started/tutorials/react-standalone-tutorial)
+      - [Angular Standalone](/getting-started/tutorials/angular-standalone-tutorial)
+      - [Node Standalone](/getting-started/tutorials/node-server-tutorial)
  - [Core Tutorial](/core-tutorial)
    - [1 - Create Blog](/core-tutorial/01-create-blog)
    - [2 - Create CLI](/core-tutorial/02-create-cli)
--- a/nx-dev/data-access-menu/src/lib/menu.utils.ts
+++ b/nx-dev/data-access-menu/src/lib/menu.utils.ts
@ -9,7 +9,6 @@ export function getBasicNxSection(items: MenuItem[]): MenuSection {
      .filter(
        (m) =>
          m.id === 'getting-started' ||
-          m.id === 'tutorials' ||
          m.id === 'core-features' ||
          m.id === 'plugin-features' ||
          m.id === 'concepts' ||
--- a/nx-dev/nx-dev/redirect-rules.js
+++ b/nx-dev/nx-dev/redirect-rules.js
@ -369,7 +369,7 @@ const tutorialBaseUrls = {
  '/(l|latest)/(a|angular)/tutorial/1-code-generation':
    '/angular-tutorial/1-code-generation',
  '/(l|latest)/(a|node)/tutorial/1-code-generation':
-    '/tutorials/node-server-tutorial',
+    '/getting-started/tutorials/node-server-tutorial',
  '/(l|latest)/(r|react)/tutorial/1-code-generation':
    '/react-tutorial/1-code-generation',
 };
@ -405,7 +405,7 @@ const oldNodeTutorialPaths = [
 ];

 const extraNodeRedirects = {
-  '/getting-started/node-tutorial': '/tutorials/node-server-tutorial',
+  '/getting-started/node-tutorial': '/getting-started/node-server-tutorial',
  '/node-tutorial/1-code-generation': '/node-server-tutorial/1-code-generation',
  '/node-tutorial/2-project-graph': '/node-server-tutorial/2-project-graph',
  '/node-tutorial/3-task-running': '/node-server-tutorial/3-task-running',
@ -413,7 +413,8 @@ const extraNodeRedirects = {
  '/node-tutorial/5-docker-target': '/node-server-tutorial/5-docker-target',
  '/node-tutorial/6-summary': '/node-server-tutorial/6-summary',
 };
-const nodeRedirectDestination = '/tutorials/node-server-tutorial';
+const nodeRedirectDestination =
+  '/getting-started/tutorials/node-server-tutorial';
 const nodeTutorialRedirects = oldNodeTutorialPaths.reduce((acc, path) => {
  acc[path] = nodeRedirectDestination;
  return acc;
@ -451,25 +452,25 @@ for (const path of oldAngularTutorialPaths) {
 */
 const standaloneTutorialRedirects = {
  '/shared/react-standalone-tutorial/1-code-generation':
-    '/tutorials/react-standalone-tutorial',
+    '/getting-started/tutorials/react-standalone-tutorial',
  '/shared/react-standalone-tutorial/2-project-graph':
-    '/tutorials/react-standalone-tutorial',
+    '/getting-started/tutorials/react-standalone-tutorial',
  '/shared/react-standalone-tutorial/3-task-running':
-    '/tutorials/react-standalone-tutorial',
+    '/getting-started/tutorials/react-standalone-tutorial',
  '/shared/react-standalone-tutorial/4-task-pipelines':
-    '/tutorials/react-standalone-tutorial',
+    '/getting-started/tutorials/react-standalone-tutorial',
  '/shared/react-standalone-tutorial/5-summary':
-    '/tutorials/react-standalone-tutorial',
+    '/getting-started/tutorials/react-standalone-tutorial',
  'shared/angular-standalone-tutorial/1-code-generation':
-    '/tutorials/angular-standalone-tutorial',
+    '/getting-started/tutorials/angular-standalone-tutorial',
  'shared/angular-standalone-tutorial/2-project-graph':
-    '/tutorials/angular-standalone-tutorial',
+    '/getting-started/tutorials/angular-standalone-tutorial',
  'shared/angular-standalone-tutorial/3-task-running':
-    '/tutorials/angular-standalone-tutorial',
+    '/getting-started/tutorials/angular-standalone-tutorial',
  'shared/angular-standalone-tutorial/4-task-pipelines':
-    '/tutorials/angular-standalone-tutorial',
+    '/getting-started/tutorials/angular-standalone-tutorial',
  'shared/angular-standalone-tutorial/5-summary':
-    '/tutorials/angular-standalone-tutorial',
+    '/getting-started/tutorials/angular-standalone-tutorial',
 };

 const packagesIndexes = {
@ -599,13 +600,26 @@ const conceptUrls = {
  '/more-concepts/global-nx':
    '/getting-started/installation#installing-nx-globally',
  '/getting-started/package-based-repo-tutorial':
-    '/tutorials/package-based-repo-tutorial',
+    '/getting-started/tutorials/package-based-repo-tutorial',
  '/getting-started/integrated-repo-tutorial':
-    '/tutorials/integrated-repo-tutorial',
+    '/getting-started/tutorials/integrated-repo-tutorial',
  '/getting-started/react-standalone-tutorial':
-    '/tutorials/react-standalone-tutorial',
+    '/getting-started/tutorials/react-standalone-tutorial',
  '/getting-started/angular-standalone-tutorial':
-    '/tutorials/angular-standalone-tutorial',
+    '/getting-started/tutorials/angular-standalone-tutorial',
+};
+
+const nested5minuteTutorialUrls = {
+  '/tutorials/package-based-repo-tutorial':
+    '/getting-started/tutorials/package-based-repo-tutorial',
+  '/tutorials/integrated-repo-tutorial':
+    '/getting-started/tutorials/integrated-repo-tutorial',
+  '/tutorials/react-standalone-tutorial':
+    '/getting-started/tutorials/react-standalone-tutorial',
+  '/tutorials/angular-standalone-tutorial':
+    '/getting-started/tutorials/angular-standalone-tutorial',
+  '/tutorials/node-server-tutorial':
+    '/getting-started/tutorials/node-server-tutorial',
 };

 const pluginUrls = {
@ -648,5 +662,6 @@ module.exports = {
  packagesIndexes,
  packagesDocuments,
  conceptUrls,
+  nested5minuteTutorialUrls,
  pluginUrls,
 };
--- a/nx-dev/nx-dev/redirect-rules.spec.js
+++ b/nx-dev/nx-dev/redirect-rules.spec.js
@ -79,7 +79,7 @@ describe('Redirect rules configuration', () => {

      for (const url of oldNodeTutorialPaths) {
        expect(redirectRules.tutorialRedirects[url]).toEqual(
-          '/tutorials/node-server-tutorial'
+          '/getting-started/tutorials/node-server-tutorial'
        );
      }

--- a/nx-dev/ui-common/src/lib/sidebar.tsx
+++ b/nx-dev/ui-common/src/lib/sidebar.tsx
@ -107,7 +107,7 @@ function SidebarSectionItems({ item }: { item: MenuItem }): JSX.Element {
          </>
        )}
      </h5>
-      <ul className={cx('mb-6', collapsed ? 'hidden' : '')}>
+      <ul className={cx('mb-6 ml-3', collapsed ? 'hidden' : '')}>
        {(item.children as MenuItem[]).map((subItem, index) => {
          const isActiveLink = subItem.path === withoutAnchors(router.asPath);
          if (isActiveLink && collapsed) {
@ -119,21 +119,25 @@ function SidebarSectionItems({ item }: { item: MenuItem }): JSX.Element {
              key={subItem.id + '-' + index}
              data-testid={`section-li:${subItem.id}`}
            >
-              <Link
-                href={subItem.path}
-                className={cx(
-                  'relative block py-1 text-slate-500 transition-colors duration-200 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300'
-                )}
-              >
-                <span
-                  className={cx('relative', {
-                    'text-md font-medium text-blue-500 dark:text-sky-500':
-                      isActiveLink,
-                  })}
+              {subItem.children.length ? (
+                <SidebarSectionItems item={subItem} />
+              ) : (
+                <Link
+                  href={subItem.path}
+                  className={cx(
+                    'relative block py-1 text-slate-500 transition-colors duration-200 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300'
+                  )}
                >
-                  {subItem.name}
-                </span>
-              </Link>
+                  <span
+                    className={cx('relative', {
+                      'text-md font-medium text-blue-500 dark:text-sky-500':
+                        isActiveLink,
+                    })}
+                  >
+                    {subItem.name}
+                  </span>
+                </Link>
+              )}
            </li>
          );
        })}