I'm trying to deploy a React app to a *.github.io page, and it seems as though something in the process isn't properly getting React to run on the server side - I'm getting a blank page with an error about an unexpected token '<', which suggests to me that React simply isn't being used to interpret the javascript at all.
Here's my package.json:
"name": "github-pages-page",
"homepage": "**********.github.io",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"gh-pages": "^3.2.3",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d 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've installed gh-pages
through Yarn and am deploying the app through npm run deploy
(which runs just fine), and I've pointed Github Pages to the gh-pages
branch properly. If I run yarn start
in my local copy of the app's top-level directory, it works exactly as expected, so there's nothing wrong with the app itself - the problem is in however Github Pages is running it. What do I need to tweak to get it to run properly?
CodePudding user response:
Removing homepage
from your package.json
should fix your problem. Here is why:
According to Github docs, Github pages have 3 different types:
- Organization pages
- User pages
- Repository pages
You can only create one user or organization site for each account on GitHub. Project sites, whether owned by an organization or a personal account, are unlimited.
If you create a repo with the name of <username>.github.io
it becomes a user page and it seems like that's what you are doing.
Therefore your website root directory becomes <username>.github.io
and the links in your index.html
should be relative to this path.
Now if you look at your index.html
in the gh-pages
branch, the links are pointing at /<username>.github.io/*
which is incorrent. This is because you set the homepage
property in your package.json
.
Create-react-app docs:
By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in your package.json