T
TanStack•2y ago
ratty-blush

Default route with Electron after build

Hey guys. I am using TanStack Router with my electron-vite application. It works beautifully in dev. However, when I build a release and launch the application, the first route paths to 404 not found. I think this is because my electron window starts differently in dev and in production (in dev loadURL, in prod load index.html, which attaches to my react code): 
if (import.meta.env.DEV) {
  mainWindow.loadURL("http://localhost:5173");
} else {
  mainWindow.loadFile(join(__dirname, "../renderer/index.html"));
}
if (import.meta.env.DEV) {
  mainWindow.loadURL("http://localhost:5173");
} else {
  mainWindow.loadFile(join(__dirname, "../renderer/index.html"));
}
So in dev startup my window shows my router index route But in prod I get redirected to 404 route. I'm not sure if I can loadURL("/") in prod maybe? Other temporary fix I have thought of is making some client-side on startup effect that does: 
redirect({
  to: "/"
})
redirect({
  to: "/"
})
I acknowledge this is more of an electron-vite setup issue. You may delete this post, if it's inappropriate. The router functions fully in my electron app in dev/production, it's just that in production, the initial startup won't show a route before I manually navigate via my UI.
No description
2 Replies
ratty-blush
ratty-blushOP•2y ago
this image is an example app that has been built. In dev the path would just be "/" on startup, but now it is the index.html file
stuck-chocolate
stuck-chocolate•16mo ago
Hi! Was wondering if you found a solution for this? I'm having the same issue both while using electron-vite and also while using a custom Vite setup with electron (https://github.com/cawa-93/vite-electron-builder). If you have any insights they would be greatly apreciated! Actually just found the solution for this in this thread: https://discord.com/channels/719702312431386674/1204162137098944623/1204167263700123668. All that needs doing is creating a memory history for the router when initialising it: 
const memoryHistory = createMemoryHistory({
  initialEntries: ['/'], // Pass your initial url
});
// Create a new router instance
const router = createRouter({ routeTree, history: memoryHistory });
const memoryHistory = createMemoryHistory({
  initialEntries: ['/'], // Pass your initial url
});
// Create a new router instance
const router = createRouter({ routeTree, history: memoryHistory });

Did you find this page helpful?