Vavite

Develop server-side applications with Vite

README

Va vite!


vaviteis 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. vavitelets 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. vaviteenables you to use Vite itself to transpile your server-side code.

System requirements


Node.js 14.20 or higher
Vite 2.8.0 or higher

Examples


All examples have "type": "module"in their package.json.


For Vite v2, remove it to use CommonJS (CJS).
If you want to use CommonJS with Vite v3, add legacy.buildSsrCjsExternalHeuristics: trueto your Vite config.

Packages


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 anyNode.js server framework. It should be usable with any framework that allows you to provide your own http.Serverinstance. 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 like ssrFixStacktraceand transformIndexHtmlduring development using either @vavite/connector @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 the vite buildCLI 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.