Custom Dev Server

[dwhieb]

I'm trying to create a simple custom dev server for component testing, because my app doesn't use a framework. The devServer config below works great, and my test is listed in the test runner, but when I try to run the test, I receive a 404 response in the app. How can I get my custom dev server to point to the correct folder for static files (my test/ folder) so that it can find my HTML skeleton for component testing?

Cypress Config

import { defineConfig } from 'cypress'
import handler          from 'serve-handler'
import http             from 'http'

export default defineConfig({
  component: {
    async devServer() {

      const port   = 8080
      const server = http.createServer(handler)

      const startServer = () => new Promise((resolve, reject) => {
        server.on(`error`, reject)
        server.listen(port, resolve)
      })

      const closeServer = () => new Promise((resolve, reject) => {
        server.on(`error`, reject)
        server.close(resolve)
      })

      await startServer()

      return {
        close() { return closeServer() },
        port,
      }

    },
    indexHtmlFile: `index.html`,
    specPattern:   `pages/**/*.component.js`,
    supportFile:   `test/component.js`,
  },
})

Folder Structure

test/
  ⌊ cypress.config.js # Cypress config
  ⌊ index.html        # HTML skeleton for component tests

Result