Fully SPA on the client for Electron and some SSR stuff only for the web. Is it possible in TSR?
Hi. I've a monorepo that has web. desktop and electron. For the web and electron I've been using vite-electron which is just client SPA. Electron requires full SPA with a entry
index.html (although we can serve the standalone server of like let's say Next.js but we're not doing that due to security and added resources). SPA will work great for 90% of our requireement but I was wondering if we could do SSR to certain pages that only works for web. Is it possible? We do some conditional building based on if the platform is web or electron(reference: https://github.com/niraj-khatiwada/web-desktop-mobile-monorepo/blob/main/apps/web/electron.vite.config.ts). I also looked at the vinxi SPA and SSR examples (SPA: https://stackblitz.com/edit/github-2srfxu?file=app%2Fclient.tsx,index.html, SSR: https://stackblitz.com/github/nksaraf/vinxi/tree/main/examples/react/ssr/tanstack-router-app?file=app.config.js) to figure out if I could do it but I couldn't really understand how TanStack Start's app.config.json was configured under the hood. Thanks for making TanStack Start. I'm really excited to use it and finally ditch Next.js that is just too much hassle outside of Vercel.StackBlitz
Vinxi Tanstack Router App Example - StackBlitz
Run official live example code for Vinxi Tanstack Router App, created by Nksaraf on StackBlitz
10 Replies
continuing-cyanOP•11mo ago
btw I tried to add
index.html file to TanStack Start starter and tried to make conditional client that hydrates for web(default setup) but creates only base root for SPA mode based on the environment(web or electron) but I couldn't figure out how to configure it in the app.config.js in accordance with Vinxi's app.config.jsbroad-brown•11mo ago
so you want to bundle the whole app inside the electron app?
continuing-cyanOP•11mo ago
I want SPA only mode in Tanstack Start that'll go to the Electron.
broad-brown•11mo ago
and how will it be packaged?
you can disable SSR in start and enable it for selected routes
however, root will always be SSRed
continuing-cyanOP•11mo ago
So in Electron it'll be exactly like the raw React Vite SPA setup. https://github.com/niraj-khatiwada/web-desktop-mobile-monorepo/tree/main/apps/web/src/renderer. The build will create a single index.html file and we supply that file to Electron rendere entry file.
Yeah, I was hoping there would be some client only mode rendered via a single index.html file.
broad-brown•11mo ago
and where would that index html get its js from? locally?
how would you deal with server functions in this setup? would you still want to call them?
continuing-cyanOP•11mo ago
yes it'll be local. The elctron side will just have local js files (https://github.com/niraj-khatiwada/web-desktop-mobile-monorepo/blob/95fec9a2fe51a8850ecb9e7afba7dcccc73ea749/apps/web/src/renderer/index.html#L19). All the pages that the web and electron will share will be client only. No server stuffs. But we just want to extend certain pages that'll only be in the web app side not on Electron side (maybe exclude those in Electron build process) that'll eventually use server functions stuff.
GitHub
web-desktop-mobile-monorepo/apps/web/src/renderer/index.html at 95f...
Web, Desktop and Mobile apps Monorepo using Vite w/ TanStack Router for web/desktop and Expo for mobile. - niraj-khatiwada/web-desktop-mobile-monorepo
continuing-cyanOP•11mo ago
Not sure if it makes sense, I'm not sure if that is even possible
broad-brown•11mo ago
hm I think you would need two separate apps that share common routes
continuing-cyanOP•11mo ago
yeah I reckon that. I think I just need to make my routers to be a shared package that web and desktop needs to inherit. I think that'll work for now. Thanks for the help