Blank Page on Github Pages React App Start

Question

I have a react app that runs perfectly on the local port, but when I upload it to github pages through npm I get nothing but a blank screen.

Failed to load resource: the server responded with a status of 404 ()

I receive many 404 errors like these with no clear source. the page built fine, but it doesnt render anything.

heartlocket.github.io/IF

Answer 1

The problem is that you reference resources(js, css) using absolute urls, with site route as base url, like /static/js/main.b9eb92d4.chunk.js, but your gh-pages actually published to subdirectory /IF/, so real location of your resources is like /IF/static/js/main.b9eb92d4.chunk.js

You can fix it several ways:

• change all links to relative - i.e. remove leading slash character, like static/js/main.b9eb92d4.chunk.js
• add directory to your absolute urls - like /IF/static/js/main.b9eb92d4.chunk.js