Next.js Discord

Discord Forum

My deployed react app shows a blank white screen after loading initially via Vercel

Answered
Large garden bumble bee posted this in #help-forum
Open in Discord
Large garden bumble beeOP
Summary
I'm trying to work with Vercel. I deployed a React app, and I see the website in Vercel preview menu. However, when I load the website, it loads the page initially, and then a blank white screen appears.

GitHub Repository: https://github.com/B1ckb0x/frontend
Website link: https://frontend-ten-swart-80.vercel.app/

I have tried using the homepage:'.' and many more online discusiion, all to no avail. Any assistance in resolving this would be greatly appreciated. Thank you.

Vercel Github Discussion for more context: https://github.com/orgs/vercel/discussions/6954
Answered by Anay-208
here, before first /, add the render deployment url
View full answer

40 Replies

Large garden bumble beeOP
Sorry, I made it public now: https://github.com/B1ckb0x/frontend
Anay-208
@Large garden bumble bee by seeing the code for a min, Are you handling errors when the toDoList is empty?
when there are no items in it?
Large garden bumble beeOP
I'm not handling any error, i setup a database that currently as a few todos
I'm new to react so just testing everthing out not sure how to implement error handling
@Large garden bumble bee I'm not handling any error, i setup a database that currently as a few todos
Anay-208
And In production, the database has most likely returned null
have you added your env to vercel?
Large garden bumble beeOP
I did not have a env file in the directory for the code
Anay-208
how are you accessing your database?
Large garden bumble beeOP
through a proxy connected to a django backend which is connected to a postgresql server
Anay-208
How have you deployed your django backend
you are using axios to make request
to backend
Large garden bumble beeOP
i deployed it on render
yes
@Large garden bumble bee i deployed it on render
Anay-208
So put the url of the backend in fetch
Large garden bumble beeOP
sorry for the bad question, where would i put this in the code
This is how i connect to the backend:
So when i run everything in development it works fine but the issue is in production
Anay-208
I've already seen
you must configure things right
the url is not even accessible by the browser, how do you expect it to work
Large garden bumble beeOP
which url
Anay-208
/api/todos
Large garden bumble beeOP
It does work:
You're making request to this url
You should make request to the render url then
Large garden bumble beeOP
sorry, i didn't know that was going on, How do i make request to the render url instead
Anay-208
here, before first /, add the render deployment url
Answer
Large garden bumble beeOP
Will try redeployment now
Anay-208
sure
Large garden bumble beeOP
Thank you so much for the assistance @Anay-208 . I really appreciate it been on this since 2 days
What would you recommend rather than having to insert the url for each request type