Vite Dev Server in middleware mode

[a-maas]

Hello, and thanks for all the great contributions to the vite-ruby ecosystem. I realize this is a little more obscure, but I've been hacking around using a small node/express sidecar server next to my Rails app (using vite-rails) to SSR frontend components with vite. I used the vite guides to set this up. This mostly works, though I'm trying to figure out if I need to run both the normal ./vite dev from vite-rails in addition to my node/express server. My understanding is that using vite in middleware mode with node/express is potentially the same as running vite dev, so it may be redundant to be running two vite development servers.

So I guess my discussion topic is if it would be possible to plug the node/express vite dev server running in middleware mode into the way vite-rails is configured so that I don't have to run two servers. I've spent a little time trying to figure this out but could use some tips or insight. This would allow you to run a single dev server that would handle frontend bundling/HMR and also SSR.

Thank you!

[a-maas]

I did a bunch of digging, and I think I got this working, at least somewhat. The necessary changes were actually pretty minimal, though I'm not sure if I'm missing some functionality that the vite-ruby gem provides since I'm not using the built-in ViteRuby::Runner to start up the dev server. Instead, I run an express server with npm run.

The primary changes to get it working were:

• express server with vite in middleware mode started on default port: 3036. Here's the example server.js file I used.
• Change the vite middleware server's hmr port to something else (like 3037), since it seems like you can't use the same port for the WS connection.

  vite = await createServer({
    server: {
      middlewareMode: true,
      hmr: {
        port: 3037,
        clientPort: 3037,
        protocol: "ws",
        host: "localhost"
      }
    },
    appType: "custom",
    base,
    root
  });
  app.use(vite.middlewares);

I'm going to continue to do some more development with this setup and see how things work out. I'm not sure if this is a use-case that this gem wants to support, but I thought I'd share my findings either way.

[ElMassimo]

Hi Adam!

Feel free to share your setup here, as it might be helpful for other folks using Vite in a similar way.

As to how you start the Vite dev server, the only difference when starting Vite with bin/vite dev is that it applies any config that you specify in config/vite.rb (which is optional and typically not used), so starting the server separately should be equivalent in your case.

[a-maas]

Thanks! Once things feel stable, I plan to make an example project repo, which I will link here.