Support custom middleware for preview server

[Jinjiang]

Clear and concise description of the problem

I'd like to customize some high-level proxy/mock logic on the preview server. Currently, it only supports cors and proxy configuration, which seems limited to achieve this.

Suggested solution

To better support this, I'd like to add one more Vite-specific hook named configurePreviewServer, which could be run before the preview server is open to access.

The API design and behavior could be similar to configureServer, which accept a server parameter.

Alternative

Just use configureServer, but at the same time, add one more field to ViteDevServer to identify whether server mode is dev or preview. So the plugin author could give different logics in different modes.

Additional context

[michaelhue]

Another use case for this change:

My application relies on SharedArrayBuffer support. For security reasons, two headers need to be sent on every response:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

I'm using a plugin which adds a dev server middleware that send the headers with every response. However, when testing the app using vite preview, the headers are not set because the middleware is not active.

Allowing custom middleware for the preview server would be a great help with testing the application.

[scrapstation]

me too

[robcaldecott]

We've been using CRA with setupProxy.js to mock our OIDC IDP and some common API endpoints when running the app in dev mode. Ideally we'd have access to the underlying express app so we could simple include these. Our current CRA setupProxy.js looks like this:

const oidcMiddleware = require("@keyloop/elements-react-openid-client/dist/middleware");
const commonApiMiddleware = require("@keyloop/elements-react-common-api/dist/middleware");

module.exports = function (app) {
  app.use(oidcMiddleware);
  app.use(commonApiMiddleware);
};

Being able to access that app in the vite config so we can add this custom middleware would be fantastic. We'd struggle to migrate to Vite without this.

[sapphi-red]

#7658 implements configurePreviewServer

[Jinjiang]

An update: before any new versions of Vite, I tried another way to walk-around, which is creating another mock server at the same time in another port (e.g. 8081), then proxy all the paths you mocked in the Vite preview server. And it works so far.

So like:

VitePreviewServer (8080) <---- simple proxy config ----> Your own mock server with full logic (8081)

But anyway, still looking forward to the official better solution.

Thanks.