feat(react): add a preset to generate a workspace with a single app a…

…t the root

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-nest", "react", "react-express", "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", "angular-nest", "react", "react-experimental", "react-express", "react-native", "expo", "next", "nest", "express"]. To build your own see https://nx.dev/packages/nx-plugin#preset
 
 ### skipGit
 

docs/generated/packages/cypress.json

@@ -111,6 +111,12 @@
             "type": "boolean",
             "default": false,
             "description": "Do not add dependencies to `package.json`."
+          },
+          "rootProject": {
+            "description": "Create a application at the root of the workspace",
+            "type": "boolean",
+            "default": false,
+            "hidden": true
           }
         },
         "required": ["name"],

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-nest\", \"react\", \"react-express\", \"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\", \"angular-nest\", \"react\", \"react-experimental\", \"react-express\", \"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"
     },
     {
       "name": "init",

docs/generated/packages/react.json

@@ -141,7 +141,7 @@
           "linter": {
             "description": "The tool to use for running lint checks.",
             "type": "string",
-            "enum": ["eslint"],
+            "enum": ["eslint", "none"],
             "default": "eslint"
           },
           "routing": {
@@ -228,6 +228,12 @@
             "description": "Do not add dependencies to `package.json`.",
             "type": "boolean",
             "default": false
+          },
+          "rootProject": {
+            "description": "Create a application at the root of the workspace",
+            "type": "boolean",
+            "default": false,
+            "hidden": true
           }
         },
         "required": [],
@@ -314,7 +320,7 @@
           "linter": {
             "description": "The tool to use for running lint checks.",
             "type": "string",
-            "enum": ["eslint"],
+            "enum": ["eslint", "none"],
             "default": "eslint"
           },
           "unitTestRunner": {

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

@@ -21,6 +21,20 @@ describe('create-nx-workspace', () => {
 
   afterEach(() => cleanupProject());
 
+  it('should create a workspace with a single react app', () => {
+    const wsName = uniq('react');
+    const appName = uniq('app');
+
+    runCreateWorkspace(wsName, {
+      preset: 'react-experimental',
+      appName,
+      style: 'css',
+      packageManager,
+    });
+
+    checkFilesExist('package.json');
+  });
+
   it('should be able to create an empty workspace built for apps', () => {
     const wsName = uniq('apps');
     runCreateWorkspace(wsName, {

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

@@ -54,6 +54,7 @@ enum Preset {
   Angular = 'angular',
   AngularWithNest = 'angular-nest',
   React = 'react',
+  ReactExperimental = 'react-experimental',
   ReactWithExpress = 'react-express',
   ReactNative = 'react-native',
   Expo = 'expo',
@@ -674,7 +675,14 @@ async function determineStyle(
     });
   }
 
-  if ([Preset.ReactWithExpress, Preset.React, Preset.NextJs].includes(preset)) {
+  if (
+    [
+      Preset.ReactWithExpress,
+      Preset.React,
+      Preset.ReactExperimental,
+      Preset.NextJs,
+    ].includes(preset)
+  ) {
     choices.push(
       {
         name: 'styled-components',
@@ -1030,6 +1038,7 @@ function pointToTutorialAndCourse(preset: Preset) {
       break;
 
     case Preset.React:
+    case Preset.ReactExperimental:
     case Preset.ReactWithExpress:
     case Preset.NextJs:
       output.addVerticalSeparator();

packages/cypress/src/generators/cypress-project/cypress-project.ts

@@ -268,16 +268,23 @@ export async function cypressProjectGenerator(host: Tree, schema: Schema) {
 
 function normalizeOptions(host: Tree, options: Schema): CypressProjectSchema {
   const { appsDir } = getWorkspaceLayout(host);
-  const projectName = filePathPrefix(
-    options.directory ? `${options.directory}-${options.name}` : options.name
-  );
-  const projectRoot = options.directory
-    ? joinPathFragments(
-        appsDir,
-        names(options.directory).fileName,
-        options.name
-      )
-    : joinPathFragments(appsDir, options.name);
+  let projectName, projectRoot;
+
+  if (options.rootProject) {
+    projectName = options.name;
+    projectRoot = options.name;
+  } else {
+    projectName = filePathPrefix(
+      options.directory ? `${options.directory}-${options.name}` : options.name
+    );
+    projectRoot = options.directory
+      ? joinPathFragments(
+          appsDir,
+          names(options.directory).fileName,
+          options.name
+        )
+      : joinPathFragments(appsDir, options.name);
+  }
 
   options.linter = options.linter || Linter.EsLint;
   return {

packages/cypress/src/generators/cypress-project/schema.d.ts

@@ -11,4 +11,5 @@ export interface Schema {
   setParserOptionsProject?: boolean;
   standaloneConfig?: boolean;
   skipPackageJson?: boolean;
+  rootProject?: boolean;
 }

packages/cypress/src/generators/cypress-project/schema.json

@@ -59,6 +59,12 @@
       "type": "boolean",
       "default": false,
       "description": "Do not add dependencies to `package.json`."
+    },
+    "rootProject": {
+      "description": "Create a application at the root of the workspace",
+      "type": "boolean",
+      "default": false,
+      "hidden": true
     }
   },
   "required": ["name"],

packages/devkit/src/utils/offset-from-root.spec.ts

@@ -20,4 +20,9 @@ describe('offsetFromRoot', () => {
     const result = offsetFromRoot('apps/dirname/appname/');
     expect(result).toBe('../../../');
   });
+
+  it('should work for root', () => {
+    const result = offsetFromRoot('.');
+    expect(result).toBe('./');
+  });
 });

packages/devkit/src/utils/offset-from-root.ts

@@ -13,6 +13,8 @@ import { normalize, sep } from 'path';
  * @param fullPathToDir - directory path
  */
 export function offsetFromRoot(fullPathToDir: string): string {
+  if (fullPathToDir === '.') return './';
+
   const parts = normalize(fullPathToDir).split(sep);
   let offset = '';
   for (let i = 0; i < parts.length; ++i) {

packages/react/src/generators/application/application.spec.ts

@@ -825,4 +825,23 @@ describe('app', () => {
       });
     });
   });
+
+  describe('--root-project', () => {
+    it('should create files at the root', async () => {
+      await applicationGenerator(appTree, {
+        ...schema,
+        rootProject: true,
+      });
+      expect(appTree.read('/src/main.tsx')).toBeDefined();
+      expect(appTree.read('/e2e/cypress.config.ts')).toBeDefined();
+      expect(readJson(appTree, '/tsconfig.json').extends).toEqual(
+        './tsconfig.base.json'
+      );
+      expect(
+        readJson(appTree, '/workspace.json').projects['my-app'].architect[
+          'build'
+        ].options['outputPath']
+      ).toEqual('dist/my-app');
+    });
+  });
 });

packages/react/src/generators/application/application.ts

@@ -23,47 +23,48 @@ import {
 } from '@nrwl/devkit';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
 import reactInitGenerator from '../init/init';
-import { lintProjectGenerator } from '@nrwl/linter';
+import { Linter, lintProjectGenerator } from '@nrwl/linter';
 import { swcCoreVersion } from '@nrwl/js/src/utils/versions';
 import { swcLoaderVersion } from '@nrwl/webpack/src/utils/versions';
 
 async function addLinting(host: Tree, options: NormalizedSchema) {
   const tasks: GeneratorCallback[] = [];
-  const lintTask = await lintProjectGenerator(host, {
-    linter: options.linter,
-    project: options.projectName,
-    tsConfigPaths: [
-      joinPathFragments(options.appProjectRoot, 'tsconfig.app.json'),
-    ],
-    unitTestRunner: options.unitTestRunner,
-    eslintFilePatterns: [`${options.appProjectRoot}/**/*.{ts,tsx,js,jsx}`],
-    skipFormat: true,
-  });
-  tasks.push(lintTask);
+  if (options.linter === Linter.EsLint) {
+    const lintTask = await lintProjectGenerator(host, {
+      linter: options.linter,
+      project: options.projectName,
+      tsConfigPaths: [
+        joinPathFragments(options.appProjectRoot, 'tsconfig.app.json'),
+      ],
+      unitTestRunner: options.unitTestRunner,
+      eslintFilePatterns: [`${options.appProjectRoot}/**/*.{ts,tsx,js,jsx}`],
+      skipFormat: true,
+    });
+    tasks.push(lintTask);
 
-  const reactEslintJson = createReactEslintJson(
-    options.appProjectRoot,
-    options.setParserOptionsProject
-  );
+    const reactEslintJson = createReactEslintJson(
+      options.appProjectRoot,
+      options.setParserOptionsProject
+    );
 
-  updateJson(
-    host,
-    joinPathFragments(options.appProjectRoot, '.eslintrc.json'),
-    () => reactEslintJson
-  );
-
-  const installTask = await addDependenciesToPackageJson(
-    host,
-    extraEslintDependencies.dependencies,
-    {
-      ...extraEslintDependencies.devDependencies,
-      ...(options.compiler === 'swc'
-        ? { '@swc/core': swcCoreVersion, 'swc-loader': swcLoaderVersion }
-        : {}),
-    }
-  );
-  tasks.push(installTask);
+    updateJson(
+      host,
+      joinPathFragments(options.appProjectRoot, '.eslintrc.json'),
+      () => reactEslintJson
+    );
 
+    const installTask = await addDependenciesToPackageJson(
+      host,
+      extraEslintDependencies.dependencies,
+      {
+        ...extraEslintDependencies.devDependencies,
+        ...(options.compiler === 'swc'
+          ? { '@swc/core': swcCoreVersion, 'swc-loader': swcLoaderVersion }
+          : {}),
+      }
+    );
+    tasks.push(installTask);
+  }
   return runTasksInSerial(...tasks);
 }
 

packages/react/src/generators/application/lib/add-cypress.ts

@@ -9,7 +9,7 @@ export async function addCypress(host: Tree, options: NormalizedSchema) {
 
   return await cypressProjectGenerator(host, {
     ...options,
-    name: `${options.name}-e2e`,
+    name: options.e2eProjectName,
     directory: options.directory,
     project: options.projectName,
   });

packages/react/src/generators/application/lib/add-project.ts

@@ -41,7 +41,12 @@ function createBuildTarget(options: NormalizedSchema): TargetConfiguration {
     defaultConfiguration: 'production',
     options: {
       compiler: options.compiler ?? 'babel',
-      outputPath: joinPathFragments('dist', options.appProjectRoot),
+      outputPath: joinPathFragments(
+        'dist',
+        options.appProjectRoot != '.'
+          ? options.appProjectRoot
+          : options.projectName
+      ),
       index: joinPathFragments(options.appProjectRoot, 'src/index.html'),
       baseHref: '/',
       main: joinPathFragments(

packages/react/src/generators/application/lib/normalize-options.ts

@@ -19,10 +19,14 @@ export function normalizeOptions(
 ): NormalizedSchema {
   const appDirectory = normalizeDirectory(options);
   const appProjectName = normalizeProjectName(options);
-  const e2eProjectName = `${appProjectName}-e2e`;
+  const e2eProjectName = options.rootProject
+    ? 'e2e'
+    : `${names(options.name).fileName}-e2e`;
 
   const { appsDir } = getWorkspaceLayout(host);
-  const appProjectRoot = normalizePath(`${appsDir}/${appDirectory}`);
+  const appProjectRoot = options.rootProject
+    ? '.'
+    : normalizePath(`${appsDir}/${appDirectory}`);
 
   const parsedTags = options.tags
     ? options.tags.split(',').map((s) => s.trim())

packages/react/src/generators/application/lib/set-defaults.ts

@@ -28,6 +28,7 @@ export function setDefaults(host: Tree, options: NormalizedSchema) {
       ...prev,
       application: {
         style: options.style,
+        unitTestRunner: options.unitTestRunner,
         linter: options.linter,
         ...prev.application,
       },
@@ -37,6 +38,7 @@ export function setDefaults(host: Tree, options: NormalizedSchema) {
       },
       library: {
         style: options.style,
+        unitTestRunner: options.unitTestRunner,
         linter: options.linter,
         ...prev.library,
       },

packages/react/src/generators/application/schema.d.ts

@@ -28,6 +28,7 @@ export interface Schema {
   devServerPort?: number;
   skipDefaultProject?: boolean;
   skipPackageJson?: boolean;
+  rootProject?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {

packages/react/src/generators/application/schema.json

@@ -82,7 +82,7 @@
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",
-      "enum": ["eslint"],
+      "enum": ["eslint", "none"],
       "default": "eslint"
     },
     "routing": {
@@ -169,6 +169,12 @@
       "description": "Do not add dependencies to `package.json`.",
       "type": "boolean",
       "default": false
+    },
+    "rootProject": {
+      "description": "Create a application at the root of the workspace",
+      "type": "boolean",
+      "default": false,
+      "hidden": true
     }
   },
   "required": []