What file should I be serving?
So I've just started tinkering with TanStack Start after years of working with React Router and NextJS and I'm trying to build a monorepo project that has a Go backend and TS Start frontend. Normally to do this with a SPA, you'd tell Go/Gin to serve a single file (often
client/dist/index.html or something similar), but with how TS Start outputs, what file should I be serving from Gin? Any help appreciated here!10 Replies
foreign-sapphire•8mo ago
Hey, with TS start as your frontend framework, TS start is the one serving the HTML to the client. Gin would then have to be just an API server. Here are three different scenarios that you can consider.
1) After loading the page, the client makes a request directly to your Gin API. This has some limitations. While your website might be served from
https://mysite.com, your API will most likely reside on a different domain - for example https://api.mysite.com/, or https://mysite.com:3000. This has cross-origin implications that you need to deal with, by defining Access-Control-* headers for every Gin endpoint. You will have headaches regarding HTTP only cookies, or possibly cookies in general as well.
foreign-sapphire•8mo ago
2) Your requests to the API server is routed through TS Start. The benefits here is that all your requests go to the same origin, so you don't have to think about any of that cross origin shenanigans. You will also have an easier time server side rendering your app, if you need it. The downside here is that the moment the TS Start server process goes down, the client will choke on any request that should have been routed through TS Start
foreign-sapphire•8mo ago
3) Making requests to 3rd party APIs in most cases requires you to use an API key. If you expose the API key to users, they can start making calls themselves, which is not great. By routing all requests through your own API, you have full control.
Some API keys are safe to expose to clients, however. Take for example MapBox. Exposing the API key to use for mapbox is actually part of the design of mapbox. It's just that the API key is so tightly scoped to only allow reads for very particular things that the client can't realistically do any damage. However, you lose the ability to rate limit. Say for example that you want to rate limit not-logged-in users to 2 requests per minute, logged in users to 10 requests per minute and premium users to 2000 requests per minute. You can't do that if you just directly expose the API key. You need to put it behind your own server function so that you can authenticate the user
xenial-blackOP•8mo ago
Wow, this is super super helpful. I work on two RR and NextJS projects at work that are like your functionally your second example and that’s fine, but it’s because they’re both detached from the main app & API
So maybe the answer is I don’t need Start, I just need Router & Query in a Vite React repo
Ultimately I’d like Gin/Go to be responsible for all the cookie & auth concerns
foreign-sapphire•8mo ago
Yep, I think the solution then would be to host your Vite app through NginX, and have Gin on the side. You'll have to configure the proper CORS headers
I can't remember the details of it, but I remember I had a rough time doing cookie auth on localhost. Using Nextjs/TanStack Start or other server side rendering solutions directly enables easier auth through cookies - for solutions like yours I opt for storing the auth token in localstorage, and for every request I add the
Authorization: Bearer xxxx header on the request
Not ideal for XSS, but it is what it isxenial-blackOP•8mo ago
I work at beehiiv and our main app is Rails 7 & React Router v6 and Rails handles all the middleware
They’re one repo, on the same domain, with different route trees, and RR is acting as a SPA
It works pretty well and the dev experience is fairly smooth
foreign-sapphire•8mo ago
Ohh, so you do reverse proxying?
xenial-blackOP•8mo ago
Yep
foreign-sapphire•8mo ago
Right, that pretty much solves all cross-origin concerns, cool
xenial-blackOP•8mo ago
Well, I got Gin serving Router:
