My react app appears blank after successfully deploying to github-pages

user_13553353 0
Viewed 922

I'm trying to deploy a react app without any routing functionality. Just a single page app to github pages and everything worked successfully. I did'nt get any error while deploying but after deployment, the app is blank and when i check my console i see the following error

    GET https://vicktor61.github.io/VickTor61/indecision-sniffle.git/static/css/main.aea680b0.chunk.css net::ERR_ABORTED 404
vicktor61.github.io/:1 GET https://vicktor61.github.io/VickTor61/indecision-sniffle.git/static/js/2.ed9a5867.chunk.js net::ERR_ABORTED 404
vicktor61.github.io/:1 GET https://vicktor61.github.io/VickTor61/indecision-sniffle.git/static/js/main.0913b291.chunk.js net::ERR_ABORTED 404
/VickTor61/indecision-sniffle.git/manifest.json:1 GET https://vicktor61.github.io/VickTor61/indecision-sniffle.git/manifest.json 404
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

I understand that the issue probably is because the gh-pages server could not get my files. But i still don't know why. please i will really appreciate a well detailed response.

This is my app link https://vicktor61.github.io/indecision-sniffle/

and this is my package.json file

{
  "homepage": "https://github.com/VickTor61/indecision-sniffle.git",
  "name": "indecision-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "gh-pages": "^3.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-modal": "^3.14.3",
    "react-scripts": "4.0.3",
    "uniqid": "^5.3.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "yarn run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

And this is my github page where the whole app is hosted https://github.com/VickTor61/indecision-sniffle/

github-pages reactjs google-chrome github
2 Answers

As per the official docs, setting the homepage setting as follows in your package.json should fix the issue:

"homepage": ".",

In the docs it is stated:

This will make sure that all the asset paths are relative to index.html. You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.

user_48588180

Guessing by the errors on the github page, the page is trying to load files which can't be found. I would say your homepage is wrong. It shouldn't be

"homepage": "https://github.com/VickTor61/indecision-sniffle.git",

it should be

"homepage": "https://vicktor61.github.io/indecision-sniffle",

as the page tries to load for example this file

https://vicktor61.github.io/VickTor61/indecision-sniffle.git/static/css/main.aea680b0.chunk.css

while it should be this file

https://vicktor61.github.io/indecision-sniffle/static/css/main.aea680b0.chunk.css
user_86095170
Related