While working on apps that will be deployed to Vercel, I have run into this situation several times, where I wanted to be able to start my api middleware together with the Vite dev server for local development. Normally you would run the api middleware separately using an express server for example and proxy requests from your Vite app to that server. However, since the Vite dev server can use express middleware, I wondered if it would be possible to eliminate the need to run a separate express server:

1import express from 'express'
2import { defineConfig, ViteDevServer } from 'vite'
3
4const app = express()
5
6app.get('/api', (req, res) => {
7  res.send('Hello world!').end()
8})
9
10function expressPlugin() {
11  return {
12    name: 'express-plugin',
13    configureServer(server: ViteDevServer) {
14      server.middlewares.use(app)
15    }
16  }
17}
18
19export default defineConfig({
20  plugins: [expressPlugin()]
21})
22

By default, the Vite dev server won't pass on any requests to our middleware, so the code above will not work. However, with a little trick using the proxy config, we can tell the dev server to let a certain request be handled elsewhere, or in this case, by our middleware:

1import { ProxyOptions, ViteDevServer } from 'vite'
2
3const proxy: Record<string, string | ProxyOptions> = {
4  '/api': {} // proxy our /api route to nowhere
5}
6
7function expressPlugin() {
8  return {
9    name: 'express-plugin',
10    config() {
11      return {
12        server: { proxy },
13        preview: { proxy }
14      }
15    },
16    configureServer(server: ViteDevServer) {
17      server.middlewares.use(app)
18    }
19  }
20}
21

Now if we run our dev server and go to the /api route, it will display our Hello world! response.