T
TanStack•4w ago
extended-salmon

Is it necessary to use Start with a custom server when connecting to long-running processes?

Hopefully quick question since I've been reading through conversations... I use NATS (sort of like Kafka) for server-to-server communication. In my previous Fastify app, my NATS client could connect when the Fastify Server started and would stay connected while running the server. New messages would then be consumed from an async iterator as they arrived. I believe, to do something similar while using Start, I would need to build off of this example https://github.com/TanStack/router/blob/main/e2e/react-start/custom-basepath/express-server.ts So that I can have a server that allows me to hook in to the "start" process so that I can connect my NATS client to my cluster (this is an async connect method from the NATS library) which would be a singleton instance for the server to use across different methods so I can publish to the cluster. Am I on the correct path here or is this overkill and something I can do using just Start? I've used Fastify in the past, but checking out Hono too for its simplicity... And I suppose instead of using Nitro for production deployment I would just cater my production deployment process to be Hono compatible instead of using the node-server option from the Nitro plugin down the road. Thanks a lot for any insight/confirmation as usual!
GitHub
router/e2e/react-start/custom-basepath/express-server.ts at main ·...
🤖 A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more). - TanStack/router
10 Replies
genetic-orange
genetic-orange•4w ago
sounds right to me you need the server for more than just handling individual requests, so you need to customize it
extended-salmon
extended-salmonOP•4w ago
Got it, thank you for confirming!
genetic-orange
genetic-orange•4w ago
would be nice if you can contribute a fastify example to our repo
extended-salmon
extended-salmonOP•4w ago
I think I saw someone already created a fastify plugin to be extensible with Start https://www.npmjs.com/package/fastify-tanstack-start in this thread https://discord.com/channels/719702312431386674/1427717231235567747 but I am curious to see if Hono can accomplish the same, I can share an example when it's working. I'll post back if I have questions
extended-salmon
extended-salmonOP•4w ago
Hey! Okay been working all day to wrap my head around things....a couple questions In the custom basepath example, the vite config sets installDevServerMiddleware: true which adds a middleware terminus by returning the response, so (i think) that means that the next middleware you've added here https://github.com/TanStack/router/blob/dd87dbed8289512050b27d4ad1caf8852f1d9f99/e2e/react-start/custom-basepath/express-server.ts#L20 actually would never run...right? So i think that might be redundant 🤔 The thing with Hono is that it currently doesn't support "connect" style middleware, but I still need to run the other middleware steps before sending the ssr requests, so I set installDevServerMiddleware: false and did
const withMiddlewares = (server: ViteDevServer) =>
createMiddleware<{ Bindings: HttpBindings }>(async (c, next) => {
return new Promise((resolve) => {
server.middlewares(c.env.incoming, c.env.outgoing, () => {
resolve(next())
})
})
})
const withMiddlewares = (server: ViteDevServer) =>
createMiddleware<{ Bindings: HttpBindings }>(async (c, next) => {
return new Promise((resolve) => {
server.middlewares(c.env.incoming, c.env.outgoing, () => {
resolve(next())
})
})
})
this should run all existing middlewares set by vite (i.e. hmr/static assets etc) then I used it like this
const vite = await import('vite')
const server = await vite.createServer({
server: { middlewareMode: true },
// appType: "custom" <--- the default is spa, i think we need to set this to custom?
})

app.use(withMiddlewares(server))
const vite = await import('vite')
const server = await vite.createServer({
server: { middlewareMode: true },
// appType: "custom" <--- the default is spa, i think we need to set this to custom?
})

app.use(withMiddlewares(server))
GitHub
router/e2e/react-start/custom-basepath/express-server.ts at dd87dbe...
🤖 A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more). - TanStack/router
extended-salmon
extended-salmonOP•4w ago
which now leaves us with making the fetch request. Hono passes a Request object which is what the start.ts fetch needs so I can just pass that through I believe
const withRequest = (server: ViteDevServer) =>
createMiddleware<{ Bindings: HttpBindings }>(async (c, next) => {
try {
const { default: serverEntry } =
await server.ssrLoadModule('./src/server.ts')

return await serverEntry.fetch(c.req.raw)
} catch (error) {
if (typeof error === 'object' && error instanceof Error) {
server.ssrFixStacktrace(error)
}

throw error <--- not too sure how to handle error here yet, you cant pass an error to Hono next() though
}
})
const withRequest = (server: ViteDevServer) =>
createMiddleware<{ Bindings: HttpBindings }>(async (c, next) => {
try {
const { default: serverEntry } =
await server.ssrLoadModule('./src/server.ts')

return await serverEntry.fetch(c.req.raw)
} catch (error) {
if (typeof error === 'object' && error instanceof Error) {
server.ssrFixStacktrace(error)
}

throw error <--- not too sure how to handle error here yet, you cant pass an error to Hono next() though
}
})
and then I just add that underneath the existing middleware
app.use(withMiddlewares(server))
app.use(withRequest(server))
app.use(withMiddlewares(server))
app.use(withRequest(server))
It might not be necessary to split the middlewares up but just to pass the request to the callback of server.middlewares.... Does this sit well with you? Anything you see that I am doing wrong so far? Just handling the dev mode so far... Current code is here btw: https://github.com/uncvrd/tanstack-start-hono (work is in hono-server.ts) EDIT: added prod file handling. I didn't want to have a base path, so im just passing all "*" to the static file handler? even with a base path the serverFn's were being served under the base path so /base-path/_serverFn which the serveStatic method was logging not found, not sure if there's a better way anyways: 1. npm run dev for dev mod and npm run build then npm run start for prod mode. Let me know how I can improve this!
GitHub
GitHub - uncvrd/tanstack-start-hono
Contribute to uncvrd/tanstack-start-hono development by creating an account on GitHub.
correct-apricot
correct-apricot•4w ago
nice!!
extended-salmon
extended-salmonOP•4w ago
Thanks Carlos, let me know if you see anything that I can improve upon. I'm still pretty new to vite
correct-apricot
correct-apricot•4w ago
Me too 🙂 AS I know @Magnus May did a nice work with bun => https://github.com/TanStack/router/pull/5237
GitHub
docs: add Bun production server guide for TanStack Start by magnusm...
Description This PR enhances the Bun deployment documentation for TanStack Start by adding information about a production-ready server implementation. Problem The current documentation suggests run...
correct-apricot
correct-apricot•4w ago
GitHub
GitHub - magnusmay/tanstack-start-bun-hosting
Contribute to magnusmay/tanstack-start-bun-hosting development by creating an account on GitHub.

Did you find this page helpful?