`vike(app)`

Environment: server

The vike(app) function installs Vike's server middlewares to your server.

See Integration > +server for how to use vike(app).

It installs:

Vike's handler that renders your pages (basically renderPage())
Every +middleware from Vike extensions

Technically, what it does is install the globalContext.middlewares list using the sandwich approach: middlewares (i.e. non-handlers) are applied before user-defined routes while handlers are applied after — so that your routes can read the context set by the middlewares of Vike extensions.

See also: API > +middleware > Order

It uses Universal Middleware under the hood.

Manual integration

If your favorite server framework doesn't have a vike(app) adapter yet, you can manually apply globalContext.middlewares around your routes like this:

// +server.js
// Environment: server
 
import { YourFavoriteServer } from 'your-favorite-server'
import { apply } from '@universal-middleware/your-favorite-server'
import { getGlobalContext } from 'vike'
import assert from 'node:assert'
 
const globalContext = await getGlobalContext()
assert(!globalContext.isClientSide)
const { middlewares } = globalContext
const app = new YourFavoriteServer()
 
// Apply globalContext.middlewares around your routes (the sandwich approach):
 
// The +middleware that aren't handlers first
apply(
  app,
  middlewares.filter((m) => !m.isHandler)
)
 
// Your routes
app.get('/api/me', getMe)
 
// The +middleware that are handlers last (it includes Vike's handler that renders your pages)
apply(
  app,
  middlewares.filter((m) => m.isHandler)
)
 
export default {
  fetch: app.fetch
}

// +server.ts
// Environment: server
 
import { YourFavoriteServer } from 'your-favorite-server'
import { apply } from '@universal-middleware/your-favorite-server'
import { getGlobalContext } from 'vike'
import assert from 'node:assert'
 
const globalContext = await getGlobalContext()
assert(!globalContext.isClientSide)
const { middlewares } = globalContext
const app = new YourFavoriteServer()
 
// Apply globalContext.middlewares around your routes (the sandwich approach):
 
// The +middleware that aren't handlers first
apply(app, middlewares.filter((m) => !m.isHandler))
 
// Your routes
app.get('/api/me', getMe)
 
// The +middleware that are handlers last (it includes Vike's handler that renders your pages)
apply(app, middlewares.filter((m) => m.isHandler))
 
export default {
  fetch: app.fetch,
}

JavaScript

TypeScript

If Universal Middleware adapter doesn't have a @universal-middleware/your-favorite-server adapter yet, you can consider asking your agent to create one (agents are proficient at this).

In development, because globalContext.middlewares is read when your server starts, you must restart your server after a +middleware changes (i.e. you install/remove/update a Vike extension).

Note that vike(app) doesn't need a restart because, in development, it re-reads globalContext.middlewares for every request.

In principle, it's possible to use renderPage() together with manually installing globalContext.middlewares, similar to the approach shown above. But it's cumbersome, and we don't recommend it. (You'd need to remove Vike's handler from globalContext.middlewares, while both renderPage() and globalContext.middlewares require a catch-all route which leads to conflicts.)