How to integrate Vite into an existing old express app with pug templates

Question

I have an old code that uses Express and renders HTML with pug.

It uses plain js files and imports them like:

script(type='text/javascript' src='js/test.js')

They use jquery all around those js files.

It is a big codebase so if I wanted to modernize the code like using Vue and Typescript I could not update the old code but start writting modern code from this point onwards.

---

In short

Its an express app which renders pug templates and then, the results of that rendered HTML is placed into the website inside a div container. I want to add the capability the use Vue apps so I could write something like:

.vue-app(data-vue-app="app1")

And place a vue app in it, inside the pug file.

---

I though to use Vite to bundle my .vue files and to be able to use typescript.

My original setup which is kind of working is this:

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Start",
            "runtimeExecutable": "npx",
            "runtimeArgs": [
              "nodemon",
              "--inspect",
              "--delay",
              "1",
              "${workspaceFolder}/bin/www"
            ],
            "console": "integratedTerminal",
            "restart": true,
            "internalConsoleOptions": "neverOpen",
            "env": {
                ...
            }
        }
    ]
}

vite.config.ts

export default defineConfig({
  plugins: [vue(), vueJsx()],
  build: {
    sourcemap: true,
    rollupOptions: {
      input: "src/vue/main.ts",
    },
    outDir: "public/dist",
    manifest: true,
  },
  publicDir: "src/vue/assets",
  server: {
    port: 3030,
  },
});

And in my package.json I run this script:

"build-vue-watch": "vite build --watch"

Which bundles the .vue files and places it inside the public folder under /dist

Then in the main pug template I do:

script(type='text/javascript' src='/src/vue/main.ts')

And in order for express to serve the bundled files I had to do:

const manifestPath = path.join(__dirname, 'public', 'dist', '.vite', 'manifest.json');
const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));

app.use((req, res, next) => {
  const assetKey = req.path.substring(1);
  const asset = manifest[assetKey];
  if (asset) {
    const assetPath = path.join(__dirname, 'public', 'dist', asset.file);
    res.set('Cache-Control', 'no-store');
    res.sendFile(assetPath);
  } else {
    next();
  }
});

Until this point, all worked like a charm but the thing I didn't like is that there is no "dev" mode for the .vue files, since Im running vite build it's already bundling the app in production mode and I can't even use the vue dev tools to provide a way to debug the app.

To overcome this I know I have to use vite dev but this starts a new server which I'm not sure how to merge with my existing system so I could ask the vite server the files or if I could take this further and provide a way to enable HMR.

So, the exact question is:

How could I properly implement Vite in this old express-pug existing system in order to provide an enviroment to develop and safely use in production?