Hi,
I have an issue, my website seems to build and deploy fine but when I visit it I received a blank screen. When I inspect element I receive 4 errors stating ‘Failed to load resource: the server responded with a status of 404 ()’. I understand that the page isn’t loading because it can’t be found but I don’t understand why it can’t be found.
Website: https://brave-easley-748991.netlify.app
GitHub: GitHub - kairoberts/react_portfolio
Hi @kairob, welcome to the Netlify Community 
I’m not seeing any 404 errors, just a blank page— opening the Dev Tools confirms that the request for the HTML returned with a 200 OK. What does appear to be failing to load are your JS and CSS files, though.
Since I don’t know what your build environment looks like I would double-check that the correct directory is being deployed and that any build artifacts are generated in the directory that will be deployed.
One way to check that things are where they’re supposed to be is visit the build page for your most recently deploy and click the download button next to the timestamp. This will download the directory that Netlify deployed so you can see what was actually pushed live.
Hope this helps, definitely feel free to respond with more questions if you have them.
Hi, @kairob. I just wanted to add a bit of detail to what @noelforte (because I can see the deployed files and he cannot).
This is an example URL your site is trying to find the files at:
https://brave-easley-748991.netlify.app/react_portfolio/static/css/2.92bfd6b7.chunk.css
However, the actual URL is:
https://brave-easley-748991.netlify.app/static/css/2.92bfd6b7.chunk.css
For some reason, your build is adding a react_portfolio to the file paths when it shouldn’t be there. This is from the HTML:
<link href="/react_portfolio/static/css/2.92bfd6b7.chunk.css" rel="stylesheet">
The correct href is this:
<link href="/static/css/2.92bfd6b7.chunk.css" rel="stylesheet">
If you can get this corrected with the site build, this will resolve the issue.
@noelforte @Luke You were right, I had stupidly left “homepage” : “https://www.kairoberts.github.io/react_portfolio” inside my package.json because I tried to deploy through gh-pages originally, so that is why it was adding /react_portfolio/ within the build folder. Everything is now working as intended, cheers for the help gents I appreciate it.
good day sirs, please I have a react app hosted on Netlify with the backend hosted on Heroku.it works well locally but on Netlify I get Failed to load resource: the server responded with a status of 404 ()
for my posts and all authentications. Here is the link to my site,
Thank you
I think you have the posts endpoint on Heroku. In that case, you’d have to use Heroku URL in place of /posts.
yes sir but how? because in my frontend code, i usedthe Heroku link with axios to get the data which is working locally well
I tried your repo, but that doesn’t seem to be the case. I still get the same URL even locally:
You need to make a request to your Heroku backend, but you’re making a request relative to your website.
Alternatively, you could setup a rewrite like:
/posts https://memory-lane2021.herokuapp.com/posts 200!
You need to add that your _redirects file and remove the current redirect rule as I don’t think it’s doing anything.
i have put /posts https://memory-lane2021.herokuapp.com/posts 200! as the new redirect rule, still getting the same error
You need to put the _redirects file in the public folder.
Thank you very much sir very very much for your support. now what do I put after the /posts/ so that it fetches a single post
That’s up to your Heroku backend and not something controlled by Netlify. You might have to configure something there.
okay sir. I have a login and signup form and i thought i will just add their routes like so in the _redirects file.
/posts/ https://memory-lane2021.herokuapp.com/posts/:id 200!
/user/ https://memory-lane2021.herokuapp.com/user/login 200!
/user/ https://memory-lane2021.herokuapp.com/user/signup 200!
but unfortunately i get the 404 when i try to login or sign up.
I think this guide will help you configure this correctly:
good day sir and happy new year . i have looked at the documentation and i am able to get data, sign in using google auth and delete data . but somehow I still get the error when i try to sign in with my heroku server
Did you check if the error is coming from Heroku or Netlify?
the error is coming from netlify…
Failed to load resource: the server responded with a status of 404 () user/login:1
the google auth is working just fine
I don’t think the redirects are setup correctly.
I can see that you’re forwarding the request from /auth/ to the /user/login on Heroku. Then, you’re applying the same rule to Signup and that won’t work. Plus, I’m not seeing any rule for /user/login URL.
Are you sure you’ve done the setup correctly? Could you share your repo?
Thank you very much for your time. here is a link to the repository
the service is o the main branch while the client is on the master branch
Hi @MeryAmun
I see in public/_redirects the following lines
https://memory-lane-2021.netlify.app/auth/* https://memory-lane2021.herokuapp.com/user/login 200!
https://memory-lane-2021.netlify.app/auth/* https://memory-lane2021.herokuapp.com/user/signup 200!
The issue here is /auth/* will always go to https://memory-lane2021.herokuapp.com/user/login and never https://memory-lane2021.herokuapp.com/user/signup because you are using a wildcard (* matches anything.) You would need something like
/auth/login https://memory-lane2021.herokuapp.com/user/login 200!
/auth/signup https://memory-lane2021.herokuapp.com/user/signup 200!