feat(react): add default development configuration for React and Next…

packages/next/migrations.json

@@ -78,6 +78,12 @@
       "version": "13.0.3-beta.1",
       "description": "Fix setup for less stylesheets",
       "factory": "./src/migrations/update-13-0-3/fix-less"
+    },
+    "add-default-development-configurations-14.0.0": {
+      "cli": "nx",
+      "version": "14.0.0-beta.0",
+      "description": "Add a default development configuration for build and serve targets.",
+      "factory": "./src/migrations/update-14-0-0/add-default-development-configurations"
     }
   },
   "packageJsonUpdates": {
@@ -237,6 +243,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "14.0.0": {
+      "version": "14.0.0-beta.1",
+      "packages": {
+        "next": {
+          "version": "12.1.5",
+          "alwaysAddToPackageJson": false
+        },
+        "eslint-config-next": {
+          "version": "12.1.5",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

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

@@ -271,6 +271,10 @@ describe('app', () => {
       dev: true,
     });
     expect(architectConfig.serve.configurations).toEqual({
+      development: {
+        buildTarget: 'my-app:build:development',
+        dev: true,
+      },
       production: { dev: false, buildTarget: 'my-app:build:production' },
     });
   });

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

@@ -17,20 +17,24 @@ export function addProject(host: Tree, options: NormalizedSchema) {
       root: options.appProjectRoot,
       outputPath: joinPathFragments('dist', options.appProjectRoot),
     },
-    // This has to be here so `nx serve [app] --prod` will work. Otherwise
-    // a missing configuration error will be thrown.
     configurations: {
+      development: {},
       production: {},
     },
   };
 
   targets.serve = {
     builder: '@nrwl/next:server',
+    defaultConfiguration: 'development',
     options: {
       buildTarget: `${options.projectName}:build`,
       dev: true,
     },
     configurations: {
+      development: {
+        buildTarget: `${options.projectName}:build:development`,
+        dev: true,
+      },
       production: {
         buildTarget: `${options.projectName}:build:production`,
         dev: false,

packages/next/src/migrations/update-14-0-0/add-default-development-configurations.spec.ts

@@ -0,0 +1,44 @@
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import {
+  addProjectConfiguration,
+  readProjectConfiguration,
+} from '@nrwl/devkit';
+import update from './add-default-development-configurations';
+
+describe('React default development configuration', () => {
+  it('should add development configuration if it does not exist', async () => {
+    const tree = createTreeWithEmptyWorkspace(2);
+    addProjectConfiguration(
+      tree,
+      'example',
+      {
+        root: 'apps/example',
+        projectType: 'application',
+        targets: {
+          build: {
+            executor: '@nrwl/next:build',
+            configurations: {},
+          },
+          serve: {
+            executor: '@nrwl/next:server',
+            configurations: {},
+          },
+        },
+      },
+      true
+    );
+
+    await update(tree);
+
+    const config = readProjectConfiguration(tree, 'example');
+
+    expect(config.targets.build.defaultConfiguration).toEqual('production');
+    expect(config.targets.build.configurations.development).toEqual({});
+
+    expect(config.targets.serve.defaultConfiguration).toEqual('development');
+    expect(config.targets.serve.configurations.development).toEqual({
+      buildTarget: `example:build:development`,
+      dev: true,
+    });
+  });
+});

packages/next/src/migrations/update-14-0-0/add-default-development-configurations.ts

@@ -0,0 +1,34 @@
+import {
+  formatFiles,
+  getProjects,
+  Tree,
+  updateProjectConfiguration,
+} from '@nrwl/devkit';
+
+export async function update(tree: Tree) {
+  const projects = getProjects(tree);
+
+  projects.forEach((config, name) => {
+    let shouldUpdate = false;
+    if (config.targets.build?.executor === '@nrwl/next:build') {
+      shouldUpdate = true;
+      config.targets.build.defaultConfiguration ??= 'production';
+      config.targets.build.configurations.development ??= {};
+    }
+
+    if (config.targets.serve?.executor === '@nrwl/next:server') {
+      shouldUpdate = true;
+      config.targets.serve.defaultConfiguration ??= 'development';
+      config.targets.serve.configurations.development ??= {
+        buildTarget: `${name}:build:development`,
+        dev: true,
+      };
+    }
+
+    if (shouldUpdate) updateProjectConfiguration(tree, name, config);
+  });
+
+  await formatFiles(tree);
+}
+
+export default update;

packages/next/src/utils/versions.ts

@@ -1,7 +1,7 @@
 export const nxVersion = '*';
 
-export const nextVersion = '12.1.2';
-export const eslintConfigNextVersion = '12.1.2';
+export const nextVersion = '12.1.5';
+export const eslintConfigNextVersion = '12.1.5';
 export const sassVersion = '1.43.2';
 export const lessLoader = '10.2.0';
 export const stylusLoader = '6.2.0';

packages/react/migrations.json

@@ -47,6 +47,12 @@
       "version": "14.0.0-beta.0",
       "description": "Replace deprecated '@testing-library/react-hook' package with `renderHook` from '@testing-library/react'.",
       "factory": "./src/migrations/update-14-0-0/replace-testing-library-react-hook"
+    },
+    "add-default-development-configurations-14.0.0": {
+      "cli": "nx",
+      "version": "14.0.0-beta.0",
+      "description": "Add a default development configuration for build and serve targets.",
+      "factory": "./src/migrations/update-14-0-0/add-default-development-configurations"
     }
   },
   "packageJsonUpdates": {

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

@@ -70,6 +70,12 @@ function createBuildTarget(options: NormalizedSchema): TargetConfiguration {
       webpackConfig: '@nrwl/react/plugins/webpack',
     },
     configurations: {
+      development: {
+        extractLicenses: false,
+        optimization: false,
+        sourceMap: true,
+        vendorChunk: true,
+      },
       production: {
         fileReplacements: [
           {
@@ -97,11 +103,15 @@ function createBuildTarget(options: NormalizedSchema): TargetConfiguration {
 function createServeTarget(options: NormalizedSchema): TargetConfiguration {
   return {
     executor: '@nrwl/web:dev-server',
+    defaultConfiguration: 'development',
     options: {
       buildTarget: `${options.projectName}:build`,
       hmr: true,
     },
     configurations: {
+      development: {
+        buildTarget: `${options.projectName}:build:development`,
+      },
       production: {
         buildTarget: `${options.projectName}:build:production`,
         hmr: false,

packages/react/src/migrations/update-14-0-0/add-default-development-configurations.spec.ts

@@ -0,0 +1,48 @@
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import {
+  addProjectConfiguration,
+  readProjectConfiguration,
+} from '@nrwl/devkit';
+import update from './add-default-development-configurations';
+
+describe('React default development configuration', () => {
+  it('should add development configuration if it does not exist', async () => {
+    const tree = createTreeWithEmptyWorkspace(2);
+    addProjectConfiguration(
+      tree,
+      'example',
+      {
+        root: 'apps/example',
+        projectType: 'application',
+        targets: {
+          build: {
+            executor: '@nrwl/web:webpack',
+            configurations: {},
+          },
+          serve: {
+            executor: '@nrwl/web:dev-server',
+            configurations: {},
+          },
+        },
+      },
+      true
+    );
+
+    await update(tree);
+
+    const config = readProjectConfiguration(tree, 'example');
+
+    expect(config.targets.build.defaultConfiguration).toEqual('production');
+    expect(config.targets.build.configurations.development).toEqual({
+      extractLicenses: false,
+      optimization: false,
+      sourceMap: true,
+      vendorChunk: true,
+    });
+
+    expect(config.targets.serve.defaultConfiguration).toEqual('development');
+    expect(config.targets.serve.configurations.development).toEqual({
+      buildTarget: `example:build:development`,
+    });
+  });
+});

packages/react/src/migrations/update-14-0-0/add-default-development-configurations.ts

@@ -0,0 +1,38 @@
+import {
+  formatFiles,
+  getProjects,
+  Tree,
+  updateProjectConfiguration,
+} from '@nrwl/devkit';
+
+export async function update(tree: Tree) {
+  const projects = getProjects(tree);
+
+  projects.forEach((config, name) => {
+    let shouldUpdate = false;
+    if (config.targets.build?.executor === '@nrwl/web:webpack') {
+      shouldUpdate = true;
+      config.targets.build.defaultConfiguration ??= 'production';
+      config.targets.build.configurations.development ??= {
+        extractLicenses: false,
+        optimization: false,
+        sourceMap: true,
+        vendorChunk: true,
+      };
+    }
+
+    if (config.targets.serve?.executor === '@nrwl/web:dev-server') {
+      shouldUpdate = true;
+      config.targets.serve.defaultConfiguration ??= 'development';
+      config.targets.serve.configurations.development ??= {
+        buildTarget: `${name}:build:development`,
+      };
+    }
+
+    if (shouldUpdate) updateProjectConfiguration(tree, name, config);
+  });
+
+  await formatFiles(tree);
+}
+
+export default update;