I am trying to upload a React project, created with create-react-app, to github pages. After running npm run build, I uploaded the built content to github, but nothing was found. I fixed a missing ./ both in index.html (by adding <base href="./" />) anc in asset-manifest.json (all entries were like "main.js": "/static/js/main.238dbb45.js" and I changed them manually to "main.js": "./static/js/main.238dbb45.js"). I also added "start_url": "https://ilDeffo.github.io/MyProject/" to my manifest.json
Before this change, the error I had in the browser console was Failed to load resource: the server responded with a status of 404 () and the resource urls were all like /static/js/main.238dbb45.js.
This little change fixed almost everything, except for the media files: the error message is the same as before, but now the urls of media files (.png, .jpg) are like "https://ilDeffo.github.io/static/media/my_image.png" so it looks like /MyProject/ is missing in this url.
What am I missing?
My Files:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="./" />
<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 create-react-app"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>MyProject</title>
<script defer="defer" src="/static/js/main.238dbb45.js"></script>
<link href="/static/css/main.23037022.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
manifest.json
{
"short_name": "MyProject",
"name": "MyProject",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "https://ilDeffo.github.io/MyProject/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
assets-manifest.json
{
"files": {
"main.css": "./static/css/main.23037022.css",
"main.js": "./static/js/main.238dbb45.js",
"static/js/453.d7c8ad91.chunk.js": "./static/js/453.d7c8ad91.chunk.js",
"static/media/my_image.jpg": "./static/media/my_image.3b164cd332d9eaf73dd0.jpg",
"static/media/my_image2.png": "./static/media/my_image2.95a63c7274aa5a772bd0.png",
"index.html": "./index.html",
"main.23037022.css.map": "./static/css/main.23037022.css.map",
"main.238dbb45.js.map": "./static/js/main.238dbb45.js.map",
"453.d7c8ad91.chunk.js.map": "./static/js/453.d7c8ad91.chunk.js.map"
},
"entrypoints": [
"./static/css/main.23037022.css",
"./static/js/main.238dbb45.js"
]
}
Please feel free to ask for any additional info or piece of code.
Thanks.
EDIT Folder structure is teh following:
MyProject
|
|__ public
| |
| |_ favicon.ico
| |_ index.html
| |_ logo192.png
| |_ logo512.png
| |_ manifest.json
| |_ robots.txt
|
|__src
| |_ assets
| | |
| | |_my_image.png
| | |_my_image2.png
| |
| |_ css
| | |
| | |_index.css
| |
| |_ App.js
| |_ index.js
|
|_ package.json
I found out that adding
"homepage": "https://ilDeffo.github.io/MyProject/"
fixed the problem