How to Choose the Right Plugin for a Vite and Express/Node Project? [closed]

Question

I am currently working on a project that involves using Vite with a Node Express application. I have come across three different packages that seem relevant:

1. vite-express
2. vite-node
3. vite-plugin-node

Up until now, I have primarily used vite-plugin-node because it is recommended in the official documentation. However, I'm curious to know if there are specific criteria or considerations that can help me make an informed decision when choosing a plugin for my project.

What factors should I take into account when deciding between these packages, and are there any experiences or insights from the community that can guide me in making the best choice for my use case? I'm looking for objective information and comparisons to help me make an informed decision. Thank you.

Answer 1

Before I provide my two cents for each option, it is important to know that vite by default looks for an index.html on the project root directory. This is because vite is first created as a frontend tool, eventually becoming a replacement for tools such as webpack. Setting up vite is quite easy until you mix backend on the plate. This is why the above options exists, to somehow take advantage of vite's powerful utilities. Instead of using pm2 or nodemon for HMR, just use vite. Instead of configuring bundler, just use vite (and vite is also the faster than most bundlers). And so on... Given that expressjs is just a middleware and gives zero utilities for development, people tend to reach for things and eventually falling into the npm package rabbit hole.

Vite Express

If you expect to serve pages using express, you can enjoy great developer experience with vite.

Vite Plugin Node

AFAIK it Vite Plugin Node also does the same thing what Vite Express does (by utilizing vite as a middleware for express) but this plugin aims to be compatible between other node frameworks such as Koa and Fastify.

Vite Node

Started as a proof of concept to use Vite on top of node runtime. This aims to provide On-demand evaluation and transformations on top of existing vite features such as HMR, plugins and path aliases.

Based on @pi0's brilliant idea of having a Vite server as the on-demand transforming service for Nuxt's Vite SSR.

Later merged into Vitest monorepo at vitest/packages/vite-node.

Recommendation

I was also looking to use vite as development tooling for hyper-express backend api that I am about to work with. I settled for vite-node because of how simple it is to use compare to middleware injection done by the two previous mentioned packages.

I can simply run the following on my existing project:

npx vite-node --watch src/index.js

or install it as a project dependency and use npm script command, npm run dev:

// package.json
{
  "scripts": {
    "dev": "vite-node --watch src"
  }
}

What about node?

Node 18+ now has HMR feature via --watch flag:

node --watch index.js

It also has path aliases via subpath imports, all you need is to defined it in package.json file:

// package.json
{
  "imports": {
    "#dep": {
      "node": "dep-node-native",
      "default": "./dep-polyfill.js",
    },
    "#routes": "./src/routes/index.js",
    "#routes/*": "./src/routes/*"
  },
  "dependencies": {
    "dep-node-native": "^1.0.0"
  }
}