Why ReactJS app deployed on GitHub Pages displays a blank page ?

[matdev]

Select Topic Area

Question

Body

I've developed a react app that runs fine locally. I'm now trying to deploy it using GitHub Pages.

I've followed the instructions, but I get a blank page, and I can see several 404 errors in the logs.

Here is the homepage property I've added to the project's package.json:

"private": false,
"homepage": "https://myusername.github.io/matdev/myreponame",

I've added this to scripts:

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

And I run this command to deploy the app:
npm run deploy

Can you help me fixing this please ?

[SmashedFrenzy16]

Hi @matdev

First of all, you need to add your root path to the basename prop of BrowserRouter. If you are not using BrowserRouter, add the following:

import BrowserRouter from 'react-router-dom/BrowserRouter'

ReactDOM.render((
   <BrowserRouter basename={process.env.PUBLIC_URL}>
     <App />
   </BrowserRouter>
), ...)

Also update the route to your home/firstwebapp component (if you have one) from:

<Route exact path='/firstwebapp' render= ... />} />

to:

<Route exact path='/' render= ... />} />

Hope this helps!

[matdev]

Thanks for the help. I've added the basename={process.env.PUBLIC_URL} to my BrowserRouter but it still doesn't work.
My base Route looks like this:
<Route path='/' element={<CoinsTable coins={coins}/>}/>

In the error logs from live version, I see:
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()

Also, when I run the app locally I notice the warning;
ReactDOM.render is no longer supported in React 18. Use createRoot instead

Could it be related ?

[SmashedFrenzy16]

For the first issue, you might want to check out this: https://stackoverflow.com/questions/59943549/my-node-js-web-app-dont-recognize-my-manifest-json

For the second issue, change your index.js file to:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Hope this helps!

[gass-git]

This solved my issue! Thanks @SmashedFrenzy16

I was seeing a blank page with the URL of my Github site as a big blue title.

Just leaving this info in case someone else is experiencing the same thing.

[mishal-adnan]

This worked for me as well. Thanks a ton, because I have been trying to fix this issue for 3 days now.

[anthonyytran]

Thank you very much! The only solution that has worked for me. Followed exact steps in documentation but this is what finally fixed it for me.

[matdev]

Removing the repeated github username from the homepage url fixed the problem:

Correct value for "homepage":

"homepage": "https://myusername.github.io/myreponame"

[khushigupta345]

Can you please help me I face same issue and where repeated username are used I doesn't understand this

[Theshlock]

https://myusername.github.io/matdev/myreponame
https://myusername.github.io/myreponame