fix: allow cypress config.port to override devServer.port for proxying assets

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-08-19-23
+08-28-23

cli/CHANGELOG.md

@@ -27,6 +27,7 @@ _Released 08/22/2023 (PENDING)_
 - Resolve the `process/browser` global inside `@cypress/webpack-batteries-included-preprocessor` to resolve to `process/browser.js` in order to explicitly provide the file extension. File resolution must include the extension for `.mjs` and `.js` files inside ESM packages in order to resolve correctly. Fixes[#27599](https://github.com/cypress-io/cypress/issues/27599).
 - Fixed an issue where the correct `pnp` process was not being discovered. Fixes [#27562](https://github.com/cypress-io/cypress/issues/27562).
 - Fixed incorrect type declarations for Cypress and Chai globals that asserted them to be local variables of the global scope rather than properties on the global object. Fixes [#27539](https://github.com/cypress-io/cypress/issues/27539). Fixed in [#27540](https://github.com/cypress-io/cypress/pull/27540).
+- Dev Servers will now respect and use the `port` configuration option if present. Fixes [#27675](https://github.com/cypress-io/cypress/issues/27675).
 
 **Dependency Updates:**
 

npm/vite-dev-server/cypress/e2e/react.cy.ts

@@ -17,7 +17,7 @@ for (const project of VITE_REACT) {
   describe(`Working with ${project}`, () => {
     beforeEach(() => {
       cy.scaffoldProject(project)
-      cy.openProject(project, ['--config-file', 'cypress-vite.config.ts'])
+      cy.openProject(project, ['--config-file', 'cypress-vite.config.ts', '--component'])
       cy.startAppServer('component')
     })
 

npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts

@@ -5,7 +5,7 @@ import dedent from 'dedent'
 describe('Config options', () => {
   it('works with tailwind', () => {
     cy.scaffoldProject('tailwind-vite')
-    cy.openProject('tailwind-vite')
+    cy.openProject('tailwind-vite', ['--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -44,7 +44,7 @@ describe('Config options', () => {
 
   it('supports supportFile = false', () => {
     cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-no-support.config.ts'])
+    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-no-support.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -53,28 +53,11 @@ describe('Config options', () => {
     cy.get('.passed > .num').should('contain', 1)
   })
 
-  it('chooses new port when specified port is in use', () => {
-    cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-port-in-use.config.ts'])
-    cy.startAppServer('component')
-
-    cy.visitApp()
-
-    cy.contains('App.cy.jsx').click()
-    cy.get('.passed > .num').should('contain', 2)
-
-    cy.withCtx(async (ctx) => {
-      const config = ctx.lifecycleManager.loadedFullConfig
-
-      expect(config.baseUrl).to.equal('http://localhost:3001')
-    })
-  })
-
   it('supports serving files with whitespace', () => {
     const specWithWhitespace = 'spec with whitespace.cy.jsx'
 
     cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite.config.ts'])
+    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.withCtx(async (ctx, { specWithWhitespace }) => {
@@ -91,7 +74,7 @@ describe('Config options', () => {
 
   it('supports @cypress/vite-dev-server', () => {
     cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-dev-server-function.config.ts'])
+    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-dev-server-function.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -102,7 +85,7 @@ describe('Config options', () => {
 
   it('supports viteConfig as an async function', () => {
     cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-async-function-config.config.ts'])
+    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-async-function-config.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -132,7 +115,7 @@ describe('sourcemaps', () => {
     `
 
     cy.scaffoldProject('vite3.0.2-react')
-    cy.openProject('vite3.0.2-react', ['--config-file', 'cypress-vite.config.ts'])
+    cy.openProject('vite3.0.2-react', ['--config-file', 'cypress-vite.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.withCtx(async (ctx, o) => {

npm/vite-dev-server/src/resolveConfig.ts

@@ -65,6 +65,7 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
 function makeCypressViteConfig (config: ViteDevServerConfig, vite: Vite): InlineConfig {
   const {
     cypressConfig: {
+      port,
       projectRoot,
       devServerPublicPathRoute,
       supportFile,
@@ -74,6 +75,8 @@ function makeCypressViteConfig (config: ViteDevServerConfig, vite: Vite): Inline
     specs,
   } = config
 
+  const vitePort = port ?? undefined
+
   // Vite caches its output in the .vite directory in the node_modules where vite lives.
   // So we want to find that node_modules path and ensure it's added to the "allow" list
   const vitePathNodeModules = path.dirname(path.dirname(require.resolve(`vite/package.json`, {
@@ -122,6 +125,7 @@ function makeCypressViteConfig (config: ViteDevServerConfig, vite: Vite): Inline
           vite.searchForWorkspaceRoot?.(process.cwd()),
         ],
       },
+      port: vitePort,
       host: '127.0.0.1',
       // Disable file watching and HMR when executing tests in `run` mode
       ...(isTextTerminal

npm/webpack-dev-server/cypress/e2e/angular.cy.ts

@@ -15,7 +15,7 @@ for (const project of WEBPACK_ANGULAR) {
   context(project, () => {
     beforeEach(() => {
       cy.scaffoldProject(project)
-      cy.openProject(project)
+      cy.openProject(project, ['--component'])
     })
 
     describe('configuration handling', () => {

npm/webpack-dev-server/cypress/e2e/create-react-app.cy.ts

@@ -14,7 +14,7 @@ for (const project of WEBPACK_REACT) {
   describe(`Working with ${project}`, () => {
     beforeEach(() => {
       cy.scaffoldProject(project)
-      cy.openProject(project)
+      cy.openProject(project, ['--component'])
       cy.startAppServer('component')
     })
 

npm/webpack-dev-server/cypress/e2e/next.cy.ts

@@ -14,7 +14,7 @@ for (const project of WEBPACK_REACT) {
   describe(`Working with ${project}`, () => {
     beforeEach(() => {
       cy.scaffoldProject(project)
-      cy.openProject(project)
+      cy.openProject(project, ['--component'])
       cy.startAppServer('component')
     })
 

npm/webpack-dev-server/cypress/e2e/nuxt.cy.ts

@@ -16,7 +16,7 @@ for (const project of PROJECTS) {
   describe(`Working with ${project}`, () => {
     beforeEach(() => {
       cy.scaffoldProject(project)
-      cy.openProject(project)
+      cy.openProject(project, ['--component'])
       cy.startAppServer('component')
     })
 

npm/webpack-dev-server/cypress/e2e/react.cy.ts

@@ -17,7 +17,7 @@ for (const project of WEBPACK_REACT) {
   describe(`Working with ${project}`, () => {
     beforeEach(() => {
       cy.scaffoldProject(project)
-      cy.openProject(project, ['--config-file', 'cypress-webpack.config.ts'])
+      cy.openProject(project, ['--config-file', 'cypress-webpack.config.ts', '--component'])
       cy.startAppServer('component')
     })
 

npm/webpack-dev-server/cypress/e2e/vue-cli.cy.ts

@@ -14,7 +14,7 @@ for (const project of PROJECTS) {
   describe(`Working with ${project}`, () => {
     beforeEach(() => {
       cy.scaffoldProject(project)
-      cy.openProject(project)
+      cy.openProject(project, ['--component'])
       cy.startAppServer('component')
     })
 

npm/webpack-dev-server/cypress/e2e/webpack-dev-server.cy.ts

@@ -3,7 +3,7 @@
 describe('Config options', () => {
   it('supports supportFile = false', () => {
     cy.scaffoldProject('webpack5_wds4-react')
-    cy.openProject('webpack5_wds4-react', ['--config-file', 'cypress-webpack-no-support.config.ts'])
+    cy.openProject('webpack5_wds4-react', ['--config-file', 'cypress-webpack-no-support.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -14,7 +14,7 @@ describe('Config options', () => {
 
   it('supports nested config', () => {
     cy.scaffoldProject('webpack-react-nested-config')
-    cy.openProject('webpack-react-nested-config', ['--config-file', 'cypress/cypress.config.js'])
+    cy.openProject('webpack-react-nested-config', ['--config-file', 'cypress/cypress.config.js', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -25,7 +25,7 @@ describe('Config options', () => {
 
   it('supports @cypress/webpack-dev-server', () => {
     cy.scaffoldProject('webpack5_wds4-react')
-    cy.openProject('webpack5_wds4-react', ['--config-file', 'cypress-webpack-dev-server-function.config.ts'])
+    cy.openProject('webpack5_wds4-react', ['--config-file', 'cypress-webpack-dev-server-function.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -36,7 +36,7 @@ describe('Config options', () => {
 
   it('supports webpackConfig as an async function', () => {
     cy.scaffoldProject('webpack5_wds4-react')
-    cy.openProject('webpack5_wds4-react', ['--config-file', 'cypress-webpack-dev-server-async-config.config.ts'])
+    cy.openProject('webpack5_wds4-react', ['--config-file', 'cypress-webpack-dev-server-async-config.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -53,7 +53,7 @@ describe('Config options', () => {
 
   it('recompiles with new spec and custom indexHtmlFile', () => {
     cy.scaffoldProject('webpack5_wds4-react')
-    cy.openProject('webpack5_wds4-react', ['--config-file', 'cypress-webpack-dev-server-custom-index.config.ts'])
+    cy.openProject('webpack5_wds4-react', ['--config-file', 'cypress-webpack-dev-server-custom-index.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -71,7 +71,7 @@ describe('Config options', () => {
 
   it('supports loading assets via relative urls', () => {
     cy.scaffoldProject('webpack-dev-server-relative')
-    cy.openProject('webpack-dev-server-relative')
+    cy.openProject('webpack-dev-server-relative', ['--component'])
     cy.startAppServer('component')
 
     cy.visitApp()

npm/webpack-dev-server/src/devServer.ts

@@ -64,8 +64,11 @@ export function devServer (devServerConfig: WebpackDevServerConfig): Promise<Cyp
   return new Promise(async (resolve, reject) => {
     const result = await devServer.create(devServerConfig) as DevServerCreateResult
 
+    // @ts-expect-error
+    const { port } = result.server?.options
+
     if (result.version === 3) {
-      const srv = result.server.listen(0, '127.0.0.1', () => {
+      const srv = result.server.listen(port || 0, '127.0.0.1', () => {
         const port = (srv.address() as AddressInfo).port
 
         debug('Component testing webpack server 3 started on port %s', port)

npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts

@@ -17,6 +17,7 @@ export function makeCypressWebpackConfig (
   const {
     devServerConfig: {
       cypressConfig: {
+        port,
         projectRoot,
         devServerPublicPathRoute,
         supportFile,
@@ -43,6 +44,8 @@ export function makeCypressWebpackConfig (
     },
   } = config
 
+  const webpackDevServerPort = port ?? undefined
+
   debug(`Using HtmlWebpackPlugin version ${htmlWebpackPluginVersion} from ${htmlWebpackPluginImportPath}`)
 
   const optimization: Record<string, any> = {
@@ -106,6 +109,7 @@ export function makeCypressWebpackConfig (
     return {
       ...finalConfig,
       devServer: {
+        port: webpackDevServerPort,
         client: {
           overlay: false,
         },
@@ -117,6 +121,7 @@ export function makeCypressWebpackConfig (
   return {
     ...finalConfig,
     devServer: {
+      port: webpackDevServerPort,
       overlay: false,
     },
   }

packages/app/cypress/e2e/create-from-component.cy.ts

@@ -208,7 +208,7 @@ describe('Create from component card', () => {
     context('project with default spec pattern', () => {
       validateCreateFromVueComponentCard(() => {
         cy.scaffoldProject('no-specs-vue-2')
-        cy.openProject('no-specs-vue-2')
+        cy.openProject('no-specs-vue-2', ['--component'])
         cy.startAppServer('component')
         cy.visitApp()
 
@@ -219,7 +219,7 @@ describe('Create from component card', () => {
     context('project with custom spec pattern', () => {
       validateCreateFromVueComponentCard(() => {
         cy.scaffoldProject('no-specs-vue-2')
-        cy.openProject('no-specs-vue-2', ['--config-file', 'cypress-custom-spec-pattern.config.js'])
+        cy.openProject('no-specs-vue-2', ['--config-file', 'cypress-custom-spec-pattern.config.js', '--component'])
         cy.startAppServer('component')
         cy.visitApp()
 
@@ -233,7 +233,7 @@ describe('Create from component card', () => {
     context('project with default spec pattern', () => {
       validateCreateFromReactComponentCard(() => {
         cy.scaffoldProject('no-specs')
-        cy.openProject('no-specs')
+        cy.openProject('no-specs', ['--component'])
         cy.startAppServer('component')
         cy.visitApp()
 
@@ -244,7 +244,7 @@ describe('Create from component card', () => {
     context('project with custom spec pattern', () => {
       validateCreateFromReactComponentCard(() => {
         cy.scaffoldProject('no-specs')
-        cy.openProject('no-specs', ['--config-file', 'cypress-custom-spec-pattern.config.ts'])
+        cy.openProject('no-specs', ['--config-file', 'cypress-custom-spec-pattern.config.ts', '--component'])
         cy.startAppServer('component')
         cy.visitApp()
 

packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts

@@ -8,7 +8,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
     beforeEach(() => {
       cy.scaffoldProject('cypress-in-cypress')
       cy.findBrowsers()
-      cy.openProject('cypress-in-cypress')
+      cy.openProject('cypress-in-cypress', ['--component'])
       cy.startAppServer('component')
     })
 
@@ -187,7 +187,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
     })
 
     it('set the correct viewport values from CLI', () => {
-      cy.openProject('cypress-in-cypress', ['--config', 'viewportWidth=333,viewportHeight=333'])
+      cy.openProject('cypress-in-cypress', ['--config', 'viewportWidth=333,viewportHeight=333', '--component'])
       cy.startAppServer('component')
 
       cy.visitApp()

packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts

@@ -36,7 +36,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
   it('component testing run mode spec runner header is correct', () => {
     cy.scaffoldProject('cypress-in-cypress')
     cy.findBrowsers()
-    cy.openProject('cypress-in-cypress')
+    cy.openProject('cypress-in-cypress', ['--component'])
     cy.startAppServer('component')
     cy.visitApp(`/specs/runner?file=src/TestComponent.spec.jsx&${CY_IN_CY_SIMULATE_RUN_MODE}`)
 

packages/app/cypress/e2e/cypress-in-cypress.cy.ts

@@ -12,11 +12,21 @@ const dragHandleToClientX = (panel: DraggablePanel, x: number) => {
 function startAtSpecsPage (testingType: typeof testingTypes[number]) {
   cy.scaffoldProject('cypress-in-cypress')
   cy.findBrowsers()
-  cy.openProject('cypress-in-cypress')
+
+  openProject(testingType)
+
   cy.startAppServer(testingType)
   cy.visitApp()
 }
 
+function openProject (testingType: typeof testingTypes[number]) {
+  if (testingType === 'e2e') {
+    cy.openProject('cypress-in-cypress')
+  } else {
+    cy.openProject('cypress-in-cypress', ['--component'])
+  }
+}
+
 // For Cypress-in-Cypress tests that do not vary based on testing type
 describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 10000 }, () => {
   testingTypes.forEach((testingType) => {
@@ -103,7 +113,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
 
       cy.scaffoldProject('cypress-in-cypress')
       cy.findBrowsers()
-      cy.openProject('cypress-in-cypress')
+      openProject(testingType)
       cy.withCtx((ctx) => {
         ctx.coreData.localSettings.preferences.reporterWidth = 800
         ctx.coreData.localSettings.preferences.specListWidth = 250

packages/app/cypress/e2e/debug.cy.ts

@@ -14,7 +14,7 @@ Cypress.on('window:before:load', (win) => {
 describe('App - Debug Page', () => {
   beforeEach(() => {
     cy.scaffoldProject('cypress-in-cypress')
-    cy.openProject('cypress-in-cypress')
+    cy.openProject('cypress-in-cypress', ['--component'])
     cy.startAppServer('component')
 
     cy.loginUser()

packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts

@@ -33,7 +33,7 @@ function verifyErrorOnlyCapturedOnce (err: string) {
 function loadErrorSpec (options: Options): VerifyFunc {
   const { projectName, filePath, failCount, passCount = '--', configFile } = options
 
-  cy.openProject(projectName, ['--config-file', configFile])
+  cy.openProject(projectName, ['--config-file', configFile, '--component'])
   cy.startAppServer('component')
   cy.visitApp(`specs/runner?file=${filePath}`)
 
@@ -68,7 +68,7 @@ reactVersions.forEach((reactVersion) => {
     it('error conditions', () => {
       const verify = loadErrorSpec({
         projectName: `react${reactVersion}`,
-        configFile: 'cypress-vite.config.ts',
+        configFile: 'cypress-vite-default.config.ts',
         filePath: 'src/Errors.cy.jsx',
         failCount: 4,
       })