fix: make sure the vite server starts on a new port

cypress-io · Apr 1, 2021 · 57e2988 · 57e2988
1 parent 8d06ea8
commit 57e2988
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 27 deletions.
diff --git a/npm/vite-dev-server/package.json b/npm/vite-dev-server/package.json
@@ -12,7 +12,8 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "debug": "4.3.2"
+    "debug": "^4.3.2",
+    "get-port": "^5.1.1"
   },
   "devDependencies": {
     "@cypress/react": "0.0.0-development",
@@ -27,7 +28,7 @@
     "vue": "3.0.9"
   },
   "peerDependencies": {
-    "vite": ">= 2"
+    "vite": ">= 2.1.3"
   },
   "files": [
     "dist",

diff --git a/npm/vite-dev-server/src/index.ts b/npm/vite-dev-server/src/index.ts
@@ -1,23 +1,9 @@
-import { EventEmitter } from 'events'
 import { debug as debugFn } from 'debug'
-import { start as createDevServer } from './startServer'
-import { UserConfig } from 'vite'
 import { Server } from 'http'
+import { start as createDevServer, StartDevServer } from './startServer'
 const debug = debugFn('cypress:vite-dev-server:vite')
 
-interface Options {
-  specs: any[] // Cypress.Cypress['spec'][] // Why isn't this working? It works for webpack-dev-server
-  config: Record<string, string>
-  devServerEvents: EventEmitter
-  [key: string]: unknown
-}
-
-export interface StartDevServer {
-  /* this is the Cypress options object */
-  options: Options
-  /* support passing a path to the user's webpack config */
-  viteConfig?: UserConfig // TODO: implement taking in the user's vite configuration. Right now we don't
-}
+export { StartDevServer }
 
 export interface ResolvedDevServerConfig {
   port: number

diff --git a/npm/vite-dev-server/src/makeCypressPlugin.ts b/npm/vite-dev-server/src/makeCypressPlugin.ts
@@ -1,4 +1,3 @@
-import { EventEmitter } from 'events'
 import { resolve } from 'path'
 import { readFile } from 'fs'
 import { promisify } from 'util'

diff --git a/npm/vite-dev-server/src/startServer.ts b/npm/vite-dev-server/src/startServer.ts
@@ -1,20 +1,34 @@
 import Debug from 'debug'
-import { StartDevServer } from '.'
-import { createServer, ViteDevServer, InlineConfig } from 'vite'
+import { createServer, ViteDevServer, InlineConfig, UserConfig } from 'vite'
 import { dirname, resolve } from 'path'
+import getPort from 'get-port'
 import { makeCypressPlugin } from './makeCypressPlugin'
 
 const debug = Debug('cypress:vite-dev-server:start')
 
-const resolveServerConfig = ({ viteConfig, options }: StartDevServer) => {
+interface Options {
+  specs: Cypress.Cypress['spec'][]
+  config: Record<string, string>
+  devServerEvents: EventEmitter
+  [key: string]: unknown
+}
+
+export interface StartDevServer {
+  /* this is the Cypress options object */
+  options: Options
+  /* support passing a path to the user's webpack config */
+  viteConfig?: UserConfig // TODO: implement taking in the user's vite configuration. Right now we don't
+}
+
+const resolveServerConfig = async ({ viteConfig, options }: StartDevServer): Promise<InlineConfig> => {
   const { projectRoot, supportFile } = options.config
 
-  const requiredOptions = {
+  const requiredOptions: InlineConfig = {
     base: '/__cypress/src/',
     root: projectRoot,
   }
 
-  const finalConfig = { ...viteConfig, ...requiredOptions }
+  const finalConfig: InlineConfig = { ...viteConfig, ...requiredOptions }
 
   finalConfig.plugins = [...(viteConfig.plugins || []), makeCypressPlugin(projectRoot, supportFile, options.devServerEvents)]
 
@@ -27,6 +41,10 @@ const resolveServerConfig = ({ viteConfig, options }: StartDevServer) => {
     '@vue/compiler-core': resolve(dirname(require.resolve('@vue/compiler-core')), 'dist', 'compiler-core.cjs.js'),
   },
 
+  finalConfig.server = finalConfig.server || {}
+
+  finalConfig.server.port = await getPort({ port: 3000, host: 'localhost' }),
+
   debug(`the resolved server config is ${JSON.stringify(finalConfig, null, 2)}`)
 
   return finalConfig
@@ -39,7 +57,7 @@ export async function start (devServerOptions: StartDevServer): Promise<ViteDevS
   }
 
   debug('starting vite dev server')
-  const resolvedConfig = resolveServerConfig(devServerOptions)
+  const resolvedConfig = await resolveServerConfig(devServerOptions)
 
   return createServer(resolvedConfig)
 }
diff --git a/yarn.lock b/yarn.lock
@@ -13363,7 +13363,7 @@ [email protected]:
   dependencies:
     ms "2.1.2"
 
-[email protected]:
+[email protected], debug@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
   integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
@@ -17465,7 +17465,7 @@ get-pkg-repo@^1.0.0:
     parse-github-repo-url "^1.3.0"
     through2 "^2.0.0"
 
-[email protected]:
+[email protected], get-port@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193"
   integrity sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==