fix(misc): rework create-nx-workspace command to show standalone presets

docs/generated/cli/create-nx-workspace.md

@@ -113,7 +113,7 @@ Package manager to use
 
 Type: `string`
 
-Customizes the initial content of your workspace. Default presets include: ["apps", "empty", "core", "npm", "ts", "web-components", "angular", "angular-experimental", "react", "react-experimental", "react-native", "expo", "next", "nest", "express"]. To build your own see https://nx.dev/packages/nx-plugin#preset
+Customizes the initial content of your workspace. Default presets include: ["apps", "empty", "core", "npm", "ts", "web-components", "angular-monorepo", "angular-standalone", "react-monorepo", "react-standalone", "react-native", "expo", "next", "nest", "express", "react", "angular"]. To build your own see https://nx.dev/packages/nx-plugin#preset
 
 ### skipGit
 

docs/generated/packages/nx.json

@@ -10,7 +10,7 @@
       "name": "create-nx-workspace",
       "id": "create-nx-workspace",
       "file": "generated/cli/create-nx-workspace",
-      "content": "---\ntitle: 'create-nx-workspace - CLI command'\ndescription: 'Create a new Nx workspace'\n---\n\n# create-nx-workspace\n\nCreate a new Nx workspace\n\n## Usage\n\n```bash\ncreate-nx-workspace [name] [options]\n```\n\nInstall `create-nx-workspace` globally to invoke the command directly, or use `npx create-nx-workspace`, `yarn create nx-workspace`, or `pnpx create-nx-workspace`.\n\n## Options\n\n### allPrompts\n\nType: `boolean`\n\nDefault: `false`\n\nShow all prompts\n\n### appName\n\nType: `string`\n\nThe name of the application when a preset with pregenerated app is selected\n\n### ci\n\nType: `string`\n\nChoices: [github, circleci, azure]\n\nGenerate a CI workflow file\n\n### cli\n\nType: `string`\n\nChoices: [nx, angular]\n\nCLI to power the Nx workspace\n\n### commit.email\n\nType: `string`\n\nE-mail of the committer\n\n### commit.message\n\nType: `string`\n\nDefault: `Initial commit`\n\nCommit message\n\n### commit.name\n\nType: `string`\n\nName of the committer\n\n### defaultBase\n\nType: `string`\n\nDefault: `main`\n\nDefault base to use for new projects\n\n### help\n\nType: `boolean`\n\nShow help\n\n### interactive\n\nType: `boolean`\n\nEnable interactive mode with presets\n\n### name\n\nType: `string`\n\nWorkspace name (e.g. org name)\n\n### nxCloud\n\nType: `boolean`\n\nEnable distributed caching to make your CI faster\n\n### packageManager\n\nType: `string`\n\nChoices: [npm, pnpm, yarn]\n\nDefault: `npm`\n\nPackage manager to use\n\n### preset\n\nType: `string`\n\nCustomizes the initial content of your workspace. Default presets include: [\"apps\", \"empty\", \"core\", \"npm\", \"ts\", \"web-components\", \"angular\", \"angular-experimental\", \"react\", \"react-experimental\", \"react-native\", \"expo\", \"next\", \"nest\", \"express\"]. To build your own see https://nx.dev/packages/nx-plugin#preset\n\n### skipGit\n\nType: `boolean`\n\nDefault: `false`\n\nSkip initializing a git repository.\n\n### style\n\nType: `string`\n\nStyle option to be used when a preset with pregenerated app is selected\n\n### version\n\nType: `boolean`\n\nShow version number\n"
+      "content": "---\ntitle: 'create-nx-workspace - CLI command'\ndescription: 'Create a new Nx workspace'\n---\n\n# create-nx-workspace\n\nCreate a new Nx workspace\n\n## Usage\n\n```bash\ncreate-nx-workspace [name] [options]\n```\n\nInstall `create-nx-workspace` globally to invoke the command directly, or use `npx create-nx-workspace`, `yarn create nx-workspace`, or `pnpx create-nx-workspace`.\n\n## Options\n\n### allPrompts\n\nType: `boolean`\n\nDefault: `false`\n\nShow all prompts\n\n### appName\n\nType: `string`\n\nThe name of the application when a preset with pregenerated app is selected\n\n### ci\n\nType: `string`\n\nChoices: [github, circleci, azure]\n\nGenerate a CI workflow file\n\n### cli\n\nType: `string`\n\nChoices: [nx, angular]\n\nCLI to power the Nx workspace\n\n### commit.email\n\nType: `string`\n\nE-mail of the committer\n\n### commit.message\n\nType: `string`\n\nDefault: `Initial commit`\n\nCommit message\n\n### commit.name\n\nType: `string`\n\nName of the committer\n\n### defaultBase\n\nType: `string`\n\nDefault: `main`\n\nDefault base to use for new projects\n\n### help\n\nType: `boolean`\n\nShow help\n\n### interactive\n\nType: `boolean`\n\nEnable interactive mode with presets\n\n### name\n\nType: `string`\n\nWorkspace name (e.g. org name)\n\n### nxCloud\n\nType: `boolean`\n\nEnable distributed caching to make your CI faster\n\n### packageManager\n\nType: `string`\n\nChoices: [npm, pnpm, yarn]\n\nDefault: `npm`\n\nPackage manager to use\n\n### preset\n\nType: `string`\n\nCustomizes the initial content of your workspace. Default presets include: [\"apps\", \"empty\", \"core\", \"npm\", \"ts\", \"web-components\", \"angular-monorepo\", \"angular-standalone\", \"react-monorepo\", \"react-standalone\", \"react-native\", \"expo\", \"next\", \"nest\", \"express\", \"react\", \"angular\"]. To build your own see https://nx.dev/packages/nx-plugin#preset\n\n### skipGit\n\nType: `boolean`\n\nDefault: `false`\n\nSkip initializing a git repository.\n\n### style\n\nType: `string`\n\nStyle option to be used when a preset with pregenerated app is selected\n\n### version\n\nType: `boolean`\n\nShow version number\n"
     },
     {
       "name": "init",

e2e/workspace-create/src/create-nx-workspace.test.ts

@@ -22,7 +22,7 @@ describe('create-nx-workspace', () => {
     const appName = uniq('app');
 
     runCreateWorkspace(wsName, {
-      preset: 'angular-experimental',
+      preset: 'angular-standalone',
       appName,
       style: 'css',
       packageManager,
@@ -37,7 +37,7 @@ describe('create-nx-workspace', () => {
     const appName = uniq('app');
 
     runCreateWorkspace(wsName, {
-      preset: 'react-experimental',
+      preset: 'react-standalone',
       appName,
       style: 'css',
       packageManager,
@@ -93,7 +93,7 @@ describe('create-nx-workspace', () => {
     const wsName = uniq('angular');
     const appName = uniq('app');
     runCreateWorkspace(wsName, {
-      preset: 'angular',
+      preset: 'angular-monorepo',
       style: 'css',
       appName,
       packageManager,
@@ -108,7 +108,7 @@ describe('create-nx-workspace', () => {
     const appName = uniq('app');
     try {
       runCreateWorkspace(wsName, {
-        preset: 'angular',
+        preset: 'angular-monorepo',
         style: 'css',
         appName,
         packageManager,
@@ -123,7 +123,7 @@ describe('create-nx-workspace', () => {
     const appName = uniq('app');
 
     runCreateWorkspace(wsName, {
-      preset: 'react',
+      preset: 'react-monorepo',
       style: 'css',
       appName,
       packageManager,
@@ -233,7 +233,7 @@ describe('create-nx-workspace', () => {
     process.env.SELECTED_PM = 'npm';
 
     runCreateWorkspace(wsName, {
-      preset: 'react',
+      preset: 'react-monorepo',
       style: 'css',
       appName,
       packageManager: 'npm',
@@ -252,7 +252,7 @@ describe('create-nx-workspace', () => {
     process.env.SELECTED_PM = 'npm';
 
     runCreateWorkspace(wsName, {
-      preset: 'angular',
+      preset: 'angular-monorepo',
       appName,
       style: 'css',
       packageManager: 'npm',

packages/cra-to-nx/src/lib/cra-to-nx.ts

@@ -166,9 +166,9 @@ function createTempWorkspace(options: NormalizedOptions) {
       options.npxYesFlagNeeded ? '-y' : ''
     } create-nx-workspace@latest temp-workspace --appName=${
       options.reactAppName
-    } --preset=react --style=css --packageManager=${options.packageManager} ${
-      options.nxCloud ? '--nxCloud' : '--nxCloud=false'
-    }`,
+    } --preset=react-monorepo --style=css --packageManager=${
+      options.packageManager
+    } ${options.nxCloud ? '--nxCloud' : '--nxCloud=false'}`,
     { stdio: [0, 1, 2] }
   );
 

packages/create-nx-workspace/bin/create-nx-workspace.ts

@@ -51,65 +51,51 @@ enum Preset {
   NPM = 'npm',
   TS = 'ts',
   WebComponents = 'web-components',
-  Angular = 'angular',
-  AngularExperimental = 'angular-experimental',
-  React = 'react',
-  ReactExperimental = 'react-experimental',
+  AngularMonorepo = 'angular-monorepo',
+  AngularStandalone = 'angular-standalone',
+  ReactMonorepo = 'react-monorepo',
+  ReactStandalone = 'react-standalone',
   ReactNative = 'react-native',
   Expo = 'expo',
   NextJs = 'next',
   Nest = 'nest',
   Express = 'express',
+  React = 'react',
+  Angular = 'angular',
 }
 
 const presetOptions: { name: Preset; message: string }[] = [
   {
     name: Preset.Apps,
     message:
-      'apps              [an empty workspace with no plugins with a layout that works best for building apps]',
+      'apps              [an empty monorepo with no plugins with a layout that works best for building apps]',
   },
   {
     name: Preset.TS,
     message:
-      'ts                [an empty workspace with the JS/TS plugin preinstalled]',
+      'ts                [an empty monorepo with the JS/TS plugin preinstalled]',
   },
   {
-    name: Preset.React,
-    message: 'react             [a workspace with a single React application]',
+    name: Preset.ReactMonorepo,
+    message: 'react             [a monorepo with a single React application]',
   },
   {
-    name: Preset.Angular,
-    message:
-      'angular           [a workspace with a single Angular application]',
+    name: Preset.AngularMonorepo,
+    message: 'angular           [a monorepo with a single Angular application]',
   },
   {
     name: Preset.NextJs,
-    message:
-      'next.js           [a workspace with a single Next.js application]',
+    message: 'next.js           [a monorepo with a single Next.js application]',
   },
   {
     name: Preset.Nest,
-    message: 'nest              [a workspace with a single Nest application]',
-  },
-  {
-    name: Preset.Express,
-    message:
-      'express           [a workspace with a single Express application]',
-  },
-  {
-    name: Preset.WebComponents,
-    message:
-      'web components    [a workspace with a single app built using web components]',
+    message: 'nest              [a monorepo with a single Nest application]',
   },
   {
     name: Preset.ReactNative,
     message:
       'react-native      [a workspace with a single React Native application]',
   },
-  {
-    name: Preset.Expo,
-    message: 'expo              [a workspace with a single Expo application]',
-  },
 ];
 
 const nxVersion = require('../package.json').version;
@@ -325,11 +311,20 @@ async function getConfiguration(
       style = null;
     } else {
       if (!argv.preset) {
-        if ((await determineMonorepoStyle()) === 'package-based') {
+        const monorepoStyle = await determineMonorepoStyle();
+        if (monorepoStyle === 'package-based') {
           preset = 'npm';
+        } else if (monorepoStyle === 'react') {
+          preset = Preset.ReactStandalone;
+        } else if (monorepoStyle === 'angular') {
+          preset = Preset.AngularStandalone;
         } else {
           preset = await determinePreset(argv);
         }
+      } else if (argv.preset === 'react') {
+        preset = await monorepoOrStandalone('react');
+      } else if (argv.preset === 'angular') {
+        preset = await monorepoOrStandalone('angular');
       } else {
         preset = argv.preset;
       }
@@ -392,23 +387,63 @@ function determineRepoName(
     });
 }
 
+function monorepoOrStandalone(preset: string): Promise<string> {
+  return enquirer
+    .prompt([
+      {
+        name: 'MonorepoOrStandalone',
+        message: `--preset=${preset} has been replaced with the following:`,
+        type: 'autocomplete',
+        choices: [
+          {
+            name: preset + '-standalone',
+            message: `${preset}-standalone: a standalone ${preset} application.`,
+          },
+          {
+            name: preset + '-monorepo',
+            message: `${preset}-monorepo:   a monorepo with the apps and libs folders.`,
+          },
+        ],
+      },
+    ])
+    .then((a: { MonorepoOrStandalone: string }) => {
+      if (!a.MonorepoOrStandalone) {
+        output.error({
+          title: 'Invalid selection',
+        });
+        process.exit(1);
+      }
+      return a.MonorepoOrStandalone;
+    });
+}
+
 function determineMonorepoStyle(): Promise<string> {
   return enquirer
     .prompt([
       {
         name: 'MonorepoStyle',
-        message: `Choose your style                    `,
+        message: `Choose what to create                `,
         type: 'autocomplete',
         choices: [
           {
             name: 'package-based',
             message:
-              'Package-based: Craft your own setup. Nx makes it fast, but lets you run things your way.',
+              'Package-based monorepo: Nx makes it fast, but lets you run things your way.',
           },
           {
             name: 'integrated',
             message:
-              'Integrated:    Get a pre-configured setup. Nx configures your favorite frameworks and lets you focus on shipping features.',
+              'Integrated monorepo:    Nx configures your favorite frameworks and lets you focus on shipping features.',
+          },
+          {
+            name: 'react',
+            message:
+              'Standalone React app:   Nx configures Vite, ESLint and Cypress.',
+          },
+          {
+            name: 'angular',
+            message:
+              'Standalone Angular app: Nx configures Jest, ESLint and Cypress.',
           },
         ],
       },
@@ -614,7 +649,7 @@ async function determineCli(
   }
 
   switch (preset) {
-    case Preset.Angular: {
+    case Preset.AngularMonorepo: {
       return Promise.resolve('angular');
     }
     default: {
@@ -656,15 +691,17 @@ async function determineStyle(
     },
   ];
 
-  if (![Preset.Angular, Preset.AngularExperimental].includes(preset)) {
+  if (![Preset.AngularMonorepo, Preset.AngularStandalone].includes(preset)) {
     choices.push({
       name: 'styl',
       message: 'Stylus(.styl)     [ http://stylus-lang.com ]',
     });
   }
 
   if (
-    [Preset.React, Preset.ReactExperimental, Preset.NextJs].includes(preset)
+    [Preset.ReactMonorepo, Preset.ReactStandalone, Preset.NextJs].includes(
+      preset
+    )
   ) {
     choices.push(
       {
@@ -1020,17 +1057,17 @@ function pointToTutorialAndCourse(preset: Preset) {
       });
       break;
 
-    case Preset.React:
-    case Preset.ReactExperimental:
+    case Preset.ReactMonorepo:
+    case Preset.ReactStandalone:
     case Preset.NextJs:
       output.addVerticalSeparator();
       output.note({
         title,
         bodyLines: [`https://nx.dev/react-tutorial/1-code-generation`],
       });
       break;
-    case Preset.Angular:
-    case Preset.AngularExperimental:
+    case Preset.AngularMonorepo:
+    case Preset.AngularStandalone:
       output.addVerticalSeparator();
       output.note({
         title,

packages/workspace/src/generators/new/__snapshots__/generate-workspace-files.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`@nrwl/workspace:generateWorkspaceFiles README.md should be created for Angular preset 1`] = `
+exports[`@nrwl/workspace:generateWorkspaceFiles README.md should be created for AngularMonorepo preset 1`] = `
 "# Proj
 
 <a href=\\"https://nx.dev\\" target=\\"_blank\\" rel=\\"noreferrer\\"><img src=\\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\\" width=\\"45\\"></a>
@@ -25,7 +25,7 @@ Visit the [Nx Documentation](https://nx.dev) to learn more.
 "
 `;
 
-exports[`@nrwl/workspace:generateWorkspaceFiles README.md should be created for AngularExperimental preset 1`] = `
+exports[`@nrwl/workspace:generateWorkspaceFiles README.md should be created for AngularStandalone preset 1`] = `
 "# Proj
 
 <a href=\\"https://nx.dev\\" target=\\"_blank\\" rel=\\"noreferrer\\"><img src=\\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\\" width=\\"45\\"></a>
@@ -230,7 +230,7 @@ Visit the [Nx Documentation](https://nx.dev) to learn more.
 "
 `;
 
-exports[`@nrwl/workspace:generateWorkspaceFiles README.md should be created for React preset 1`] = `
+exports[`@nrwl/workspace:generateWorkspaceFiles README.md should be created for ReactMonorepo preset 1`] = `
 "# Proj
 
 <a href=\\"https://nx.dev\\" target=\\"_blank\\" rel=\\"noreferrer\\"><img src=\\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\\" width=\\"45\\"></a>
@@ -255,17 +255,13 @@ Visit the [Nx Documentation](https://nx.dev) to learn more.
 "
 `;
 
-exports[`@nrwl/workspace:generateWorkspaceFiles README.md should be created for ReactExperimental preset 1`] = `
+exports[`@nrwl/workspace:generateWorkspaceFiles README.md should be created for ReactNative preset 1`] = `
 "# Proj
 
 <a href=\\"https://nx.dev\\" target=\\"_blank\\" rel=\\"noreferrer\\"><img src=\\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\\" width=\\"45\\"></a>
 
 ✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
 
-## Development server
-
-Run \`nx serve app1\` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
-
 ## Understand this workspace
 
 Run \`nx graph\` to see a diagram of the dependencies of the projects.
@@ -280,13 +276,17 @@ Visit the [Nx Documentation](https://nx.dev) to learn more.
 "
 `;
 
-exports[`@nrwl/workspace:generateWorkspaceFiles README.md should be created for ReactNative preset 1`] = `
+exports[`@nrwl/workspace:generateWorkspaceFiles README.md should be created for ReactStandalone preset 1`] = `
 "# Proj
 
 <a href=\\"https://nx.dev\\" target=\\"_blank\\" rel=\\"noreferrer\\"><img src=\\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\\" width=\\"45\\"></a>
 
 ✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
 
+## Development server
+
+Run \`nx serve app1\` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
+
 ## Understand this workspace
 
 Run \`nx graph\` to see a diagram of the dependencies of the projects.

packages/workspace/src/generators/new/__snapshots__/new.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`new --preset angular should generate necessary npm dependencies 1`] = `
+exports[`new --preset angular-monorepo should generate necessary npm dependencies 1`] = `
 Object {
   "dependencies": Object {
     "@nrwl/angular": "0.0.1",
@@ -48,7 +48,7 @@ Object {
 }
 `;
 
-exports[`new --preset react should generate necessary npm dependencies 1`] = `
+exports[`new --preset react-monorepo should generate necessary npm dependencies 1`] = `
 Object {
   "dependencies": Object {},
   "devDependencies": Object {