GitHub Pages Page Not Found for React App

Question

I am trying to publish my single page website to github pages, but I've run into an issue. When I go to the link for my website, it gives me a 404 error with this message: "File not found. The site configured at this address does not contain the requested file. If this is your site, make sure that the filename case matches the URL. For root URLs (like http://example.com/) you must provide an index.html file."

I've looked at the documentation, watched videos, and looked up other people who are having this issue, but nothing will solve it.

I have a main and a gh-pages branch. Right now I have it set to build from the gh-pages branch. If I change it to main I get the same issue.

Here is my package.json file:

  "homepage": "http://bpyle02.github.io/portfolio",
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "aos": "^3.0.0-beta.6",
    "autoprefixer": "9",
    "gh-pages": "^3.2.3",
    "postcss": "7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icon": "^1.0.0",
    "react-icons": "^4.3.1",
    "react-router": "^6.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "react-scroll-into-view": "^1.10.1",
    "scroll-into-view": "^1.16.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -b main -d build",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

Here is the link to the repo: https://github.com/bpyle02/portfolio

jsejcksn · Accepted Answer · 2021-12-05 07:31:43Z

3

You need to upload only the contents of your build folder to the gh-pages branch. I think it will benefit you to read about how GitHub Pages works.

The create-react-app documentation explains how to address your scenario:

https://create-react-app.dev/docs/deployment/#github-pages

Here's the most important information (without setting this before building your app, it won't work):

Open your package.json and add a homepage field for your project:
"homepage": "https://myusername.github.io/my-app",
Create React App uses the homepage field to determine the root URL in the built HTML file.

This might also be relevant to your app:

https://create-react-app.dev/docs/deployment/#serving-the-same-build-from-different-paths

edited Dec 5, 2021 at 7:31

answered Dec 5, 2021 at 4:10

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

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

9 Comments

Brandon Pyle Over a year ago

I already added that line to my code

jsejcksn Over a year ago

You need to upload only the contents of your build folder to the gh-pages branch. I have also added this to my answer. All sorted now?

jsejcksn Over a year ago

Not the build folder itself, just it’s contents: everything inside it.

jsejcksn Over a year ago

Glad to hear that you got it working!

jsejcksn Over a year ago

^ "...will work for any url": @Konrad The CRA documentation (linked in the answer) explains that there are cases where that's not true. Some of the specifics were initially discussed in facebook/create-react-app#1487

|

Collectives™ on Stack Overflow

GitHub Pages Page Not Found for React App

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related