Can’t access my netlify site / netlify site won’t load

Support
,
1

Can someone help me @@. (Sorry for my bad English)

The backend works really and it was deployed in render.com, but when I deployed my frontend in Netlify, I met this problem. When I try to visit my site: https://64a47ceb7ccdee0008aa98cb--relaxed-fudge-7b539b.netlify.app/

It just loads permanently. It deployed successfully: in my app when I follow the link …app/ it will redirect me to …app/login, and it works well. I check my console, and of course, I retrieve an object with a null value because I haven’t logged in with any Google account (which will send me back the information about the user like ID). But it doesn’t have any bugs or errors, …

I have checked the same problem: Can't access my netlify site / netlify site won't load. And I can’t find any clue @@.

Please help me @@.

2

@viethoang This error is unrelated to hosting on Netlify, so you should debug your project locally and determine why it’s getting stuck on an animated loader.

If I retrieve your project and run npm run build then npx serve -s dist I see precisely the same thing as on Netlify.

I also see the same thing when running npm run dev.

3

Thanks for answering my problem.

Strangely, after deploying the server to render.com, and I run the client locally and it still works fine. Including storing in mongodb, or sending a message from the server (made by apollo - graphql) to appear on the client (like admin updating the latest version and notifying everyone) and the message. This report is also saved on mongodb.

I mean everything is fine @@. I don’t do any animation on the client side.

Maybe I’ll try deploying on another platform.

4

@viethoang Did you try running npm run build and then serving with npx serve -s dist?

I’ve barely looked at the code of your application, but I found it doing things like:

if (!localStorage.getItem('accessToken')) {
  console.log( 'NAVIGATE TO LOGIN' )
  return <Navigate to='/login' />;
}

It’s possible that you have things happening that are based off having a particular localStorage value, which you do have locally against your localhost, and thus things work for you.

However when you’re deploying elsewhere, or for example when I run it locally, the value it expects doesn’t yet exist and the app never progresses past the loader.

You should try using your developer tools to clear your localstorage etc and see if it still works for you locally.

Scratch that, I can actually see where it’s occurring now, and why you’re getting stuck on the load screen.

The issue is in your AuthProvider.jsx, you are only clearing the loading state when there is a firebase user & it has an id.

If the firebase user is null, (which it is for me), then you’re trying to direct to the /login route, but you aren’t clearing the loader.

Change:

setUser({});
localStorage.clear();
navigate('/login');

To:

setUser({});
localStorage.clear();
navigate('/login');
setIsLoading(false);