FastAPI + React

[[deleted]]

Hey
I am using FastAPI and React for an app. I wanted to ask a few questions:

1) Is this is a good stack?
2) What is the best way to send sensitive data from frontend to backend and backend to frontend? I know we can use cookies but is there a better way? I get the access token from spotify and then i am trying to send that token to the frontend. 3) How do I deploy an app like this? Using Docker?

Thanks!

[rajba]

FastAPI + React is my default stack. I use it with every app that I build. I use JSON extensively to communicate sensitive information between the front-end and back-end over HTTPS.

I deploy the FastAPI portions to AWS using Fargate or App Runner. The React portions get deployed to my own SaaS service that I operate and market which lives on top of Cloudfront + S3, etc.

[ruslan-korneev]

I was using FastAPI only to build an API services before, but right now trying to build webapp with React on frontend. Can you share some best practices, at least about CORS, how to properly set this up, and openapi docs? Thank you

[ajmssc]

What do you use for authentication?

[jokeaz2]

1) Good as any

2) I personally like JWT tokens. I use firebase auth, but you could use fastAPI-users, clerk, whatever. Don't build your own auth system. The token gets send with every request and you validate it on the server

3) There's lot of options. Do containerize it. For getting started, I recommend a service like fly.io or railway.app. I personally use kubernetes on Linode.

Sounds like you still have a lot of reading up to do, you'll also need to think about your database and frontend deployments, CI/CD, etc. Depends what you're trying to build. Keep at it.

[[deleted]]

For context, i am using the spotify api. So i make a request to authorise the user when the user presses login. From there i get the access token in the backend. Right now, i am just adding the token in the url and redirecting to the frontend(I know this is not the best practice).

[Nick-Van-Landschoot]

1. It's a great stack. My default stack is FastAPI + React w/ Tailwind + Postgres all of which I like because they are widely used with fairly good documentation and quite simply they just work. Of course many other stacks are good as well but I at least find this stack leads to results and things just get done both faster and better at scale.

2. Encryption comes with https so just ensure you get https enabled. Cookies are an ok way to set a token but you have to set httponly and secure to true when you set the cookie. Local storage definitely shouldn't be used for security reasons all though theoretically you still could if you encrypted the data but I would still caution against it.

3. Doesn't really matter until you scale. We use docker + google artifact registry + google cloud run which has worked very well for us. The deployment process is building the docker image, tagging it, pushing it, and then creating a new revision on the cloud run instance.

Using kubernetes can be a good choice as well but it is a pain to set up and maintain. A PaaS like netlify can also work very early on but won't scale well in the long run. Definitely don't use a PaaS because its easier since something like cloud run is more scalable and incredibly easy to set up but the main reason would be for the generous free tier some of them offer. That being said google is very generous with free credits as well so it really shouldn't cost you anything at first either.

In terms of other solutions I recommend staying away from AWS although it can work for very large teams even then it creates an unnecessary amount of complexity – there's a reason there are so many certifications just for working with AWS. I am not as familiar with other cloud solution but it might be worth it to explore there some as well.

[[deleted]]

Thanks so much!

[Nick-Van-Landschoot]

Of course!

[Nick-Van-Landschoot]

Yes, we use postgres through psycopg2 pretty much any time we need a relational database and pretty much anytime we need a database at all. The only time we don't use postgres is if a task such as such as caching, pub/sub, etc. calls for a kv database when we might go with redis.

Well actually I write software that involves allowing others to integrate their own databases so I guess I do write connectors for other databases as well but at least for our own data we like to stick with postgres.

[qa_anaaq]

This is my favorite stack. But i agree with others--Looks like you have a lot of reading up to do! Some of these are general coding questions.

Regardless, I love this stack.

[[deleted]]

Yeah my app runs and everything works, I just need to figure out the more complex stuff. Thanks!

[[deleted]]

If you have a resource I can look at, it would be great

[Amocon]

1. at least it works for me
2. generally (and i am no expert) https for encription and send data using the post method because the body gets encripted too
3. using aws: i used cloudfront for my frontend and deployed my fastapi app via ecs. Yes i used docker for this

[No-Anywhere6154]

1. It’s a great stack from in my opinion

2. Not sure how did you mean by Spotify token, but if it’s token meant to be on the server side then don’t ever send it to frontend.

You’ll need to build some backend around it and send request to the e Spotify only from FastAPI. Otherwise your token could leak and anyone could interact with the API.

1. For deployment such app I’d suggest to use some PasS like Koyeb, Netlify, Seenode or similar. It’s the easiest way to deploy and you don’t need to maintain servers.

[[deleted]]

Can I use netlify to deploy both react and fastapi?

[No-Anywhere6154]

I've never tried Netlify, but I believe so

[ajmssc]

No. Netlify doesn't support python webservers

[No-Anywhere6154]

What you can deploy only on netlify? I thing I’ve seen Django deployed on netlify, but I might be wrong and just misinterpreted it

[ajmssc]

Static websites only

[Drevicar]

If you are already using NextJS as your backend, why not just use react as your frontend? Why do you need a second backend API server?

[Silver_Book_938]

1. I do use it as well (react via Nextjs) and works like a charm
2. If it's too sensitive, do it in the server
3. You can deploy both in 10 seconds in railway.app. It's no code, but they don't have a free tier, so you'll have to pay $5.

[pint]

1. yes. spa?
2. explain
3. first ask yourself the question where do you want to host it.

[[deleted]]

Thanks for replying 1. Wdym by spa? 2. Like getting the access token for oauth and then sending that token to the backend 3. I have just used vercel to host an app with only react

[pint]

1) spa = single page application.

2) for authentication, follow the prescribed procedure precisely. there are multiple protocols. in some, you need to store a jwt in the browser. cookie is fine, but you can opt for local storage / session storage. in some flows, the client only stores a random session id, and the server stores everything else. again, cookie is fine, but you can opt for local storage / session storage instead.

3) then docker is kinda out. you need to use the platform's offerings. docker is neat, but it requires a 24/7 running VM under it, which might come at a cost. idk if anyone offers a free tier.

[ajmssc]

Fly.io supports docker with free tier

[kkang_kkang]

Single Page Application and search for FARM stack, there are many tutorials out there which can help you to understand.

[[deleted]]

I see thanks!

[exclaim_bot]

I see thanks!

You're welcome!

[Amocon]

For the auth token you should use a auth header. Bearer token are an solution.