Proposal: Simpler way to bundle Node apps with Vite

[srmagura]

Thank you for this library. It works well until you try to add WebSockets to your application. To fix this problem, I propose that we either create a new major version of vite-plugin-node or (more likely) create a new library that borrows some from vite-plugin-node.

Downsides to vite-plugin-node

1. WebSockets do not work (Websockets do not work #22, NestJS, SocketIO not working #71)
2. The Node application does not start up until you make a request to it (Node Server doesn't start automatically #85). Inconvenient because:
   • You might just want to test that the server starts up without crashing
   • Starting the server may have side effects (like outputting a GraphQL schema), which you want to run immediately
3. vite-plugin-node has code to integrate with specific server frameworks like Express and NestJS
   • Ideally, the build system should work for any server framework (no framework-specific code)

The simpler way

All of the above issues stem from vite-plugin-node being intertwined with your Node application at runtime. We can fix all of the above by using Vite as a build tool only.

High-level steps when running your application in development:

• Run Vite in watch mode: vite build --mode development --watch. It creates dist/main.js when the initial compilation finishes.
• Run your application with Node: node dist/main.js
• When you change your code, Vite rebuilds and updates main.js. This should trigger the application to restart. (You can use nodemon)

Rough implementation

Here is an unpolished implementation of the above strategy.

start script in package.json:

"scripts": {
    "start": "rimraf dist && concurrently \"vite build --mode development --watch\" \"node scripts/wait-for-build.mjs && nodemon dist/main.js\""
  },

wait-for-build.mjs:

// This script is used by `yarn start`.
//
// The script runs until `dist/main.js` is created by Vite, and then it exits.

import chokidar from 'chokidar';

chokidar.watch('dist').on('all', (event, path) => {
  if (event === 'add' && path === 'dist/main.js') {
    process.exit(0);
  }
});

To use this, you'll need to run: npm install --save-dev rimraf concurrently nodemon chokidar

Idea for cleaner implementation

The idea is to package the above "rough implementation" into a library. I think the library would have a CLI tool, and maybe a Vite plugin based off of vite-plugin-node. I would be interested in creating such a library if other people think they would use it.

[nick4fake]

Wow, this is perfect! I've been fighting with those issues for quite a while before noticing this, it simply works.

I'll try to think about a PR

[Jedliu]

@srmagura, I tried your solution to build first and start the application, but it doesn't work. I have a demo here nestjs-vite-demo.
PS: I am trying to solve the problem of working with the sockets in Nestjs. #111

When run the Nestjs with vite.

pnpm run start:vite

You can see below in the terminal.

The server works. However, the socket doesn't work in this way.

When you build and start the application

pnpm run build:vite
pnpm run start:prod:vite

We can only see the information below in the terminal.

The server doesn't work at all.

[spuxx1701]

This is great. Thanks!