chore: add dev-servers as deps to server to be included in the binary

circle.yml

@@ -29,6 +29,7 @@ mainBuildFilters: &mainBuildFilters
       only:
         - develop
         - 10.0-release
+        - zachw/add-dev-server-deps
 
 # uncomment & add to the branch conditions below to disable the main linux
 # flow if we don't want to test it for a certain branch
@@ -46,6 +47,7 @@ macWorkflowFilters: &mac-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ '10.0-release', << pipeline.git.branch >> ]
+    - equal: [ zachw/add-dev-server-deps, << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -55,7 +57,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ '10.0-release', << pipeline.git.branch >> ]
-    - equal: [ 'unify-1036-windows-test-projects', << pipeline.git.branch >> ]
+    - equal: [ zachw/add-dev-server-deps, << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -1725,7 +1727,7 @@ jobs:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "unify-1036-windows-test-projects" && "$CIRCLE_BRANCH" != "10.0-release" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "zachw/add-dev-server-deps" && "$CIRCLE_BRANCH" != "10.0-release" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi

npm/vite-dev-server-fresh/src/devServer.ts

@@ -1,6 +1,6 @@
 import debugFn from 'debug'
 import getPort from 'get-port'
-import { createServer as viteCreateServer } from 'vite'
+import { getVite, Vite } from './getVite'
 import { createViteDevServerConfig } from './resolveConfig'
 
 const debug = debugFn('cypress:vite-dev-server:devServer')
@@ -17,8 +17,11 @@ export type ViteDevServerConfig = {
 }
 
 export async function devServer (config: ViteDevServerConfig): Promise<Cypress.ResolvedDevServerConfig> {
+  // This has to be the first thing we do as we need to source vite from their project's dependencies
+  const vite = getVite(config)
+
   debug('Creating Vite Server')
-  const server = await devServer.create(config) as import('vite').ViteDevServer
+  const server = await devServer.create(config, vite)
 
   debug('Vite server created')
   const port = await getPort({ port: 3000 })
@@ -36,11 +39,11 @@ export async function devServer (config: ViteDevServerConfig): Promise<Cypress.R
   }
 }
 
-devServer.create = async function createDevServer (devServerConfig: ViteDevServerConfig) {
+devServer.create = async function createDevServer (devServerConfig: ViteDevServerConfig, vite: Vite) {
   try {
-    const config = await createViteDevServerConfig(devServerConfig)
+    const config = await createViteDevServerConfig(devServerConfig, vite)
 
-    return await viteCreateServer(config)
+    return await vite.createServer(config)
   } catch (err) {
     if (err instanceof Error) {
       throw err

npm/vite-dev-server-fresh/src/getVite.ts

@@ -0,0 +1,21 @@
+import debugFn from 'debug'
+import type { ViteDevServerConfig } from './devServer'
+
+const debug = debugFn('cypress:vite-dev-server:getVite')
+
+export type Vite = typeof import('vite')
+
+// "vite-dev-server" is bundled in the binary, so we need to require.resolve "vite"
+// from root of the active project since we don't bundle vite internally but rather
+// use the version the user has installed
+export function getVite (config: ViteDevServerConfig): Vite {
+  try {
+    const viteImportPath = require.resolve('vite', { paths: [config.cypressConfig.projectRoot] })
+
+    debug('resolved viteImportPath as %s', viteImportPath)
+
+    return require(viteImportPath)
+  } catch (err) {
+    throw new Error(`Could not find "vite" in your project's dependencies. Please install "vite" to fix this error.\n\n${err}`)
+  }
+}

npm/vite-dev-server-fresh/src/plugins/cypress.ts

@@ -1,7 +1,7 @@
 import debugFn from 'debug'
 import { resolve } from 'pathe'
 import type { ModuleNode, Plugin, ViteDevServer } from 'vite'
-import { normalizePath } from 'vite'
+import type { Vite } from '../getVite'
 import fs from 'fs'
 
 import type { ViteDevServerConfig } from '../devServer'
@@ -26,6 +26,7 @@ function getSpecsPathsSet (specs: Spec[]) {
 
 export const Cypress = (
   options: ViteDevServerConfig,
+  vite: Vite,
 ): Plugin => {
   let base = '/'
 
@@ -82,7 +83,7 @@ export const Cypress = (
       debug('handleHotUpdate - file', file)
 
       // If the user provided IndexHtml is changed, do a full-reload
-      if (normalizePath(file) === resolve(projectRoot, indexHtmlFile)) {
+      if (vite.normalizePath(file) === resolve(projectRoot, indexHtmlFile)) {
         server.ws.send({
           type: 'full-reload',
         })

npm/vite-dev-server-fresh/src/plugins/inspect.ts

@@ -1,9 +1,10 @@
 import debugFn from 'debug'
 import type { PluginOption } from 'vite'
+import type { ViteDevServerConfig } from '../devServer'
 
 const debug = debugFn('cypress:vite-dev-server:plugins:inspect')
 
-export const CypressInspect = async (): Promise<PluginOption | null> => {
+export const CypressInspect = (config: ViteDevServerConfig): PluginOption | null => {
   if (!process.env.CYPRESS_INTERNAL_VITE_INSPECT) {
     debug('skipping vite inspect because CYPRESS_INTERNAL_VITE_INSPECT is not set')
 
@@ -13,7 +14,9 @@ export const CypressInspect = async (): Promise<PluginOption | null> => {
   let Inspect
 
   try {
-    Inspect = (await import('vite-plugin-inspect')).default
+    const inspectPluginPath = require.resolve('vite-plugin-inspect', { paths: [config.cypressConfig.projectRoot] })
+
+    Inspect = require(inspectPluginPath).default
     debug('inspect was found', Inspect)
   } catch (err) {
     debug(`Tried to import the inspect plugin 'vite-plugin-inspect'. It's an optional peerDependency so install it if you'd like.`)

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

@@ -6,16 +6,17 @@
 import debugFn from 'debug'
 import { importModule } from 'local-pkg'
 import { relative, resolve } from 'pathe'
-import { InlineConfig, mergeConfig } from 'vite'
+import type { InlineConfig } from 'vite'
 import path from 'path'
 
 import { configFiles } from './constants'
 import type { ViteDevServerConfig } from './devServer'
 import { Cypress, CypressInspect } from './plugins/index'
+import type { Vite } from './getVite'
 
 const debug = debugFn('cypress:vite-dev-server:resolve-config')
 
-export const createViteDevServerConfig = async (config: ViteDevServerConfig) => {
+export const createViteDevServerConfig = async (config: ViteDevServerConfig, vite: Vite) => {
   const { specs, cypressConfig, viteConfig: viteOverrides = {} } = config
   const root = cypressConfig.projectRoot
   const { default: findUp } = await importModule('find-up')
@@ -60,12 +61,12 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig) =>
       },
     },
     plugins: [
-      Cypress(config),
-      await CypressInspect(),
+      Cypress(config, vite),
+      CypressInspect(config),
     ],
   }
 
-  const finalConfig = mergeConfig(viteBaseConfig, viteOverrides as Record<string, any>)
+  const finalConfig = vite.mergeConfig(viteBaseConfig, viteOverrides as Record<string, any>)
 
   debug('The resolved server config is', JSON.stringify(finalConfig, null, 2))
 

npm/webpack-dev-server-fresh/package.json

@@ -5,12 +5,12 @@
   "private": true,
   "main": "dist/index.js",
   "scripts": {
+    "prebuild": "rimraf dist",
     "build": "tsc || echo 'built, with type errors'",
-    "build-prod": "tsc || echo 'built, with type errors'",
+    "build-prod": "yarn build",
     "check-ts": "tsc --noEmit",
     "dev": "tsc --watch",
     "clean": "rimraf dist",
-    "postinstall": "yarn clean && yarn build",
     "cypress:run": "yarn cypress:run-cypress-in-cypress node ../../scripts/cypress run --project . --browser chrome",
     "cypress:run-cypress-in-cypress": "cross-env HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS=http://localhost:4455 CYPRESS_REMOTE_DEBUGGING_PORT=6666 TZ=America/New_York",
     "cypress:open": "yarn cypress:run-cypress-in-cypress gulp open --project .",
@@ -38,5 +38,8 @@
     "webpack": "npm:webpack@^5",
     "webpack-4": "npm:webpack@^4",
     "webpack-dev-server-3": "npm:webpack-dev-server@^3"
-  }
+  },
+  "files": [
+    "dist"
+  ]
 }

packages/server/package.json

@@ -28,7 +28,9 @@
     "@cypress/mocha-teamcity-reporter": "1.0.0",
     "@cypress/request": "2.88.10",
     "@cypress/request-promise": "4.2.6",
+    "@cypress/vite-dev-server-fresh": "0.0.0-development",
     "@cypress/webpack-batteries-included-preprocessor": "0.0.0-development",
+    "@cypress/webpack-dev-server-fresh": "0.0.0-development",
     "@cypress/webpack-preprocessor": "0.0.0-development",
     "@ffmpeg-installer/ffmpeg": "1.1.0",
     "@packages/icons": "0.0.0-development",