Code is deployed, but page is blank

[adjieindrawan]

Useful package, i already follow you instruction. But i got blank page

node -v
v9.7.1

npm -v
6.0.1

create-react-app --version
1.5.2

[gitname]

Hi @indrawanadjie, thanks for providing your Node.js, NPM, and CRA version numbers. I haven't tested the process with such recent versions of any of those things.

Before I setup a system with those version in an attempt to reproduce the behavior you reported, will you post (1) the contents of your package.json file and (2) a copy/paste of the messages that appear on the console when you follow the react-gh-pages instructions?

I would like to examine both of those things, to look for clues as to what the underlying problem is.

[adjieindrawan]

Hi @gitname thanks for your reply.

1. Here my package.json:

   {
   "name": "pimol_fb",
   "version": "0.1.0",
   "private": true,
   "homepage": "https://fit-dev.github.io/pimol-fb-react/",
   "dependencies": {
   "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
   "@fortawesome/free-brands-svg-icons": "^5.1.0-11",
   "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
   "@fortawesome/react-fontawesome": "^0.1.0-10",
   "animate.css": "^3.6.1",
   "bootstrap": "^4.1.1",
   "hover.css": "^2.3.1",
   "react": "^16.3.2",
   "react-dom": "^16.3.2",
   "react-rangeslider": "^2.2.0",
   "react-router": "^4.2.0",
   "react-router-dom": "^4.2.2",
   "react-scripts": "1.1.4",
   "react-slick": "^0.23.1",
   "reactstrap": "^6.0.1",
   "slick-carousel": "^1.8.1",
   "webfontloader": "^1.6.28",
   "wowjs": "^1.1.3"
   },
   "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test --env=jsdom",
   "eject": "react-scripts eject",
   "lint": "eslint src/",
   "lint:fix": "eslint src/ --fix",
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build"
   },
   "devDependencies": {
   "babel-eslint": "^8.2.3",
   "eslint": "^4.19.1",
   "eslint-config-react-app": "^2.1.0",
   "eslint-plugin-flowtype": "^2.46.3",
   "eslint-plugin-import": "^2.11.0",
   "eslint-plugin-jsx-a11y": "^6.0.3",
   "eslint-plugin-prettier": "^2.6.0",
   "eslint-plugin-react": "^7.7.0",
   "gh-pages": "^1.1.0",
   "prettier": "1.12.1"
   }
   }

2. Console log only show: Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2

Result only display favicon and title on top. Site link here: https://fit-dev.github.io/pimol-fb-react/

Thank you..

[ghost]

Maybe it won't work if you have it private ?

[gitname]

Hi @indrawanadjie,

Thanks for providing all the information I requested.

I visited the URL you provided (labeled "site link" in your previous comment) and examined it using the React Developer Tools extension for Google Chrome.

I saw that, in addition to the Favicon and Page Title, there are, indeed, some React elements on the page. One is shown in the screenshot below. For that reason, I think the deployment process worked (i.e. GitHub Pages is serving a built version of your app).

Here's what I think is happening:

I think there is something in your app, itself, that is causing it to not appear when hosted on GitHub Pages.

For example, I noticed your app uses React Router.

GitHub Pages serves your app from a non-root folder (i.e. username.github.io/repo-name/) as opposed to from a root folder (i.e. username.github.io/).

I wonder whether React Router does not consider your app's URL as a match for any of the routes defined in your app. For example, if you define a route using <Route exact path="/" component={SomeComponent} />, React Router will see that / and /repo-name/ do not match exactly and will, thus, not render the component.

I recommend you look into the basename prop of the BrowserRouter component.

[gitname]

Hi @dangpro-1210, the deployment process has worked for me with both public and private GitHub repos. I appreciate you bringing up that detail, though, just in case.

[gitname]

I will close this Issue because I think the issue lies in the app's configuration of React Router, not in the deployment process.

@indrawanadjie, did you add the basename prop to the BrowserRouter component? If so, did that fix the "Page is blank" issue? As an experiment, I suggest you deploy an app that lacks React Router, observe the behavior of the app (i.e. check whether the page is blank), then add React Router to the app, deploy the app again, and observe the new behavior of the app (i.e. check whether the page is blank).

[MohammedFaragallah]

same here for a few minutes then it loaded with my 404 after heading home works fine I think adding basename prop to the BrowserRouter will solve landing on 404. thanks @gitname

[rafalfaro18]

In my case it was a typo on the homepage URI on package.json make sure to copy the URI from the browser to be sure that it's correct.

[tylerreece22]

Solved it for me too! Woohoo! Thank you!

[Tobibur]

Yes!! Thank you for this! It worked for me with the basename prop of the BrowserRouter component. 😄

[Tirthnp]

Adding BrowserRouter basename ="/directory-name"> worked for me. Thank You!!

[kumar303]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

[nuri-engin]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

That fixed my issue as well. Thanks.

[frontendjorge]

</BrowserRouter>

Well. Not always works. In my case I preferred to put the basename with the name or variable of subfolder. With your solution when you reload the webpage takes de last path and add the same again path.

[cadenzah]

All users using Github Page to deploy their react-router based app should read this issue!

[bonniesimon]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

This fixed my issue, Thanks a lot💛

[manjunkoh]

I dont know if anyone else is still having this issue, but I was having trouble hosting my website on /docs folder and i made the env.public part global and it somehow worked for me. like this: {${process.env.PUBLIC_URL}/}

Also if anyone is doing the same way as I am like hosting or debugging on docs folder you gotta follow the exact steps: 1) disable github pages to none 2) empty the docs folder then push 3) enable github pages using docs again 4) build on docs again then push

doing these worked for me.

[jAbusama]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

This fixed my issue, Thanks a lot💛

This works for me. It helps me to get out to this issue. Thanks Bro! @bonniesimon

[KrenarMuzaqi]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

That fixed my issue as well. Thanks.

Can you help me, because i have same problem, i have only one path and my app shows blank page, where should i put this : <BrowserRouter basename={window.location.pathname || ''}>

[larissarodr]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

Awesome. This works for me as well. Thank you!

[rohan8660]

I didnt use any router , but it still is showing blank,

site:address 👍 https://rohan8660.github.io/IEEE_GIT-Website-Contest-Let-s_React/

[EngrEli]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

I have different Routes but this seems to work for me as well. Thank you good sir!! I didn't expect that using react-router would cause a problem in deployment.

[azeemaleem149]

@kumar303 Thanks My Issue Resolved Successfully after trying 12 hours. <BrowserRouter basename={window.location.pathname || ''}>

   <App />
</BrowserRouter>

[soheil-74]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

this's great! tnx a lot bro...

[vehbirestelica]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

THANKSSSSSSSSSS

[limunosekai]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

Wow!!!!!!!!! Thanks a lot. It works finally

[kadirretir]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

I have more than one paths i guess that's why it doesn't work for me. How should i apply this code?

[Muhammed-Rahif]

Working fine now... Hoooo.... 🥳

[danishalikhan688]

Since my app only has one path, I was able to get it working for both GitHub pages and local development (http://localhost:3000/) like this:

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

Awesome. This works for me as well. Thank you!

thank you so much it works for me bundle of thanks , i have use this basename attribute as well as add homepage attribute in your package.json file the deployed website url in homepage than create build it works for me

[danishalikhan688]

Add "basename" attribute in BrowserRouter like this <BrowserRouter basename={window.location.pathname || ''}>

if still it does not work for than add homepage attribute in your package.JSON file "homepage":"https://xyz.com/", hopefully it will work

[shubhamjha25]

I was also facing the same problem while deploying Blogify to gh-pages.

Code was deployed and but the link when opened showed white blank page. I was able to see the favicon and app-name on the browser tab.

The homepage was also set correctly "homepage": "https://shubhamjha25github.io/Blogify/"

Also, I was using react-router extensively and had multiple paths like /about, /login, /register, /blogs etc.

After scraping the internet, did this little change in the BrowserRouter component

ReactDOM.render(
  <React.StrictMode>
        <BrowserRouter basename={process.env.PUBLIC_URL}>
            <App />
        </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

i.e., added basename={process.env.PUBLIC_URL} prop to the BrowserRouter component. It's working fine now.

FYI : process.env.PUBLIC_URL is a part of the node.js library and is a dynamically generated URL that changes based on what development mode you are in, whether you are working on your app locally, or on an actual production server like gh-pages.

[lcorn26]

THANK YOU this needs to be somewhere more visable

[Wasabi95]

Do you know how to preview a react project on GitHub pages? I follow the instructions here https://github.com/gitname/react-gh-pages but it did not work

[sujanmongar]

I added basename and it's not working in my case. Please need help

[ShujaShah]

<BrowserRouter basename={window.location.pathname || ''}>
  <Route exact path="/" component={Index} />
</BrowserRouter>

This one worked for me thanks :)``

[LeNikki]

This worked for me. I have multiple pages too! Thank you so much!!

[NisargDeveloper]

Hi @indrawanadjie,

Thanks for providing all the information I requested.

I visited the URL you provided (labeled "site link" in your previous comment) and examined it using the React Developer Tools extension for Google Chrome.

I saw that, in addition to the Favicon and Page Title, there are, indeed, some React elements on the page. One is shown in the screenshot below. For that reason, I think the deployment process worked (i.e. GitHub Pages is serving a built version of your app).

Here's what I think is happening:

I think there is something in your app, itself, that is causing it to not appear when hosted on GitHub Pages.

For example, I noticed your app uses React Router.

GitHub Pages serves your app from a non-root folder (i.e. username.github.io/repo-name/) as opposed to from a root folder (i.e. username.github.io/).

I wonder whether React Router does not consider your app's URL as a match for any of the routes defined in your app. For example, if you define a route using <Route exact path="/" component={SomeComponent} />, React Router will see that / and /repo-name/ do not match exactly and will, thus, not render the component.

I recommend you look into the basename prop of the BrowserRouter component.

Thanks It worked for me!

[teleperformance923]

Maybe it won't work if you have it private ? thank you it works