vavite
is a set of tools for developing and building server-side applications with Vite.
Vite, despite being a frontend tool, has support for transpiling server-side code. The feature is intended for building server-side rendering (SSR) applications. But there's no reason why it can't be leveraged for building server-side applications that are not necessarily related to SSR. vavite
lets you do that, but also vastly simplifies the SSR workflow.
Vite's official SSR guide describes a workflow where Vite's development server is used as a middleware function in a server application made with a Connect compatible Node.js framework (like Express). If your server-side code needs transpilation (e.g. for TypeScript), you're required to use another set of tools (say ts-node
and nodemon
) for development and building. vavite
enables you to use Vite itself to transpile your server-side code.
All examples have
"type": "module"
in theirpackage.json
.
- For Vite v2, remove it to use CommonJS (CJS).
- If you want to use CommonJS with Vite v3+, add
legacy.buildSsrCjsExternalHeuristics: true
to your Vite config.
- simple-standalone: Simple standalone example (Stackblitz)
- express: Integrating with Express (Stackblitz)
- koa: Integrating with Koa (Stackblitz)
- fastify: Integrating with Fastify (Stackblitz)
- hapi: Integrating with Hapi (Stackblitz)
- ssr-react-express: React SSR with Express (Stackblitz)
- ssr-vue-express: Vue SSR with Express (Stackblitz)
- vike: Vike with React and Express (Stackblitz)
- socket-io: socket.io with Express (Stackblitz)
- Nest.js: Nest.js with Express (Stackblitz)
- Nest.js with vike: Nest.js with Vike (Stackblitz)
vavite
is the main package that should work for most workflows but it is built on a set of lower level tools that you can use independently:
-
@vavite/connect
is a Vite plugin that turns the official SSR workflow around: Instead of mounting Vite's dev server into your application as a middleware function, you write your application in the form of a middleware function (with the(req, res, next)
signature) and mount it into Vite's dev server. For production, you can provide a custom server entry or it can build a standalone Node.js server application for you. This workflow is best if you're only interested in handling requests and you don't need control over the server entry during development. -
If you do need control over your server entry even during development,
@vavite/reloader
is a Vite plugin that provides live reloading capabilities for applications written with any Node.js server framework. It should be usable with any framework that allows you to provide your ownhttp.Server
instance. Note that this is a less reliable method and some things don't work on some operating systems. -
@vavite/expose-vite-dev-server
is a plugin that provides access to Vite's dev server by simply importing it. It's useful for accessing server methods likessrFixStacktrace
andtransformIndexHtml
during development using either@vavite/connect
or@vavite/reloader
. -
Building an SSR application with Vite involves at least two invocations of Vite's build command: once for the client and once for the server.
@vavite/multibuild
provides a JavaScript API for orchestrating multiple Vite builds and@vavite/multibuild-cli
is a drop-in replacement for thevite build
CLI command for invoking multiple builds. -
@vavite/node-loader
is a Vite plugin that makes it possible to debug SSR code with full support for sourcemaps and breakpoints. It uses a Node ESM loader behind the scenes.