@nx/react 21.3.0-canary.20250613-18155f4 → 21.3.0-canary.20250617-b97222d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "21.3.0-canary.20250613-18155f4",
+  "version": "21.3.0-canary.20250617-b97222d",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Vitest, Playwright, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -38,11 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "21.3.0-canary.20250613-18155f4",
-    "@nx/js": "21.3.0-canary.20250613-18155f4",
-    "@nx/eslint": "21.3.0-canary.20250613-18155f4",
-    "@nx/web": "21.3.0-canary.20250613-18155f4",
-    "@nx/module-federation": "21.3.0-canary.20250613-18155f4",
+    "@nx/devkit": "21.3.0-canary.20250617-b97222d",
+    "@nx/js": "21.3.0-canary.20250617-b97222d",
+    "@nx/eslint": "21.3.0-canary.20250617-b97222d",
+    "@nx/web": "21.3.0-canary.20250617-b97222d",
+    "@nx/module-federation": "21.3.0-canary.20250617-b97222d",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

package/src/generators/application/files/base-rspack/rspack.config.js__tmpl__

@@ -8,7 +8,7 @@ module.exports = {
     path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
   },
   devServer: {
-    port: 4200,
+    port: <%= port %>,
     historyApiFallback: {
       index: '/index.html',
       disableDotRule: true,

package/src/generators/application/files/base-webpack/webpack.config.js__tmpl__

@@ -8,7 +8,7 @@ module.exports = {
     path: join(__dirname, '<%= webpackPluginOptions.outputPath %>'),
   },
   devServer: {
-    port: 4200,
+    port: <%= port %>,
     historyApiFallback: {
       index: '/index.html',
       disableDotRule: true,

package/src/generators/application/lib/add-e2e.js

@@ -18,7 +18,7 @@ async function addE2e(tree, options) {
         e2eWebServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,
         e2eWebServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx run ${options.projectName}:serve`,
         e2eCiWebServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx run ${options.projectName}:serve-static`,
-        e2eCiBaseUrl: `http://localhost:4200`,
+        e2eCiBaseUrl: `http://localhost:${options.port ?? 4300}`,
         e2eDevServerTarget: `${options.projectName}:serve`,
     };
     if (options.bundler === 'webpack') {
@@ -32,8 +32,12 @@ async function addE2e(tree, options) {
     else if (options.bundler === 'vite') {
         const { getViteE2EWebServerInfo, getReactRouterE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         e2eWebServerInfo = options.useReactRouter
-            ? await getReactRouterE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200)
-            : await getViteE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
+            ? await getReactRouterE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200, 
+            // If the user manually sets the port, then use it for dev and preview
+            options.port)
+            : await getViteE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200, 
+            // If the user manually sets the port, then use it for dev and preview
+            options.port);
     }
     else if (options.bundler === 'rsbuild') {
         (0, devkit_1.ensurePackage)('@nx/rsbuild', versions_1.nxVersion);

package/src/generators/application/lib/bundlers/add-vite.js

@@ -33,6 +33,7 @@ async function setupViteConfiguration(tree, options, tasks) {
         skipFormat: true,
         addPlugin: options.addPlugin,
         projectType: 'application',
+        port: options.port,
     });
     tasks.push(viteTask);
     createOrEditViteConfig(tree, {
@@ -41,6 +42,8 @@ async function setupViteConfiguration(tree, options, tasks) {
         includeVitest: options.unitTestRunner === 'vitest',
         inSourceTests: options.inSourceTests,
         rollupOptionsExternal: ["'react'", "'react-dom'", "'react/jsx-runtime'"],
+        port: options.port,
+        previewPort: options.port,
         ...(options.useReactRouter
             ? reactRouterFrameworkConfig
             : baseReactConfig),

package/src/generators/application/lib/create-application-files.d.ts

@@ -18,6 +18,7 @@ export declare function getDefaultTemplateVariables(host: Tree, options: Normali
     style: "none" | "styled-components" | "@emotion/styled" | "styled-jsx" | "css" | "scss" | "less";
     hasStyleFile: boolean;
     isUsingTsSolutionSetup: boolean;
+    port: number;
     projectName: string;
     appProjectRoot: string;
     e2eProjectName: string;

package/src/generators/application/lib/create-application-files.js

@@ -36,6 +36,7 @@ function getDefaultTemplateVariables(host, options) {
         style: options.style === 'tailwind' ? 'css' : options.style,
         hasStyleFile,
         isUsingTsSolutionSetup: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
+        port: options.port ?? 4200,
     };
 }
 function createNxRspackPluginOptions(options, rootOffset, tsx = true) {

package/src/generators/application/lib/normalize-options.js

@@ -60,7 +60,7 @@ async function normalizeOptions(host, options) {
     normalized.unitTestRunner = normalized.unitTestRunner ?? 'jest';
     normalized.e2eTestRunner = normalized.e2eTestRunner ?? 'playwright';
     normalized.inSourceTests = normalized.minimal || normalized.inSourceTests;
-    normalized.devServerPort ??= (0, find_free_port_1.findFreePort)(host);
+    normalized.devServerPort ??= options.port ?? (0, find_free_port_1.findFreePort)(host);
     normalized.minimal = normalized.minimal ?? false;
     return normalized;
 }

package/src/generators/application/schema.d.ts

@@ -33,6 +33,7 @@ export interface Schema {
   useTsSolution?: boolean;
   formatter?: 'prettier' | 'none';
   useProjectJson?: boolean;
+  port?: number;
 }
 
 export interface NormalizedSchema<T extends Schema = Schema> extends T {

package/src/generators/application/schema.json

@@ -16,6 +16,10 @@
     {
       "command": "nx g app apps/myapp --routing",
       "description": "Set up React Router"
+    },
+    {
+      "command": "nx g app apps/myapp --port=3000",
+      "description": "Set up the dev server to use port 3000"
     }
   ],
   "type": "object",
@@ -196,6 +200,12 @@
     "useProjectJson": {
       "type": "boolean",
       "description": "Use a `project.json` configuration file instead of inlining the Nx configuration in the `package.json` file."
+    },
+    "port": {
+      "type": "number",
+      "description": "The port to use for the development server",
+      "x-prompt": "Which port would you like to use for the dev server?",
+      "default": 4200
     }
   },
   "required": ["directory"],