feat: preserve vite.middlewares connect instance after restarts (#15166)

Author: patak-dev

docs/config/server-options.md

@@ -249,9 +249,7 @@ async function createServer() {
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   })
   // Use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     // Since `appType` is `'custom'`, should serve response here.

docs/guide/api-javascript.md

@@ -67,9 +67,7 @@ const vite = await createServer({
   },
 })
 
-server.use((req, res, next) => {
-  vite.middlewares.handle(req, res, next)
-})
+parentServer.use(vite.middlewares)
 ```
 
 </details>

docs/guide/ssr.md

@@ -89,13 +89,11 @@ async function createServer() {
 
   // Use vite's connect instance as middleware. If you use your own
   // express router (express.Router()), you should use router.use
-  app.use((req, res, next) => {
-    // When the server restarts (for example after the user modifies
-    // vite.config.js), `vite.middlewares` will be reassigned. Calling
-    // `vite.middlewares` inside a wrapper handler ensures that the
-    // latest Vite middlewares are always used.
-    vite.middlewares.handle(req, res, next)
-  })
+  // When the server restarts (for example after the user modifies
+  // vite.config.js), `vite.middlewares` is still going to be the same
+  // reference (with a new internal stack of Vite and plugin-injected
+  // middlewares. The following is valid even after restarts.
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     // serve index.html - we will tackle this next

packages/vite/src/node/server/index.ts

@@ -963,9 +963,16 @@ async function restartServer(server: ViteDevServer) {
     await server.close()
 
     // Assign new server props to existing server instance
+    const middlewares = server.middlewares
     newServer._configServerPort = server._configServerPort
     newServer._currentServerPort = server._currentServerPort
     Object.assign(server, newServer)
+
+    // Keep the same connect instance so app.use(vite.middlewares) works
+    // after a restart in middlewareMode (.route is always '/')
+    middlewares.stack = newServer.middlewares.stack
+    server.middlewares = middlewares
+
     // Rebind internal server variable so functions reference the user server
     newServer._setInternalServer(server)
   }

playground/css-lightningcss-proxy/server.js

@@ -45,9 +45,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     appType: 'custom',
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res, next) => {
     try {

playground/json/server.js

@@ -37,9 +37,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     },
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     try {

playground/optimize-missing-deps/server.js

@@ -26,9 +26,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     },
     appType: 'custom',
   })
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     try {

playground/ssr-conditions/server.js

@@ -35,9 +35,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     appType: 'custom',
   })
 
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     try {

playground/ssr-deps/server.js

@@ -84,9 +84,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     ],
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     try {

playground/ssr-html/server.js

@@ -66,9 +66,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     ],
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res, next) => {
     try {

playground/ssr-noexternal/server.js

@@ -44,9 +44,7 @@ export async function createServer(
       },
       appType: 'custom',
     })
-    app.use((req, res, next) => {
-      vite.middlewares.handle(req, res, next)
-    })
+    app.use(vite.middlewares)
   }
 
   app.use('*', async (req, res) => {

playground/ssr-pug/server.js

@@ -45,9 +45,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     appType: 'custom',
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     try {

playground/ssr/server.js

@@ -39,9 +39,7 @@ export async function createServer(
     customLogger,
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res, next) => {
     try {