fix(react): ensure playwright configuration is using correct port in app gen (#21941)

e2e/react-core/src/react.test.ts

@@ -29,6 +29,44 @@ describe('React Applications', () => {
 
     afterAll(() => cleanupProject());
 
+    it('should be able to use Vite to build and test apps', async () => {
+      const appName = uniq('app');
+      const libName = uniq('lib');
+
+      runCLI(
+        `generate @nx/react:app ${appName} --bundler=vite --no-interactive --skipFormat`
+      );
+      runCLI(
+        `generate @nx/react:lib ${libName} --bundler=none --no-interactive --unit-test-runner=vitest --skipFormat`
+      );
+
+      // Library generated with Vite
+      checkFilesExist(`libs/${libName}/vite.config.ts`);
+
+      const mainPath = `apps/${appName}/src/main.tsx`;
+      updateFile(
+        mainPath,
+        `
+        import '@${proj}/${libName}';
+        ${readFile(mainPath)}
+      `
+      );
+
+      runCLI(`build ${appName}`);
+
+      checkFilesExist(`dist/apps/${appName}/index.html`);
+
+      if (runE2ETests()) {
+        const e2eResults = runCLI(`e2e ${appName}-e2e`, {
+          env: {
+            DEBUG: 'cypress:server:*',
+          },
+        });
+        expect(e2eResults).toContain('All specs passed!');
+        expect(await killPorts()).toBeTruthy();
+      }
+    }, 250_000);
+
     it('should be able to generate a react app + lib (with CSR and SSR)', async () => {
       const appName = uniq('app');
       const libName = uniq('lib');
@@ -124,44 +162,6 @@ describe('React Applications', () => {
       });
     }, 500000);
 
-    it('should be able to use Vite to build and test apps', async () => {
-      const appName = uniq('app');
-      const libName = uniq('lib');
-
-      runCLI(
-        `generate @nx/react:app ${appName} --bundler=vite --no-interactive --skipFormat`
-      );
-      runCLI(
-        `generate @nx/react:lib ${libName} --bundler=none --no-interactive --unit-test-runner=vitest --skipFormat`
-      );
-
-      // Library generated with Vite
-      checkFilesExist(`libs/${libName}/vite.config.ts`);
-
-      const mainPath = `apps/${appName}/src/main.tsx`;
-      updateFile(
-        mainPath,
-        `
-        import '@${proj}/${libName}';
-        ${readFile(mainPath)}
-      `
-      );
-
-      runCLI(`build ${appName}`);
-
-      checkFilesExist(`dist/apps/${appName}/index.html`);
-
-      if (runE2ETests()) {
-        const e2eResults = runCLI(`e2e ${appName}-e2e`, {
-          env: {
-            DEBUG: 'cypress:server:*',
-          },
-        });
-        expect(e2eResults).toContain('All specs passed!');
-        expect(await killPorts()).toBeTruthy();
-      }
-    }, 250_000);
-
     it('should generate app with routing', async () => {
       const appName = uniq('app');
 

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

@@ -49,7 +49,7 @@ export async function addE2e(
         bundler: options.bundler === 'rspack' ? 'webpack' : options.bundler,
         skipFormat: true,
         devServerTarget: `${options.projectName}:serve`,
-        baseUrl: 'http://localhost:4200',
+        baseUrl: `http://localhost:${options.devServerPort ?? 4200}`,
         jsx: true,
         rootProject: options.rootProject,
         webServerCommands: hasNxBuildPlugin
@@ -85,7 +85,7 @@ export async function addE2e(
         webServerCommand: `${getPackageManagerCommand().exec} nx serve ${
           options.name
         }`,
-        webServerAddress: 'http://localhost:4200',
+        webServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,
         rootProject: options.rootProject,
         addPlugin: options.addPlugin,
       });

packages/react/src/generators/host/lib/update-module-federation-e2e-project.ts

@@ -11,11 +11,13 @@ export function updateModuleFederationE2eProject(
 ) {
   try {
     let projectConfig = readProjectConfiguration(host, options.e2eProjectName);
-    projectConfig.targets.e2e.options = {
+    if (projectConfig.targets.e2e.executor !== '@nx/playwright:playwright') {
-      ...projectConfig.targets.e2e.options,
+      projectConfig.targets.e2e.options = {
-      baseUrl: `http://localhost:${options.devServerPort}`,
+        ...projectConfig.targets.e2e.options,
-    };
+        baseUrl: `http://localhost:${options.devServerPort}`,
-    updateProjectConfiguration(host, options.e2eProjectName, projectConfig);
+      };
+      updateProjectConfiguration(host, options.e2eProjectName, projectConfig);
+    }
   } catch {
     // nothing
   }