Use Vite as universal node dev server

[axe-me]

Typescript based node backend project has a really long recompile time on file changes and also most time need to restart the dev server. From what I see Vite has the potential to solve the problem.

Describe the solution you'd like
Use Vite dev/SSR server as a universal node dev server. I have created a POC for using Vite with nestjs:
https://github.com/axe-me/poc-vite-node-server

This project was fresh created with nest cli and installed the latest version (2.0.1) of vitejs.

Vite is also configured to use a rollup-swc-plugin to do typescript transform. (Can't really use esbuild for nestjs or most nodejs backend framework since a lot of backend node packages rely on the typescript decorator emitDecoratorMetadata feature which esbuild not support see evanw/esbuild#257)

I also created a dev.js to load the project entry point to allow vite to handle the DepGraph build/caching and transform ts code etc. The server gets booted up and running fine. The only thing not working is after a file changed, the new request not really load the new rebuild module. I'm not sure how can I make this part work? do I need to reload the entry for every request?

Describe alternatives you've considered
I see few people started working on similar stuff including the nuxt team jiti , require-ts from adonisjs. But both of them are just a require extension for nodejs, still need to do a lot a work to make them to be a dev server. However, vite can achieve it with a little more work.

Additional context
This feature can make Vite a game-changer for TS backend development, please consider this request!

[yyx990803]

do I need to reload the entry for every request?

Yes, because otherwise the entry will contain cached imports from older version of the invalidated modules. It's fine though because a reload will only reload the modules in the import chain between the entry and the changed module (most of the time only a few of them).

[axe-me]

@yyx990803 Thanks Evan for the quick response.
I tried different ways to reload the app but none of them are working:

The first thing I tried is re-init the app on each request, just like the SSR example in playground:

const { createServer } = require('vite');

async function bootstrap() {
  const viteServer = await createServer({
    server: { middlewareMode: true },
  });

  const { createApp } = await viteServer.ssrLoadModule('./src/main.ts');
  let app = await createApp;

  app.use(viteServer.middlewares);

  app.use('*', async (req, res, next) => {
    try {
      const { createApp } = await viteServer.ssrLoadModule('./src/main.ts');
      app = await createApp;
      app.init();
      next();
    } catch (e) {
      viteServer && viteServer.ssrFixStacktrace(e);
      console.log(e.stack);
      res.status(500).end(e.stack);
    }
  });

  await app.listen(3000);
}

bootstrap();

I guess the reason why this not working is the current request not passed to the reloaded app. I don't see a way to do it after google around (note the app by default in nestjs is just an expressjs app)
Also, I feel create a new app instance on each request is kinda expensive as well, since our goal here is only reload changed module.

Secondly, I tried using the watcher:

const { createServer } = require('vite');

async function bootstrap() {
  const viteServer = await createServer({
    server: { middlewareMode: true },
  });

  const { createApp } = await viteServer.ssrLoadModule('./src/main.ts');
  let app = await createApp;

  await app.listen(3000);

  viteServer.watcher.on('change', async () => {
    // await app.close();
    const { createApp } = await viteServer.ssrLoadModule('./src/main.ts');
    app = await createApp;
    // await app.listen(3000);
    await app.init();
  });
}

bootstrap();

Unfortunately, this approach not working as well.

Also, is that possible to add a config option to auto reload the entry on file changes for dev server mode in vite? then all these not a problem anymore.

Any helps will be appreciated

[axe-me]

I just figured out why my second approach not working. It's because on file update, the module graph might not finish transform the updated file yet.

So I need to figure out a way to reload the module after module graph updated. I see there is a handleHotUpdate lifecycle hook for plugin, it would be great to expose the hook from dev server. something looks like: viteServer.onHotUpdated(() => { //... })

@yyx990803

[axe-me]

in the end, I figured I just need to connect to the vite dev server websoket to get hmr updates. and the plugin is here : https://github.com/axe-me/vite-plugin-node