CODEWITHSUNDEEP
reactjsgithub-pages
Cheezy
Cheezy

Reputation: 86

React app not deploying correctly in Github pages

I followed a tutorial to deploy a React app to github pages. When I deploy, I get no error messages, but when I check the URL, I just see a blank page (see https://bd21.github.io/tallyup-frontend-demo/).

It runs locally fine using "npm start". Whenever I deploy I just run "npm run deploy".

My repository is here: https://github.com/bd21/tallyup-frontend-demo

Here is my package.json:

{
  "name": "tallyup-frontend-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.22",
    "@fortawesome/free-solid-svg-icons": "^5.10.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@types/jest": "24.0.18",
    "@types/lodash": "^4.14.138",
    "@types/node": "12.7.4",
    "@types/react": "16.9.2",
    "@types/react-dom": "16.9.0",
    "@types/react-router-dom": "^4.3.5",
    "bootstrap": "^4.3.1",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "node-fetch": "^2.6.0",
    "react": "^16.9.0",
    "react-bootstrap": "^1.0.0-beta.12",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1",
    "typescript": "3.6.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "http://bd21.github.io/tallyup-frontend-demo",
  "devDependencies": {
    "gh-pages": "^2.1.1"
  }
}

When I look at the network calls in the Chrome inspector, I don't see any 4xx or 5xx calls. You can verify that here.

https://bd21.github.io/tallyup-frontend-demo/

Why isn't my app deploying/displaying correctly?

Upvotes: 1

Views: 1412

Answers (2)

Sanaz Mahmoudi
Sanaz Mahmoudi

Reputation: 108

When you use "npm run deploy", don't you receive any errors? Cuz if it runs without any errors, «build» directory and «gh-pages» branch created then you can easily change branch of your repository (for github pages in settings) on «gh-pages» branch and after minutes, you can see your own github pages.

If you did all above, check index.html in «build» directory. It should show an html of your React project correctly.

Another thing i had problem with, you should add origin remote for your repository (not other name just origin) : Git remote add origin

I hope i'll help you.

Upvotes: 0

Ashad
Ashad

Reputation: 2511

your site is working properly in Github pages,

maybe the problem is with your react router code as it was routing something

component tab

Upvotes: 0

Related Questions