Flask + React deployment
I have a flask + react app that is running locally. How would I deploy it to Railway? I tried to have 2 services, one for the frontend and the other for the backend, but the frontend was unable to fetch data from the backend returning with: unexpected token < JSON. The backend is working and I tested it via postman.
Projet id: c6894929-c040-4842-8c83-4516d57a14fe
55 Replies
I tried to have 2 services, one for frontend the other for backendthat is the correct way to go about it, so lets dig into why it wasnt working can you share your repo? it would help tremendously
They are private. Can I share them ?
https://github.com/IssaKass/financial-app-backend
https://github.com/IssaKass/financial-app-frontend
would you be okay adding me?
Yes
brody192
How to add you?
haha i dont know, ive never added anyone to a private repo, i dont even think i have a private repo
though thats not something a quick google search cant solve!
I will change them to public
that works too
I changed them
okay backend looks good
may i ask if you followed any tutorials for the frontend stuff?
Yes, I have followed a react course in scrimba and made many frontend projects
link me it please
Scrimba
React Tutorial: Learn React JS - Free 11-Hour Course
The ultimate React 101 - the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects.
the proxy stuff in the vite.config.js file, does that guide tell you to do that?
No, but have seen it in another place, couldn't remember
In development mode it works, and when I build and preview, also works
Also in deployment, when fetching data, the response is Ok but getting the console error
And the data is not displayed
well I'll say that's is not a good way to do it, I have seen someone else very recently do it the exact same way and they had issues too
can you show me a screenshot of your railway project?
Try to fetch the data, and see the result from Network tab
no sorry I meant the railway project, on the railway website, not your project 🤣
Ok
please remove the brackets from the service names, they will cause issues down the line
Done this task
new screenshot please
perfect
I tried to fetch data and worked
we want to get rid of that proxy stuff though, so let's do that now
Ok
so remove the proxy stuff from the config file
I will open the laptop, a minute please
Ok
But removing proxy won't work for development mode
on the frontend railway service add a service variable
VITE_API_URL=https://${{Backend.RAILWAY_PUBLIC_DOMAIN}}
this will dynamically render as the backend's domain.
in code you would now want to use that variable, so here https://github.com/IssaKass/financial-app-frontend/blob/main/src/App.jsx#L9
the fetch call would use import.meta.env.VITE_API_URLIn dev mode, I am accessing the local flask servwr
you dont need a proxy for local development work
i dont even know why thats a feature
The proxy is set to access flask via /API, so if you have a flask endpoint to /projects, you can access it via /API/projects
but thats simply not needed, instead you would do
import.meta.env.VITE_API_URL + /projects/ in the fetch callThis would work?
yes, why wouldn’t it, locally that
VITE_API_URL variable is read from this file https://github.com/IssaKass/financial-app-frontend/blob/main/.env.development#L2Can you show me the final vite config file?
And I have .env.development and .env.production, should I remove the second one?
yeah you can remove https://github.com/IssaKass/financial-app-frontend/blob/main/.env.production
since your variables for production are set in the railway service variables tab
THANK YOU VERY MUCH 😊
all working now?
Yes
awsome!
Can I ask another question ❓
of course
How to improve the backend response time
It takes 250ms, is it a good responding time, or it is too long
thats not bad at all, where abouts in the world are you located, since the railway deployment is made in us-west
I am from Lebanon, is it better to change the deployment location?
changing the deployment location is a pro feature, but 250ms is pretty fine for a hobby site in my opinion
Thanks
no problem!