vite.config.js

import { fileURLToPath } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

/**
 * Serve api/*.js through the dev server.
 *
 * Production runs those files as Vercel functions. Without this the routes only
 * exist once deployed, so `npm run dev` would 404 on every request and the two
 * environments would need separate request paths. Mounting the same handlers
 * here means there is one implementation to keep correct.
 */
function devApiRoutes(env) {
  return {
    name: 'dev-api-routes',
    configureServer(server) {
      // The functions read process.env, as they will in production. In dev the
      // key comes from .env, accepting the older VITE_-prefixed name so an
      // existing local setup keeps working.
      process.env.OPENAI_API_KEY ??= env.OPENAI_API_KEY || env.VITE_OPENAI_API_KEY

      server.middlewares.use(async (req, res, next) => {
        if (!req.url?.startsWith('/api/')) return next()

        const url = new URL(req.url, 'http://localhost')
        const route = url.pathname.replace(/^\/api\//, '').replace(/\.js$/, '')

        let handler
        try {
          const mod = await server.ssrLoadModule(`/api/${route}.js`)
          handler = mod.default
        } catch {
          return next()
        }

        // Minimal Express-shaped shim over the raw Node response, matching the
        // subset of the API the handlers actually use.
        req.query = Object.fromEntries(url.searchParams)
        if (req.method === 'POST') {
          const chunks = []
          for await (const chunk of req) chunks.push(chunk)
          const raw = Buffer.concat(chunks).toString('utf8')
          try {
            req.body = raw.length > 0 ? JSON.parse(raw) : {}
          } catch {
            req.body = null
          }
        }

        res.status = (code) => {
          res.statusCode = code
          return res
        }
        res.json = (value) => {
          res.setHeader('Content-Type', 'application/json')
          res.end(JSON.stringify(value))
          return res
        }
        res.send = (value) => {
          res.end(value)
          return res
        }

        try {
          await handler(req, res)
        } catch (err) {
          res.statusCode = 500
          res.setHeader('Content-Type', 'application/json')
          res.end(JSON.stringify({ error: err.message }))
        }
      })
    },
  }
}

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [react(), tailwindcss(), devApiRoutes(env)],
    build: {
      // Vite 8 bundles with rolldown. `rollupOptions` is accepted without
      // complaint and then ignored, so the second page silently never builds.
      rolldownOptions: {
        input: {
          main: fileURLToPath(new URL('./index.html', import.meta.url)),
          benchmark: fileURLToPath(new URL('./benchmark.html', import.meta.url)),
        },
      },
    },
  }
})