#can I configure a dev runner entry point in vite.config?

1 messages · Page 1 of 1 (latest)

wind oxide
#

Like is there some import string that has to return a fetch request handler? Or should I make a separate script that uses the vite api to create the devserver?

blissful fable
#

The question seems fairly vague and I'm not sure what you are looking for. Perhaps you should mention a higher level objective?

wind oxide
#

@blissful fable So I would like to define my server code in one place, which means that for building it would be self-contained and would be listening on a port.

However, in dev mode, vite needs to build the server code and needs to manage the port. For that I was thinking that the server code could export its request handler and not listen on a port, and then vite could call the handler if the request is not for client code.

It would be nice if I could configure this declaratively instead of having to create and run a separate script that runs vite in middleware mode.

blissful fable
#

Not on the doc, but I think you are talking about this pattern.

// vite.config.ts
plugins: [
  {
    name: "ssr-middleware",
    config() {
      return {
        appType: "custom"
      }
    }
    // can do similar for `configurePreviewServer`
    configureServer(server) {
      // not here (pre)
      // server.middleware.use(...)

      // but here (post)
      return () => {
        // this hits only when Vite haven't handled client assets
        server.middleware.use(async (req, res, next) => {
          // or mostly equivalently
          //   server.environments.ssr.runner.import("/src/my-server-entyr.js")
          const mod = await server.ssrLoadModule("/src/my-server-entry.js")
          mod.default(req, res, next);
        })
      }
    }
  }
]

// my-server-entry.js
export default function handler(req, res, next) {
  // implement your server logic
  res.end("hello");
}

For example, minimal react ssr example looks like this https://github.com/vitejs/vite-plugin-react/blob/db7d706242ab70898fbab7e85402dc4dcb8a7135/playground/ssr-react/vite.config.js#L40

wind oxide
#

@blissful fable Thank you, this works!

However, is it stable for use? I saw that the environment API docs expect a fetch Request handler function instead.

Also, I can't use websockets, is that something that can be fixed or should I be using a different approach?

blissful fable
#

Many frameworks has been using this pattern such as Sveltekit, Remix, so Vite won't broke this approach.
Websocket can be also supported by proxy. I haven't tried myself but at least Sveltekit has implementation.

The ergonomics around this is a bit cumbersome, so I think Vite should provide something more clear, but not yet at the moment.

wind oxide
#

@blissful fable for the websocket, I have the ssrModule returning a Fastify instance that also supports websockets. However, it looks like the vite listener intercepts websocket connections.
Do you think it's possible to let the vite devserver proxy the websockets if they're not the vite websocket?