Server

To integrate Vike with your server we recommend using vike-server which comes with many benefits such as:

Out-of-the-box support for popular servers (Express, Hono, Hattip, Elysia, etc.)
Out-of-the-box support for popular deployments (Cloudflare, Vercel, Netlify, etc.)
HMR

Version history: CHANGELOG.md
Examples: examples/
Source code: GitHub > vikejs/vike-server

This page contains the entire vike-server documentation.

Alternatively, instead of using a server, you can pre-render your pages and deploy to a static host.

If you want more control over server integration, see Integration > Integration (more) > Server (manual integration) instead.

Add `vike-server` to an existing Vike app

To add vike-server to an existing Vike app: install the vike-server npm package (e.g. $ npm install vike-server) then extend your existing +config.js file (or create one) with vike-server:

// +config.js
 
import vikeServer from 'vike-server/config'
 
export const config = {
  extends: [vikeServer], 
  // Points to your server entry
  server: 'server/index.js'
}

Update your production script in package.json:

// package.json
 
"scripts": {
  "dev": "vike dev",
  "build": "vike build",
  "prod": "NODE_ENV=production node dist/server/index.js"
}

Create (or update) your server entry:

Express.js
Hono
Fastify
H3
Elysia

// server/index.js
 
import express from 'express'
import { apply } from 'vike-server/express'
import { serve } from 'vike-server/express/serve'
 
function startServer() {
  const app = express()
  apply(app)
  return serve(app, { port: 3000 })
}
 
export default startServer()

Where:

apply() installs the middleware of Vike and Vike extensions.
serve() attaches your server to Node.js, Cloudflare, Netlify, Vercel, Deno, Bun, ...
- The port option is only used when running on non-serverless environments.
- All other options are passed down as-is to the target environment.
serve() enables you to define a single server entry while being able to target multiple environments (e.g. Node.js and Cloudflare have different server attachment styles).

Note that:

Vike is automatically added to your server — no need to manually integrate renderPage().
Some Vike extensions may also automatically add server middlewares.
Static files are automatically served.

Deployment

In production run $ NODE_ENV=production node dist/server/index.js (or Bun/Deno).

We're currently working on out-of-the-box support for Cloudflare and Vercel (ETA the next couple of weeks). In the meantime, see:

Deploy > Vercel

Deploy > Cloudflare Pages

Deploy > Cloudflare Workers

Custom `pageContext`

To define custom pageContext properties:

apply(app, {
  pageContext(runtime) {
    return {
      user: runtime.req.user
    }
  }
})

The runtime object is also available at pageContext.runtime. Thus, the pageContext function above isn't usually need: you can simply use pageContext.runtime.req.user instead, e.g. with usePageContext().

The runtime object is a RuntimeAdapter (vike-server uses universal-middleware under the hood).

Standalone

With standalone: true, the build output directory (dist/) contains everything needed for deployment. This means that, in production, only the dist/ directory is required (you can remove node_modules/ and skip $ npm install).

⚠️
This feature is experimental and may break upon any version update.

If the production code built with standalone: true fails to run with errors like ENOENT: no such file or directory, then disable standalone mode or replace the npm package throwing the error with another npm package. (The issue is that some npm package have dependencies that aren't explicit and, consequently, cannot be statically analyzed and cannot be included in the standalone bundle.)

// +config.js
 
import vikeServer from 'vike-server/config'
 
export const config = {
  // ...
  extends: [vikeServer],
  server: {
    entry: 'server/index.js',
    standalone: true
  }
}

Options:

export const config = {
  // ...
  extends: [vikeServer],
  server: {
    entry: 'server/index.js',
    standalone: {
      esbuild: {
        minify: true,
        // ... or any other esbuild option
      }
    }
  }
}

Instead of using standalone: true, we recommend tools such as pnpm deploy --prod. This provides better control over packed files and ensures greater compatibility.

HMR

If you change a server file, the server code is automatically updated: the next HTTP response will be generated by the latest code. No more full server reload required.

This is experimental and doesn't always work: vike-server sometimes still triggers a full server reload.

If HMR isn't what you want (for example if you modify the database connection) you can manually trigger a full server reload by pressing r + enter.

Compression

In production, vike-server compresses all Vike responses.

You can disable it:

apply(app, {
  compress: false
})

HTTPS

If you want to use HTTPS in development, then make sure to pass the HTTPS certificates to Vite's dev server.