`createDevMiddleware()`

Create Vite's development middleware (for HMR, lazy transpiling, static assets, ...).

You usually don't need to call createDevMiddleware() yourself, because the development middleware is automatically created if you:

Use +server.js: it's created and installed automatically.

Use +serverEntry.js: it's created automatically — you install and access it with globalContext.devMiddleware.

Fully pre-render your app: Vike's built-in development server automatically creates and installs it.

You usually only need to call createDevMiddleware() if you run the server yourself (e.g. $ node server/index.js instead of +server.js/+serverEntry.js), see: renderPage() > Without +serverEntry.js.

import { createDevMiddleware } from 'vike/server'
 
const {
  devMiddleware, // The development middleware
  viteConfig, // Resolved Vite configuration
  viteServer // Vite's development server
} = await createDevMiddleware({
  root: './path/to/app', // (optional, but recommended)
  viteConfig: {
    // Some Vite configuration (optional)
  }
})

Vite types:

InlineConfig types the viteConfig option.
ResolvedConfig types the viteConfig return value.
createDevMiddleware() wraps Vite's createServer().

Example

See: renderPage() > Without +serverEntry.js.

Connect to Web `Request`/`Response`

devMiddleware is a Connect middleware: it uses Node.js's req/res. To use it with a server based on Web Standards (Request/Response), such as Hono, Bun.serve() or Deno.serve(), you need a bridge, for example srvx's fetchNodeHandler():

import { createDevMiddleware } from 'vike/server'
import { fetchNodeHandler } from 'srvx/node'
 
const { devMiddleware } = await createDevMiddleware()
 
async function handleDevRequest(request) {
  let handled = true
  const response = await fetchNodeHandler(
    (req, res, next) =>
      devMiddleware(req, res, () => {
        handled = false
        next?.()
      }),
    request
  )
  return handled ? response : undefined
}

import { createDevMiddleware } from 'vike/server'
import { fetchNodeHandler } from 'srvx/node'
import type { IncomingMessage, ServerResponse } from 'node:http'
 
const { devMiddleware } = await createDevMiddleware()
 
async function handleDevRequest(request: Request): Promise<Response | undefined> {
  let handled = true
  const response = await fetchNodeHandler(
    (req: IncomingMessage, res: ServerResponse, next?: () => void) =>
      devMiddleware(req, res, () => {
        handled = false
        next?.()
      }),
    request
  )
  return handled ? response : undefined
}

JavaScript

TypeScript

Vite wants to move away from Connect, see vitejs/ecosystem#16.

createDevMiddleware()

Example

Connect to Web Request/Response

See also

`createDevMiddleware()`

Connect to Web `Request`/`Response`