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

42 messages · Page 1 of 1 (latest)

raven ruin
#

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

GitHub
GitHub - B1ckb0x/frontend

Contribute to B1ckb0x/frontend development by creating an account on GitHub.

React App

Web site created using create-react-app

GitHub
My deployed react app shows a blank white screen after loading init...

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 whi...

jagged tinselBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

tribal onyx
raven ruin
tribal onyx
#

@raven ruin by seeing the code for a min, Are you handling errors when the toDoList is empty?

#

when there are no items in it?

raven ruin
#

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

tribal onyx
#

have you added your env to vercel?

raven ruin
#

I did not have a env file in the directory for the code

tribal onyx
#

how are you accessing your database?

raven ruin
#

through a proxy connected to a django backend which is connected to a postgresql server

tribal onyx
#

How have you deployed your django backend

#

you are using axios to make request

#

to backend

raven ruin
#

i deployed it on render

#

yes

tribal onyx
raven ruin
#

sorry for the bad question, where would i put this in the code

#

This is how i connect to the backend:

image.png
#

So when i run everything in development it works fine but the issue is in production

tribal onyx
#

I've already seen

tribal onyx
#

you must configure things right

#

the url is not even accessible by the browser, how do you expect it to work

raven ruin
#

which url

tribal onyx
#

/api/todos

raven ruin
#

It does work:

image.png
tribal onyx
#

You're making request to this url

#

You should make request to the render url then

raven ruin
#

sorry, i didn't know that was going on, How do i make request to the render url instead

tribal onyx
#

here, before first /, add the render deployment url

image.png
raven ruin
#

Will try redeployment now

tribal onyx
#

sure

raven ruin
#

Thank you so much for the assistance @tribal onyx . 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

tribal onyx
tribal onyx