fix(testing): application generators should accurately configure e2e projects (#27453)

- feat(devkit): add util for determining the e2e web server info
- feat(vite): add util for determining the e2e web server info
- feat(webpack): add util for determining the e2e web server info
- fix(webpack): allow port override
- fix(devkit): e2e web server info util should handle target defaults
- feat(webpack): export the e2e web server info utils
- fix(vite): rename util
- fix(devkit): util should determine the devTarget for cypress
- fix(react): improve accuracy of e2e project generation

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
The logic for finding the correct targets and web addresses to use when
setting up e2e projects is flawed and missing some key considerations.

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
The logic is accurate and usage is simplified across plugins

Projects:
- [x] Angular
- [x] Expo
- [x] Next
- [x] Nuxt
- [x] Vue
- [x] Web
- [x] Remix
- [x] React
- [x] React Native

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

(cherry picked from commit 320d9f2)

Author: Coly010

docs/generated/packages/expo/generators/application.json

@@ -76,7 +76,7 @@
         "description": "Adds the specified e2e test runner",
         "type": "string",
         "enum": ["playwright", "cypress", "detox", "none"],
-        "default": "playwright"
+        "default": "none"
       },
       "standaloneConfig": {
         "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",

e2e/web/src/file-server-legacy.test.ts

@@ -35,14 +35,6 @@ describe('file-server', () => {
         },
       }
     );
-    runCLI(
-      `generate @nx/web:static-config --buildTarget=${ngAppName}:build --outputPath=dist/apps/${ngAppName}/browser --no-interactive`,
-      {
-        env: {
-          NX_ADD_PLUGINS: 'false',
-        },
-      }
-    );
     runCLI(
       `generate @nx/web:static-config --buildTarget=${reactAppName}:build --targetName=custom-serve-static --no-interactive`,
       {

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

@@ -1,4 +1,4 @@
-import type { Tree } from '@nx/devkit';
+import { Tree } from '@nx/devkit';
 import {
   addDependenciesToPackageJson,
   addProjectConfiguration,
@@ -13,6 +13,7 @@ import { nxVersion } from '../../../utils/versions';
 import { getInstalledAngularVersionInfo } from '../../utils/version-utils';
 import type { NormalizedSchema } from './normalized-schema';
 import { addE2eCiTargetDefaults } from '@nx/devkit/src/generators/target-defaults-utils';
+import { E2EWebServerDetails } from '@nx/devkit/src/generators/e2e-web-server-info-utils';
 
 export async function addE2e(tree: Tree, options: NormalizedSchema) {
   // since e2e are separate projects, default to adding plugins
@@ -21,12 +22,19 @@ export async function addE2e(tree: Tree, options: NormalizedSchema) {
     process.env.NX_ADD_PLUGINS !== 'false' &&
     nxJson.useInferencePlugins !== false;
 
+  const e2eWebServerInfo = getAngularE2EWebServerInfo(
+    tree,
+    options.name,
+    options.port
+  );
+  // TODO: This can call `@nx/web:static-config` generator when ready
+  addFileServerTarget(tree, options, 'serve-static', e2eWebServerInfo.e2ePort);
+
   if (options.e2eTestRunner === 'cypress') {
     const { configurationGenerator } = ensurePackage<
       typeof import('@nx/cypress')
     >('@nx/cypress', nxVersion);
-    // TODO: This can call `@nx/web:static-config` generator when ready
-    addFileServerTarget(tree, options, 'serve-static');
+
     addProjectConfiguration(tree, options.e2eProjectName, {
       projectType: 'application',
       root: options.e2eProjectRoot,
@@ -41,8 +49,14 @@ export async function addE2e(tree: Tree, options: NormalizedSchema) {
       linter: options.linter,
       skipPackageJson: options.skipPackageJson,
       skipFormat: true,
-      devServerTarget: `${options.name}:${options.e2eWebServerTarget}:development`,
-      baseUrl: options.e2eWebServerAddress,
+      devServerTarget: e2eWebServerInfo.e2eDevServerTarget,
+      baseUrl: e2eWebServerInfo.e2eWebServerAddress,
+      webServerCommands: {
+        default: e2eWebServerInfo.e2eWebServerCommand,
+        production: e2eWebServerInfo.e2eCiWebServerCommand,
+      },
+      ciWebServerCommand: e2eWebServerInfo.e2eCiWebServerCommand,
+      ciBaseUrl: e2eWebServerInfo.e2eCiBaseUrl,
       rootProject: options.rootProject,
       addPlugin,
     });
@@ -73,10 +87,8 @@ export async function addE2e(tree: Tree, options: NormalizedSchema) {
       js: false,
       linter: options.linter,
       setParserOptionsProject: options.setParserOptionsProject,
-      webServerCommand: `${getPackageManagerCommand().exec} nx ${
-        options.e2eWebServerTarget
-      } ${options.name}`,
-      webServerAddress: options.e2eWebServerAddress,
+      webServerCommand: e2eWebServerInfo.e2eWebServerCommand,
+      webServerAddress: e2eWebServerInfo.e2eWebServerAddress,
       rootProject: options.rootProject,
       addPlugin,
     });
@@ -94,7 +106,8 @@ export async function addE2e(tree: Tree, options: NormalizedSchema) {
 function addFileServerTarget(
   tree: Tree,
   options: NormalizedSchema,
-  targetName: string
+  targetName: string,
+  e2ePort: number
 ) {
   if (!options.skipPackageJson) {
     addDependenciesToPackageJson(tree, {}, { '@nx/web': nxVersion });
@@ -109,7 +122,7 @@ function addFileServerTarget(
     executor: '@nx/web:file-server',
     options: {
       buildTarget: `${options.name}:build`,
-      port: options.e2ePort,
+      port: e2ePort,
       staticFilePath: isUsingApplicationBuilder
         ? joinPathFragments(options.outputPath, 'browser')
         : undefined,
@@ -118,3 +131,32 @@ function addFileServerTarget(
   };
   updateProjectConfiguration(tree, options.name, projectConfig);
 }
+
+function getAngularE2EWebServerInfo(
+  tree: Tree,
+  projectName: string,
+  portOverride: number
+): E2EWebServerDetails & { e2ePort: number } {
+  const nxJson = readNxJson(tree);
+  let e2ePort = portOverride ?? 4200;
+
+  if (
+    nxJson.targetDefaults?.['serve'] &&
+    (nxJson.targetDefaults?.['serve'].options?.port ||
+      nxJson.targetDefaults?.['serve'].options?.env?.PORT)
+  ) {
+    e2ePort =
+      nxJson.targetDefaults?.['serve'].options?.port ||
+      nxJson.targetDefaults?.['serve'].options?.env?.PORT;
+  }
+
+  const pm = getPackageManagerCommand();
+  return {
+    e2eCiBaseUrl: 'http://localhost:4200',
+    e2eCiWebServerCommand: `${pm.exec} nx run ${projectName}:serve-static`,
+    e2eWebServerCommand: `${pm.exec} nx run ${projectName}:serve`,
+    e2eWebServerAddress: `http://localhost:${e2ePort}`,
+    e2eDevServerTarget: `${projectName}:serve`,
+    e2ePort,
+  };
+}

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

@@ -26,21 +26,9 @@ export async function normalizeOptions(
   options.projectNameAndRootFormat = projectNameAndRootFormat;
 
   const nxJson = readNxJson(host);
-  let e2eWebServerTarget = 'serve';
-  let e2ePort = options.port ?? 4200;
-  if (
-    nxJson.targetDefaults?.[e2eWebServerTarget] &&
-    (nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
-      nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT)
-  ) {
-    e2ePort =
-      nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
-      nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT;
-  }
 
   const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
   const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
-  const e2eWebServerAddress = `http://localhost:${e2ePort}`;
 
   const parsedTags = options.tags
     ? options.tags.split(',').map((s) => s.trim())
@@ -72,9 +60,6 @@ export async function normalizeOptions(
     appProjectSourceRoot: `${appProjectRoot}/src`,
     e2eProjectRoot,
     e2eProjectName,
-    e2eWebServerAddress,
-    e2eWebServerTarget,
-    e2ePort,
     parsedTags,
     bundler,
     outputPath: joinPathFragments(

packages/angular/src/generators/application/lib/normalized-schema.ts

@@ -12,9 +12,6 @@ export interface NormalizedSchema extends Schema {
   appProjectSourceRoot: string;
   e2eProjectName: string;
   e2eProjectRoot: string;
-  e2eWebServerAddress: string;
-  e2eWebServerTarget: string;
-  e2ePort: number;
   parsedTags: string[];
   outputPath: string;
 }