Vike - Nitro example repo issues

[ThimoDEV]

As mentioned in the discord i'm trying to combine Vike with nitro as a backend to create something that works like Nuxt.

https://github.com/ThimoDEV/turbo-nitro-vike-example

The current issues I encounter:

Vike has an example because it adds itself as middleware for the server to handle things

Nitro has its own way of defining middleware:

`export default defineEventHandler((event: H3Event) => {

});`

I don't fully understand which part of the server side Vike is taking and which part is done by nitro. Do I have to disable things in Vike, or change how it behaves for the server?

https://github.com/danielroe/agent-conf-2023/tree/main

I did find this example repo by Daniel Roe where he made a first example nitro - react framework. Maybe it can help us

[brillout]

Have you seen https://vite-plugin-ssr.com/renderPage?

[ThimoDEV]

Have you seen https://vite-plugin-ssr.com/renderPage?

Yes, I now have this:

`import { renderPage } from "vite-plugin-ssr/server";
import { tuplesToObject } from "../utils/tuplesToObject";

export default defineEventHandler(async (event) => {
const pageContextInit = {
urlOriginal: getRequestURL(event).toString(),
};
const pageContext = await renderPage(pageContextInit);
const { body, statusCode, headers } = pageContext.httpResponse;

if (headers) {
const nitroHeaders = tuplesToObject(headers);
setResponseHeaders(event, nitroHeaders);
}
if (statusCode) {
setResponseStatus(event, statusCode);
}

send(event, body);
});;`

export function tuplesToObject(tuples: [string, string][]): Record<string, string> { const obj: Record<string, string> = {}; for (const [key, value] of tuples) { obj[key] = value; } return obj; }

`
//https://nitro.unjs.io/config
export default defineNitroConfig({
typescript: { internalPaths: true },
esbuild: {
options: {
loaders: {
".tsx": "tsx",
},
},
},
srcDir: "server/",
buildDir: "server/.nitro",
devHandlers: [
{
route: "/__vite",
handler: defineLazyEventHandler(async () => {
const viteDevServer = await createServer({
base: "/__vite/",
appType: "custom",
server: { middlewareMode: true },
});

    return defineEventHandler(
      fromNodeMiddleware(viteDevServer.middlewares),
    );
  }),
},

],
});
`

I did have to build the project before it stopped giving me errors, Is that expected behaviour?
I do have vite working, but not yet the interactivity part, Currently I see this (interactivity, links and HMR is broken, and if I remove nitro routes it cant find the Vite page anymore):

[brillout]

It's possible that there are issues between Nitro and Vite's dev middleware. Although in principle it should be possible to make it work since Nuxt is using both Vite and Nitro. Maybe checking how Nuxt does it can be helpful.

[ThimoDEV]

Currently the middleware suggested from the vite-plugin-ssr docs take over the nitro routes returns, so something needs extra configuration there

[brillout]

renderPage() is completely agnostic and you can adapt its return value to whatever format Nitro expects. There really shouldn't be any issues integrating vite-plugin-ssr itself intro Nitro. That said, there can be issues between Vite and Nitro, see my sibling comment.

[alessandrojcm]

The issue here is that you are using devHandle when we need to use renderer (this is what Nuxt does). Adding a renderer to vike.ts:

import { renderPage } from "vike/server";
import { RenderResponse } from "nitropack";

export default defineRenderHandler(async (event) => {
  useRuntimeConfig(event);
  const pageContextInit = { urlOriginal: event.node.req.originalUrl! };
  const pageContext = await renderPage(pageContextInit);
  if (!pageContext.httpResponse) return null;
  // `body` is the HTML of the page with a route matching pageContextInit.urlOriginal
  const { body, statusCode, headers } = pageContext.httpResponse;
  const response: RenderResponse = {
    body,
    statusCode,
    headers: Object.fromEntries(headers),
    statusMessage: "ok",
  };
  return response;
});

Then add a vike middleware into middlewares/vike.ts:

const isProduction = process.env.NODE_ENV === "production";

export default defineEventHandler(async (event) => {
  useRuntimeConfig(event);
  // Vite integration
  if (!isProduction) {
    // We instantiate Vite's development server and integrate its middleware to our server.
    // ⚠️ We instantiate it only in development. (It isn't needed in production and it
    // would unnecessarily bloat our production server.)
    const vite = await import("vite");
    const viteDevMiddleware = (
      await vite.createServer({
        root: ".",
        server: { middlewareMode: true },
      })
    ).middlewares;
    return fromNodeMiddleware(viteDevMiddleware)(event);
  }
});

Add config to nitro.config.ts:

import { defineNitroConfig } from "nitropack/config";

export default defineNitroConfig({
  renderer: "./vike.ts",
});

The issue here is that when the MHR kicks in, Vite's WS server restarts and you get WebSocket server error: Port is already in use. Haven't found a way to work around that yet.

[alessandrojcm]

Maybe Vite's new runtime could help decouple this so we can get rid of the middleware reloads? I am not sure how

[brillout]

Yes and that's actually what we're doing at #1342.

[alessandrojcm]

Yeah I've been keeping a close eye on that, but not sure that'll help here. Nitro has its own build process going on (which you can't really tap into and unlike Vike there is no plugin for it l), so ideally we would want Nitro's HMR to take over here. Nitro does not expose its Vite configuration (it does expose Rollup tho) so I'm not sure how to pass Vike's plugin or of that is possible at all.

[alessandrojcm]

Analog has a plugin, I'll give it a look and see how they're doing it.