Cannot deploy fresh create-react-app on Github Pages

Question

just finished a huge app and tried to deploy it on github but it started throwing 404 errors. I tried to create a fresh new one with just one change in the HTML (just to see that is customized) and it's throwing the same error. The dev version works, the production not.

Here is the error:

DevTools failed to load SourceMap: Could not load content for chrome-> extension://hgmhmanijnjhaffoampdlllchpolkdnj/js/lib/purify.min.js.map: HTTP error: status code

404, net::ERR_UNKNOWN_URL_SCHEME favicon.ico:1 GET https://kirilchristov.github.io/favicon.ico 404 manifest.json:1 GET https://kirilchristov.github.io/manifest.json 404 manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

Here is a link to the repo: Github Repo

Here is the package.json with the scripts:

{
  "home":"https://kirilchristov.github.io/renker",
  "name": "gr",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy":"gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

Have you set your repo settings to serve gh-pages from root? I checked your gh-pages branch and the error and it looks like the server doesn't return from root — Dominik
– Dominik, Commented Oct 12, 2020 at 21:05
Yes @Dominik. Just checked it. It serves from the root folder — Kiril Christov
– Kiril Christov, Commented Oct 12, 2020 at 21:17
Have you enabled gh-pages in settings? I can't see the action environment listed — Dominik
– Dominik, Commented Oct 12, 2020 at 21:18

Dominik · Accepted Answer · 2020-10-12 21:27:08Z

1

You need three things for CRA to work on gh-pages

A branch with the prod files (default is gh-pages)

✅ You have that (I checked)
Settings enabling gh-pages and select the branch if not default and serve from root

✅ You have that as well, you say
The homepage key inside your package.json

❌ You have home instead of homepage https://create-react-app.dev/docs/deployment#building-for-relative-paths

Try fixing that in your package.json

{
  "homepage":"https://kirilchristov.github.io/renker",
  "name": "gr",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy":"gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

answered Oct 12, 2020 at 21:27

Dominik

6,3239 gold badges44 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kiril Christov Over a year ago

Than you a lot. It was right before my eyes :( THank you

Collectives™ on Stack Overflow

Cannot deploy fresh create-react-app on Github Pages

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related