vite-express

0.22.1 verified Sat Apr 25 auth: no javascript

Vite integration for Express servers, enabling seamless full-stack development with HMR, static file serving, and client-side routing support. Current stable version: 0.22.1 (as of mid-2024). Maintained with monthly releases. Key differentiators: minimal boilerplate, automatic Vite middleware injection, and simple listen/bind API. Alternatives like vite-plugin-node or @danielwii/vite-plugin-express require more manual configuration. Ships TypeScript types.

Common errors

error TypeError: Cannot read properties of undefined (reading 'use') ↓

cause Calling ViteExpress.listen() without an Express app instance.

fix

Ensure you pass a valid Express app: const app = express(); ViteExpress.listen(app, 3000);

error Error: listen() callback is not supported. Use .then() instead. ↓

cause Using callback syntax with ViteExpress.listen() in v0.15.0+.

fix

Remove the callback argument and use .then(): ViteExpress.listen(app, 3000).then(() => console.log('listening'));

error Module not found: Can't resolve 'vite-express' ↓

cause vite-express not installed or ESM import not configured.

fix

Run npm install vite-express and ensure package.json has "type": "module" or use .mjs extension.

error ERR_REQUIRE_ESM: require() of ES Module not supported ↓

cause Using CommonJS require() to import vite-express.

fix

Switch to ESM import syntax: import ViteExpress from 'vite-express';

Warnings

breaking Default export changed from an object to a function in v0.10.0 ↓

fix Update imports: `import ViteExpress from 'vite-express'` instead of `import { viteExpress } from 'vite-express'`.

breaking .listen() no longer accepts a callback as third argument in v0.15.0; use .then() instead ↓

fix Use `ViteExpress.listen(app, 3000).then(() => console.log('listening'))` or pass a callback to `app.listen` and use `ViteExpress.bind()`.

deprecated ViteExpress.config() is deprecated since v0.12.0; import { defineConfig } from 'vite' instead ↓

fix Remove ViteExpress.config() calls; use Vite's own defineConfig.

gotcha ViteExpress.listen() does not work with HTTPS servers created via express.createServer() ↓

fix Use ViteExpress.bind() after manually creating the server with https.createServer().

gotcha In production, ViteExpress automatically serves the built files from 'dist/' folder. Ensure Vite build output is in the correct directory. ↓

fix Set build.outDir in vite.config.js to 'dist' (default). If changed, use ViteExpress.listen() with options: `{ buildDir: 'your-custom-dir' }`.

gotcha When using TypeScript, ensure tsconfig.json includes 'moduleResolution': 'node' or 'bundler' to resolve Vite's ESM exports. ↓

fix Set `"moduleResolution": "bundler"` in tsconfig.json for compatibility with Vite's ESM-only packages.

Install

npm install vite-express

yarn add vite-express

pnpm add vite-express

Imports

ViteExpress
wrong
```
const ViteExpress = require('vite-express')
```
correct
```
import ViteExpress from 'vite-express'
```
Default export; ESM-only since v0.10.0. CommonJS require is not supported.

ViteExpress

wrong

import { ViteExpress } from 'vite-express'

correct

import ViteExpress from 'vite-express'

Default export, not named. Do not destructure.

ViteExpress (with TypeScript)

wrong

import ViteExpress from 'vite-express'; ViteExpress.listen(express(), 3000);

correct

import ViteExpress from 'vite-express'; const app = express(); ViteExpress.listen(app, 3000);

TypeScript types are included. The listen() method accepts an Express app instance, not a factory.

ViteExpress.bind

wrong

ViteExpress.bind(server, app);

correct

import ViteExpress from 'vite-express'; const server = app.listen(3000); ViteExpress.bind(app, server);

Parameter order: app first, server second. Common mistake.

Quickstart

Basic Express server with a single API route, integrated with ViteExpress for development HMR and production static serving.

import express from 'express';
import ViteExpress from 'vite-express';

const app = express();

app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from Express!' });
});

// In development, Vite server is started automatically.
// In production, static files are served.
ViteExpress.listen(app, 3000, () => {
  console.log('Server listening on port 3000');
});