Search code examples
reactjsgithubcreate-react-appgithub-pages

How to deploy a react project found in a subdirectory in the main branch to Github Pages

Context

I have a github repository my-projects which contains multiple folders each representing a separate web project. The GitHub Pages site for this repository is currently being built from the main branch (not gh-pages branch) and the Github page has a Github Jekyll theme.

The simplified file structure of the repository is as follows:

my-projects/
├─ project1/
│  ├─ index.html
│  ├─ README.md
├─ project2/
│  ├─ index.html
│  ├─ README.md
├─ project3/
│  ├─ README.md
│  ├─ dist/
│  │  ├─ index.html
├─ project4/
│  ├─ README.md
│  ├─ node_modules/
│  ├─ public/
│  ├─ build/
│  ├─ package.json
│  ├─ package-lock.json
│  ├─ src/
├─ config.yml
├─ README.md

Some of the projects have the production build in the dist folder. The following links are all working websites deployed by Github Pages:

  • http://username.github.io/my-projects/
  • http://username.github.io/my-projects/project1
  • http://username.github.io/my-projects/project2
  • http://username.github.io/my-projects/project3/dist

Issue with deploying react-app project4

project4 folder is a react app which was generated from create-react-app. Here’s the package.json file:

{
  "name": "my-projects",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://username.github.io/my-projects/project4",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.3",
    "date-fns": "^2.29.3",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-scripts": "5.0.1",
    "react-to-print": "^2.14.12",
    "uniqid": "^5.4.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts 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"
    ]
  }
}

I generated the production build with npm run build and pushed the build folder to Github. However after pushing the newly created build folder to github, I am unable to view the website. I tried accessing the following links but had no success:

  • http://username.github.io/my-projects/project4 : Displays README of project4 instead of actual project

  • http://username.github.io/my-projects/project4/build : Displays a blank page with the following console errors:

main.80069716.js:1          Failed to load resource: the server responded with a status of 404 ()
main.0634878b.css:1          Failed to load resource: the server responded with a status of 404 ()
manifest.json:1          Failed to load resource: the server responded with a status of 404 ()
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
main.0634878b.css:1          Failed to load resource: the server responded with a status of 404 ()
manifest.json:1          Failed to load resource: the server responded with a status of 404 ()
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
DevTools failed to load source map: Could not load content for chrome-extension://clldacgmdnnanihiibdgemajcfkmfhia/contentScript.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

What I tried

  • I tried to follow this tutorial which uses gh-pages branch but unfortunately it still does not work as desired. If I change the Github Pages branch from main to gh-pages in the repository settings, all my other projects stop working. For example, I error 404 when accessing http://username.github.io/my-projects/project2. I had to change the branch back to main to get it to work.
  • I tried setting homepage in package.json to . but got the a blank page with same console errors as before.
  • I tried setting homepage in package.json to http://username.github.io/my-projects/project4/build/ but got the a blank page with same console errors as before.

So to summarize, here's what I want to achieve:

  • http://username.github.io/my-projects/project4 should show the README of project4. This already works.
  • http://username.github.io/my-projects/project4/build should show the production build of project4. This does not work yet.
  • All other websites (for example http://username.github.io/my-projects/project2) should still be accessible. With the branch currently set to main, this also works.

References

React app shows a blank page after deployment to github pages

https://github.com/facebook/create-react-app/issues/478

Deploying React App to GitHub Pages: 404 page not found

Solution

  • I managed to fix the issue with the following steps:

    1. Set "homepage" in package.json file to http://username.github.io/my-projects/project4/build.
    2. cd project4 and update production build with npm run build.
    3. git push : Push updated production build and package.json file to main branch on Github.

    The deployed website will be found at http://username.github.io/my-projects/project4/build and the README will be accessible at http://username.github.io/my-projects/project4. All other projects are still accessible at their respective links.