Va vite!
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.
Examples
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: trueto 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)
- vite-plugin-ssr: vite-plugin-ssr with React and Express (Stackblitz)
- socket-io: socket.io with Express (Stackblitz)
- Nest.js: Nest.js with Express (Stackblitz)
- Nest.js with vite-plugin-ssr: Nest.js with vite-plugin-ssr (Stackblitz)
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/connectis 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/reloaderis 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.Serverinstance. Note that this is a less reliable method and some things don't work on some operating systems. -
@vavite/expose-vite-dev-serveris a plugin that provides access to Vite's dev server by simply importing it. It's useful for accessing server methods likessrFixStacktraceandtransformIndexHtmlduring 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/multibuildprovides a JavaScript API for orchestrating multiple Vite builds and@vavite/multibuild-cliis a drop-in replacement for thevite buildCLI command for invoking multiple builds. -
@vavite/node-loaderis 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.