Edit this page

CLI Migration

Vite's CLI and Vite's API are deprecated starting from vike@0.4.213.

You can still use them but support will be removed in the next major release.

It's a major milestone towards the 1.0 release and unlocks new fundamental capabilities.

Reach out if you have a use case that isn't covered by the replacement below.

CLI

// package.json
{
  "scripts": {
    "dev": "vite", 
    "dev": "vike dev", 
    "build": "vite build", 
    "build": "vike build", 
    "preview": "vite preview", 
    "preview": "vike preview", 
  }
}

Vike's CLI doesn't have any option: use the VITE_CONFIG environment variable instead, see API > CLI.

Update: starting from vike@0.4.225 you can pass Vike settings to the CLI such as --host and --port, see API > CLI > Vike settings.

API

Vite's JavaScript API is also deprecated, instead use:

Most notably, if you use Vite's createServer(), then use createDevMiddleware() instead:

// server/index.js
 
import express from 'express'
import { renderPage } from 'vike/server'
import { renderPage, createDevMiddleware } from 'vike/server'
 
const isProduction = process.env.NODE_ENV === 'production'
const root = `${__dirname}/..`
 
startServer()
 
async function startServer() {
  // Create an Express.js server
  const app = express()
 
  // Dev/prod middleware
  if (!isProduction) {
    const vite = await import('vite') 
    const viteDevMiddleware = (await vite.createServer({ 
      root, 
      server: { middlewareMode: true } 
    })).middlewares 
    app.use(viteDevMiddleware) 
    const { devMiddleware } = await createDevMiddleware({ root }) 
    app.use(devMiddleware) 
  } else {
    app.use(express.static(`${root}/${outDir}/client`))
  }
 
  // SSR middleware
  app.get('*', async (req, res) => {
    const pageContext = await renderPage({ urlOriginal: req.originalUrl })
    const { body, statusCode, headers } = pageContext.httpResponse
    headers.forEach(([name, value]) => res.setHeader(name, value))
    res.status(statusCode).send(body)
  })
}

You can also pass Vite configurations: createDevMiddleware({ viteConfig }).

See also