I created a react repository based on the GitHub codespaces template then I followed the GH documentation on using GitHub pages.
However the website renders a blank page.
During my own research I found out this is most likely due to the index.jsx not loading.
So I added some images which should work but they do not load as well.
When running the project locally it’s working just fine.
These are the errors I am seeing on the GitHub pages site:
project-react/:36
GET https://dominique8d.github.io/favicon.ico 404 (Not Found)
project-react/:35
GET https://dominique8d.github.io/project-react/favicon.ico 404 (Not Found)
project-react/:40
GET https://dominique8d.github.io/src/index.jsx net::ERR_ABORTED 404 (Not Found)
project-react/:38
GET https://dominique8d.github.io/public/Octocat.png 404 (Not Found)
manifest.json:1
GET https://dominique8d.github.io/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
So I am most likely missing something or targeting the wrong locations.
This is the package.json
file:
{
"name": "codespaces-react",
"version": "0.1.0",
"private": true,
"homepage": "https://dominique8d.github.io/project-react/",
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"web-vitals": "^3.1.0"
},
"overrides": {
"@svgr/webpack": "^8.0.1",
"@adobe/css-tools": "^4.3.1",
"postcss": "^8.4.31"
},
"scripts": {
"start": "BROWSER=none WDS_SOCKET_PORT=0 vite --port 3000",
"build": "vite build",
"preview": "vite preview",
"test": "vitest"
},
"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"
]
},
"devDependencies": {
"@vitejs/plugin-react": "^4.1.1",
"jsdom": "^22.1.0",
"vite": "^4.5.5",
"vitest": "^0.34.6"
}
}
This is the index.html
file:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using @vitejs/plugin-react"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<title>Project React</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
IMG
<img src="./favicon.ico"/>
<img src="/favicon.ico"/>
<img src="favicon.ico"/>
<img src="/public/Octocat.png"/>
TESTUPDATE
<script type="module" src="/src/index.jsx"></script>
</html>
What I already tried:
- I tried changing the
homepage
variable in thepackage.json
file to "." and other variations of the current value. - Adding the "gh-pages" depdency to the
package.json
- Changing the location of the index.jsx file:
<script type="module" src="./src/index.jsx"></script>
- Adding
base: "./"
tovite.config.js
- I tried changing the
private
variable in thepackage.json
file tofalse
- Adding deploy scripts to
package.json
even though deploying itself was working out of the box
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
You need to sign in to view this answers