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..

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!!