React App on Github Pages is Blank and Returns Error 404 #22392
-
Hi everyone, I deployed a react app to Github Pages and apparently it was successful, but the site shows only a blank white page. The console says ‘Failed to load resource: the server responded with a status of 404 ()’. Here is my repo: GitHub - toyosicodes/memory-game. The link to the site itself is GitHub - toyosicodes/memory-game. I’d appreciate any help. I can’t figure out what I’m doing wrong. I’ve spent hours reading topics about this issue and applied the recommended solutions, but they haven’t worked in my case. |
Beta Was this translation helpful? Give feedback.
Replies: 11 comments 4 replies
-
GitHub pages only supports static sites, it does not run |
Beta Was this translation helpful? Give feedback.
-
I’m sorry, I don’t understand this |
Beta Was this translation helpful? Give feedback.
-
GitHub pages only serves files that are committed to the repository, any files that are not committed (ex: node_modules, dist) will not be available on the site and will cause a 404 not found. |
Beta Was this translation helpful? Give feedback.
-
Thanks for the explanation. So how can I fix the problem? Because there has to be a way to commit node_modules, right? |
Beta Was this translation helpful? Give feedback.
-
Upon closer inspection it seems that the issue is caused by the links to your sources. The node_modules isn’t the problem. Take this link for example:
When you deploy the site to GitHub pages it serves it at
The correct link would be:
Any of these changes would correct the url to:
|
Beta Was this translation helpful? Give feedback.
-
I really appreciate you helping me. I have to confess, though, that I have no idea how to make the changes you’re suggesting. If you could guide me on that I’d be really grateful. I forgot to add that I’m a beginner when I originally wrote the topic 😅 |
Beta Was this translation helpful? Give feedback.
-
The
toyosicodes/memory-game/blob/c8b97d93ee3da3507de487be88ad980290a2fac1/public/index.html#L5 After building, the link changes to The |
Beta Was this translation helpful? Give feedback.
-
Hi, Im also facing same error my output pages blank |
Beta Was this translation helpful? Give feedback.
-
For anyone landing here with this problem in their Create React App: You need to add the If you don't do this, the references to your static files ( Documentation: https://create-react-app.dev/docs/deployment/#step-1-add-homepage-to-packagejson |
Beta Was this translation helpful? Give feedback.
-
Hi im facing the same issue. This is my repo |
Beta Was this translation helpful? Give feedback.
-
for those who are wondering, you can use React to create a static site only but you need to deploy it first and make sure the build output is in the correct place, then GitHub Pages will start hosting it actually if you know much of advanced, you can deploy a full stack application but the backend service will be in a different hosting site, this is also true if you only want to develop a UI for, say, a GitHub App using its own API, the frontend will be done in React and be hosted in Pages these are the steps from Copilot, |
Beta Was this translation helpful? Give feedback.
GitHub pages only supports static sites, it does not run
npm start