BE/FE Communication
Hey.
I have a project setup with BE(DRF) and my FE(React Vite). I managed to get them both to build and run separately, but for I can't seem to get them to communicate with each other.
FE is running on port 80, and be on port 8000.
Running locally works.
What I've tried so far:
I've added the PORT variable and set it to 8000 on my DRF and 80 on my FE.
I've updated the env variables on my FE to instead point to the internal url to my backend: VITE_BACKEND_URL=https://backend.railway.internal:8000
BE logs says absolutely nothing, stays quiet. No deploy logs updating.
When communicating between two services within the same project, am I not supposed to be able to use this internal url? Am I misunderstanding something here? First time using Railway.
I'm sure my description is ver vague for troubleshooting this so just let me know whatever you need. It's a private repo rn, but can invite to it.
Solution:Jump to solution
and for potentially helping future developers with similar/same issue.
TLDR:
1. React Vite is client side, so you will need to use a public network url to access your backend when doing API calls....
48 Replies
Project ID:
a10da84f-4e0c-4d54-a745-240ce1a24b59a10da84f-4e0c-4d54-a745-240ce1a24b59
You're unable to connect over both internet and private networking, correct?
going forward can I ask that you use the full word, frontend and backend, I had to read this like 3 times to understand what you meant.
and I don't think I fully understand it still, are you trying to call the backend from the frontend with the private domain?
Absolutely.
Correct. I'm trying to make API calls from my frontend to the backend. For local development I previously used localhost:3001 for my frontend, and localhost:8000 for my backend.
I then updated my frontend environment to instead use
backend.railway.internal:8000 as the base for any API calls instead of localhost:8000, but the request times out and no events are logged at all in my backend deployment logs.
I've attached my deployment logs, env variables and backend networking settings if its any help.
Messed up the images format. sec.
you said you have a react app done with vite
correct
that means it's a client side rendered app, aka the clients browser makes the api call, for this your frontend would need to use the public backend domain.
wouldn't be much of a private network if anyone's browser could use those private domains
and please don't run django in development mode, use gunicorn
Alright. I'll update it to the backends public url then
and get back to you
this too!
Is that a requirement for it to run/work at all?
running a development server is more resource demanding and far less stable, it's just not something you should do
Ah yeah. I'm just testing the platform out right now. This will not be the final deployment.
Speaking of that though - are there any templates for using django with gunicorn available for railway? Iv'e seen that you've helped share a couple of other setups previously for other environments
https://railway.app/template/GB6Eki
but you would specifically want this https://github.com/railwayapp-templates/django/blob/main/railway.json
of course change
mysite for whatever is applicable to youThat's great. Thank you for that. I'm currently redeploying with the public url
ok, no luck with the public network url. same issue as previously, any API requests sent to the backend.
send the public url please
running your app with gunicorn will fix this
Alright, on it.
you could get it to work with the dev server, but im not gonna tell you how to do something the wrong way 🤣
haha, fair
Alright. The public network url works now. Sent a request from my frontend but still dead silent from the backend - no activity there. Not sure what I am forgetting. I'll compare with the django template settings to see if I missed something.
what response do you get when you make api calls to the backend?
It's basically just an error response. Going to improve the error handling to see if I can get it to show more accurately. Right now its a net::ERROR
hey at least its not a 503
Very true! At least it is alive. I still feel like there must be some setting I've missed, just can't figure it out. PORT is set to 8000 on the backend with variables. Do I not specify the port when sending requests anymore?
Like the url right now is https://backend-production-1cf6.up.railway.app/ should I exclude the :8000?
yes, you can only access the app externally from port 443
and the error is pretty self explanatory
Yeah, will take care of that too.
Just want to see them 'communicate' even if the backend rejects it
if you want your backend to print access logs you need to enable that with gunicorn
https://docs.gunicorn.org/en/stable/settings.html#logging
add
--access-logfile - to your start commandRight. And the 443, I don't need to include that either right, I'll just exclude the port all together?
in my api requests from the frontend
correct, you are using https so port 443 is implied
Great. The "PORT" env variable that I set to 8000 would not impact this right?
on the backend.
gunicorn listens on PORT by default, so you could actually remove it since railway will set a PORT if you dont
Alright. Removed the port, added allowed hosts and logging for gunicorn. still no response to my actions on the frontend, gmm
hmm
what error do you get on the frontend?
Ok, it's not a railway issue. I tested from Thunderclient now and just sent a random API request and it does respond.
Ok, it's not a railway issue.haha i could have told you that 😆
I mean, it's not a misconfiguration in Railway on my end hehe. I was thinking I might have misunderstood it. Somehow the google login fails, or rather it fails half of the authentication after receiving the authentication code.
not sure what differs between this and my local development though, since it works there.
Wooo, communication!
One more re-deploy now after fixing some CORS-issues and we might be good! (except all the other 1k errors and security settings) lol.
and dont run in debug when you have it working lol
Oh yeah, something I'd like to ask.
Since I now have a public network url for my backend, how do I keep that inaccessible for other users in the future? I obviously don't want people to be able to open the admin panel for example, or even try and open the url.
passwords and api keys
Solution
and for potentially helping future developers with similar/same issue.
TLDR:
1. React Vite is client side, so you will need to use a public network url to access your backend when doing API calls.
2. Set up django with gunicorn
3. you dont necessarily need the "PORT" variable set on the backend, since gunicorn handles it.
And finally my resolution for the 'communication' between them was that I hadn't added the backend public url as an authorized redirect url in the Google Console. So my authentication stopped half way.
Thanks for all the help @Brody 🙂
no problem! 🙂