Merge pull request #15616 from cypress-io/refactor/use-public-paths

npm/react/cypress/component/advanced/lazy-loaded-suspense/LazyComponent.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react'
 
-const LazyDog = React.lazy(() => import(/* webpackChunkName: "Dog" */ './Dog'))
+const LazyDog = React.lazy(() => {
+  return import(/* webpackChunkName: "Dog" */ './Dog')
+  .then((comp) => new Promise((resolve) => setTimeout(() => resolve(comp), 10)))
+})
 
 interface LazyComponentProps {}
 

npm/rollup-dev-server/src/index.ts

@@ -9,6 +9,7 @@ interface Options {
   specs: Cypress.Cypress['spec'][] // Why isn't this working? It works for webpack-dev-server
   config: Record<string, string>
   devServerEvents: EventEmitter
+  devServerPublicPathRoute: string
   [key: string]: unknown
 }
 

npm/rollup-dev-server/src/makeHtmlPlugin.ts

@@ -15,16 +15,16 @@ const readIndexHtml = () => readFileSync(indexHtmlPath).toString()
  * Example usage:
  * formatSpecName('/cypress/component/foo.spec.tsx') //=> 'foo.spec.js'
  */
-function formatSpecName (filename: string) {
+function formatSpecName (publicPath: string, filename: string) {
   const split = filename.split('/')
   const name = split[split.length - 1]
   const pos = name.lastIndexOf('.')
   const newName = `${name.substr(0, pos < 0 ? name.length : pos)}.js`
 
-  return `/${newName}`
+  return `${publicPath}/${newName}`
 }
 
-function handleIndex (indexHtml: string, projectRoot: string, supportFilePath: string, cypressSpecPath: string) {
+function handleIndex (indexHtml: string, publicPath: string, supportFilePath: string, cypressSpecPath: string) {
   const specPath = `/${cypressSpecPath}`
 
   console.log(supportFilePath)
@@ -32,7 +32,7 @@ function handleIndex (indexHtml: string, projectRoot: string, supportFilePath: s
 
   return render(indexHtml, {
     supportFile,
-    specPath: formatSpecName(specPath),
+    specPath: formatSpecName(publicPath, specPath),
   })
 }
 
@@ -40,13 +40,14 @@ export const makeHtmlPlugin = (
   projectRoot: string,
   supportFilePath: string,
   server: Express,
+  publicPath: string,
 ) => {
   const indexHtml = readIndexHtml()
 
-  server.use('/index.html', (req, res) => {
+  server.use(`${publicPath}/index.html`, (req, res) => {
     const html = handleIndex(
       indexHtml,
-      projectRoot,
+      publicPath,
       supportFilePath,
       req.headers.__cypress_spec_path as string,
     )

npm/rollup-dev-server/src/startServer.ts

@@ -41,6 +41,7 @@ interface NollupDevServer {
 }
 
 export async function start (devServerOptions: StartDevServer): Promise<NollupDevServer> {
+  console.log('OBject', Object.keys(devServerOptions.options))
   const rollupConfigObj = typeof devServerOptions.rollupConfig === 'string'
     ? await loadConfigFile(devServerOptions.rollupConfig).then((configResult) => configResult.options)
     : devServerOptions.rollupConfig
@@ -58,25 +59,28 @@ export async function start (devServerOptions: StartDevServer): Promise<NollupDe
     }
   })
 
+  const { devServerPublicPathRoute, projectRoot, supportFile } = devServerOptions.options.config
+
   const app = express()
   const server = http.createServer(app)
-  const contentBase = resolve(__dirname, devServerOptions.options.config.projectRoot)
+  const contentBase = resolve(__dirname, projectRoot)
   /* random port between 3000 and 23000 */
   const port = parseInt(((Math.random() * 20000) + 3000).toFixed(0), 10)
 
   const nollup = NollupDevMiddleware(app, config, {
     contentBase,
     port,
-    publicPath: '/',
+    publicPath: devServerPublicPathRoute,
     hot: true,
   }, server)
 
   app.use(nollup)
 
   makeHtmlPlugin(
-    devServerOptions.options.config.projectRoot,
-    devServerOptions.options.config.supportFile,
+    projectRoot,
+    supportFile,
     app,
+    devServerPublicPathRoute,
   )
 
   return {

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

@@ -8,8 +8,8 @@ const pluginName = 'cypress-transform-html'
 const indexHtmlPath = resolve(__dirname, '../index-template.html')
 const readIndexHtml = () => readFileSync(indexHtmlPath).toString()
 
-function handleIndex (indexHtml, projectRoot, supportFilePath, req, res) {
-  const specPath = `/${req.headers.__cypress_spec_path}`
+function handleIndex (indexHtml, projectRoot, publicPath, supportFilePath, req, res) {
+  const specPath = `${publicPath}/${req.headers.__cypress_spec_path}`
   const supportPath = supportFilePath ? `/${relative(projectRoot, supportFilePath)}` : null
 
   res.end(render(indexHtml, { supportPath, specPath }))
@@ -18,6 +18,7 @@ function handleIndex (indexHtml, projectRoot, supportFilePath, req, res) {
 export const makeCypressPlugin = (
   projectRoot: string,
   supportFilePath: string,
+  publicPath: string,
   devServerEvents: EventEmitter,
 ): Plugin => {
   return {
@@ -26,7 +27,7 @@ export const makeCypressPlugin = (
     configureServer: (server: ViteDevServer) => {
       const indexHtml = readIndexHtml()
 
-      server.middlewares.use('/index.html', (req, res) => handleIndex(indexHtml, projectRoot, supportFilePath, req, res))
+      server.middlewares.use(`${publicPath}/index.html`, (req, res) => handleIndex(indexHtml, projectRoot, publicPath, supportFilePath, req, res))
     },
     handleHotUpdate: () => {
       devServerEvents.emit('dev-server:compile:success')

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

@@ -1,27 +0,0 @@
-import { relative, resolve } from 'path'
-import { readFileSync } from 'fs'
-import { Plugin, ViteDevServer } from 'vite'
-import { render } from 'mustache'
-
-const pluginName = 'cypress-transform-html'
-const indexHtmlPath = resolve(__dirname, '../index-template.html')
-const readIndexHtml = () => readFileSync(indexHtmlPath).toString()
-
-function handleIndex (indexHtml, projectRoot, supportFilePath, req, res) {
-  const specPath = `/${req.headers.__cypress_spec_path}`
-  const supportPath = supportFilePath ? `/${relative(projectRoot, supportFilePath)}` : null
-
-  res.end(render(indexHtml, { supportPath, specPath }))
-}
-
-export const makeHtmlPlugin = (projectRoot: string, supportFilePath: string): Plugin => {
-  return {
-    name: pluginName,
-    enforce: 'pre',
-    configureServer: (server: ViteDevServer) => {
-      const indexHtml = readIndexHtml()
-
-      server.middlewares.use('/index.html', (req, res) => handleIndex(indexHtml, projectRoot, supportFilePath, req, res))
-    },
-  }
-}

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

@@ -8,11 +8,11 @@ import { EventEmitter } from 'events'
 const debug = Debug('cypress:vite-dev-server:start')
 
 // TODO: Pull in types for Options so we can infer these
-const serverConfig = (projectRoot: string, supportFilePath: string, devServerEvents: EventEmitter): InlineConfig => {
+const serverConfig = (projectRoot: string, supportFilePath: string, publicPath: string, devServerEvents: EventEmitter): InlineConfig => {
   return {
     root: resolve(__dirname, projectRoot),
     base: '/__cypress/src/',
-    plugins: [makeCypressPlugin(projectRoot, supportFilePath, devServerEvents)],
+    plugins: [makeCypressPlugin(projectRoot, supportFilePath, publicPath, devServerEvents)],
     server: {
       port: 0,
     },
@@ -23,6 +23,7 @@ const resolveServerConfig = ({ viteConfig, options }: StartDevServer) => {
   const defaultServerConfig = serverConfig(
     options.config.projectRoot,
     options.config.supportFile,
+    options.config.devServerPublicPathRoute,
     options.devServerEvents,
   )
 

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

@@ -18,7 +18,7 @@ export interface UserWebpackDevServerOptions {
 }
 
 interface MakeWebpackConfigOptions extends CypressCTOptionsPluginOptions, UserWebpackDevServerOptions {
-  webpackDevServerPublicPathRoute: string
+  devServerPublicPathRoute: string
   isOpenMode: boolean
 }
 
@@ -42,7 +42,7 @@ function getLazyCompilationWebpackConfig (options: MakeWebpackConfigOptions): we
 }
 
 export async function makeWebpackConfig (userWebpackConfig: webpack.Configuration, options: MakeWebpackConfigOptions): Promise<webpack.Configuration> {
-  const { projectRoot, webpackDevServerPublicPathRoute, files, supportFile, devServerEvents } = options
+  const { projectRoot, devServerPublicPathRoute, files, supportFile, devServerEvents } = options
 
   debug(`User passed in webpack config with values %o`, userWebpackConfig)
 
@@ -52,7 +52,7 @@ export async function makeWebpackConfig (userWebpackConfig: webpack.Configuratio
 
   const entry = path.resolve(__dirname, './browser.js')
 
-  const publicPath = mergePublicPath(webpackDevServerPublicPathRoute, userWebpackConfig?.output?.publicPath)
+  const publicPath = mergePublicPath(devServerPublicPathRoute, userWebpackConfig?.output?.publicPath)
 
   const dynamicWebpackConfig = {
     output: {

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

@@ -11,13 +11,13 @@ export async function start ({ webpackConfig: userWebpackConfig, options, ...use
     debug('User did not pass in any webpack configuration')
   }
 
-  // @ts-expect-error ?? webpackDevServerPublicPathRoute is not a valid option of Cypress.Config
-  const { projectRoot, webpackDevServerPublicPathRoute, isTextTerminal } = options.config
+  // @ts-expect-error ?? devServerPublicPathRoute is not a valid option of Cypress.Config
+  const { projectRoot, devServerPublicPathRoute, isTextTerminal } = options.config
 
   const webpackConfig = await makeWebpackConfig(userWebpackConfig || {}, {
     files: options.specs,
     projectRoot,
-    webpackDevServerPublicPathRoute,
+    devServerPublicPathRoute,
     devServerEvents: options.devServerEvents,
     supportFile: options.config.supportFile as string,
     isOpenMode: !isTextTerminal,
@@ -57,6 +57,7 @@ export async function start ({ webpackConfig: userWebpackConfig, options, ...use
     ...userWebpackConfig.devServer,
     hot: false,
     inline: false,
+    publicPath: devServerPublicPathRoute,
   }
 
   return new WebpackDevServer(compiler, webpackDevServerConfig)

npm/webpack-dev-server/test/e2e.spec.ts

@@ -53,7 +53,7 @@ const config = {
   projectRoot: root,
   supportFile: '',
   isTextTerminal: true,
-  webpackDevServerPublicPathRoute: root,
+  devServerPublicPathRoute: root,
 } as any as Cypress.ResolvedConfigOptions & Cypress.RuntimeConfigOptions
 
 describe('#startDevServer', () => {

packages/server-ct/src/routes-ct.ts

@@ -44,7 +44,7 @@ export const createRoutes = ({
     // to properly intercept and serve assets from the correct src root
     // TODO: define a contract for dev-server plugins to configure this behavior
     req.headers.__cypress_spec_path = req.params[0]
-    req.url = '/index.html'
+    req.url = `${config.devServerPublicPathRoute}/index.html`
 
     // user the node proxy here instead of the network proxy
     // to avoid the user accidentally intercepting and modifying
@@ -60,11 +60,7 @@ export const createRoutes = ({
 
   // user app code + spec code
   // default mounted to /__cypress/src/*
-  app.get(`${config.webpackDevServerPublicPathRoute}*`, (req, res) => {
-    // strip out the webpackDevServerPublicPath from the URL
-    // and forward the remaining params
-    req.url = `/${req.params[0]}`
-
+  app.get(`${config.devServerPublicPathRoute}*`, (req, res) => {
     // user the node proxy here instead of the network proxy
     // to avoid the user accidentally intercepting and modifying
     // their own app.js files + spec.js files

packages/server/lib/config_options.ts

@@ -220,7 +220,7 @@ export const options = [
     defaultValue: '/__socket.io',
     isInternal: true,
   }, {
-    name: 'webpackDevServerPublicPathRoute',
+    name: 'devServerPublicPathRoute',
     defaultValue: '/__cypress/src',
     isInternal: true,
   }, {