Build files not found net::ERR_ABORTED 404

[chrisdel101]

Probably this is common. I get 404 to all my build files.

Gh-pages will not find my files from create-react-app inside the build folder. I've tried moving them out, which has worked before. I manually renamed them this time but still not being found.

Actual place:
https://github.com/chrisdel101/baseballhack/blob/gh-pages/static/css/main.56da8e78.chunk.css
Where gh-page is looking:
https://chrisdel101.github.io/static/css/main.56da8e78.chunk.css

Spent a few hours on this now including following all the orthodox steps in CRA deployment tutorials.

[chrisdel101]

Not resolved but might as well close.

[JuanIrache]

Hi Chris,

Did you find a solution?

[chrisdel101]

I didn't. I wasn't able to use GH pages and instead made a server and used Heroku for that project.
Every time I use GH pages with create-react-app, which is common, it's a crapshoot whether I will be able to deploy it or not. Sometimes it works and sometimes it doesn't. I haven't figured out why yet so I can't reproduce the error.

[JuanIrache]

True. I kept trying and tweaking things here and there... and at some point it worked. Not sure what did it, really. I think GitHub struggles to clear previous versions of the site, so that makes debugging more difficult.

Thanks, though

[OnrHng]

hi there,, anyone find a solution?

best

[meta-meta]

Some helpful information here:
https://medium.com/swlh/building-a-static-single-page-application-with-javascript-for-github-pages-and-more-eb568b436bea#8f76

also here https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48

[jtremback]

@meta-meta FYI Medium link is paywalled

[jtremback]

You need to set the "homepage" key in package.json. For example:

“homepage” : “http://yourgithubname.github.io/yourreponame",

[Mahmoudhoko]

I've the same problem .. any one find a solution ?

[Mahmoudhoko]

@meta-meta FYI Medium link is paywalled
it not working

[JuanfeRomero]

hey I was having the same trouble using vue but found this while googling so I'll share this in case anybody else does.
In my case the problem was that the minimized index.html on dist had all the and <script> tags pointing to a subfolder that didn't exist
<script src="vue-app-folder/js/chunk-vendors.a81e0c23.js"></script>

so I just changed it like this
<script src="./js/chunk-vendors.a81e0c23.js"></script>

and now everything works, probably my fault because of something that I did at some point but hope that helps

[shieldgenerator7]

For me, the problem was that it wasn't properly navigating the folder structure.
not working version:

    <script type="module" crossorigin src="/assets/index-43cca805.js"></script>
    <link rel="stylesheet" href="/assets/index-7a3c4c5b.css">

working version:

    <script type="module" crossorigin src="./assets/index-43cca805.js"></script>
    <link rel="stylesheet" href="./assets/index-7a3c4c5b.css">

Add a "." before the "/assets/...." part and the error will go away

I had to manually do this. I don't know how to get react to build it correctly

[HusakYurii]

For me, the problem was that it wasn't properly navigating the folder structure. not working version:

    <script type="module" crossorigin src="/assets/index-43cca805.js"></script>
    <link rel="stylesheet" href="/assets/index-7a3c4c5b.css">

working version:

    <script type="module" crossorigin src="./assets/index-43cca805.js"></script>
    <link rel="stylesheet" href="./assets/index-7a3c4c5b.css">

Add a "." before the "/assets/...." part and the error will go away

I had to manually do this. I don't know how to get react to build it correctly

That worked for me! Thanks a lot!

It seems that when the create-react-app template makes a build it doesn't add "." to relative paths, which is becomes to be annoying when deploying to gh-pages

[Efess86]

Hello guys.
Like all of you, I also encountered the problem of paths to script and style files. After all my nerves were exhausted and I entered a state of "I don't care anymore", I became curious about where my scripts and styles were located.
You should know that I started writing a small application on vue3 + vite. I watched a video guide where everything is very easily and simply set up, but the project in the video was just created and for me it's not worked. So, I started typing paths manually in the browser and found out that both scripts and styles were available. Here's an example.

("vue-invoices" is the name of my project)

Styles are displayed on this path:
--> https://efess86.github.io/vue-invoices/assets/index-b3d70005.css

Path in index.html in the dist folder after the npm run build command
-->

I think the issue is not that we're writing something wrong, but that GitHub for some reason doesn't want to display what we give it. I decided to check something and purposely wrote a non-existent path.

So here are my paths after I created the project with the npm run build command:

<script type="module" crossorigin src="/vue-invoices/assets/index-1037ce7e.js"></script> In styles, I purposely change the path to href="/vue-invoices/non-exist-folder/index-b3d70005.css"

I write a commit, wait 2 minutes, and go to the project site to see what's written in the head tag.

-->

My updates didn't go through. Why? Maybe I got a ban because I updated the paths many times.

[Efess86]

I got email from gitHub

pages build and deployment: Some jobs were not successful

[Efess86]

I just discovered the Actions tab.
After you do anything on gitHub, open the Actions tab and see what happens there.

[Efess86]

So my story comes to an end.
I blame myself since I am a beginner.
I have 2 branches in my repository.
Master and gh-pages. All the changes I made were in the master branch. These changes should have been done in the gh-pages branch.

Do not repeat my mistake and be careful.
Everything is working fine for me. Vite put the right paths in on its own. I didn't use Vue router.
Sorry for writing so much.

[romanshutsman]

< base href="./" >

[AlejoDevLov]

I had this issue with my React project. My solution was as follows:

I realized that I needed to modify the package.json file by adding the 'homepage' key, and the value should be the URL generated for GitHub.
For example:

{
  ...
  "type": "module",
  "homepage": "https://alejodevlov.github.io/your-app-name", 

2. I found that I needed to modify the .css and .js paths in the index.html file generated after compiling the app for production. I had to add a dot at the beginning of the paths.
   For example:

<script type="module" crossorigin src="./assets/index-9503b887.js"></script>
<link rel="stylesheet" href="./assets/index-5c6ce281.css">

[AndreMicael]

For me, the problem was that it wasn't properly navigating the folder structure. not working version:

    <script type="module" crossorigin src="/assets/index-43cca805.js"></script>
    <link rel="stylesheet" href="/assets/index-7a3c4c5b.css">

working version:

    <script type="module" crossorigin src="./assets/index-43cca805.js"></script>
    <link rel="stylesheet" href="./assets/index-7a3c4c5b.css">

Add a "." before the "/assets/...." part and the error will go away

I had to manually do this. I don't know how to get react to build it correctly

This worked perfectly for me. But I have do edit manually the index.html file on gh pages branch.

Thank you

[evgeniy-kolmak]

You need to set the "homepage" key in package.json. For example:

“homepage” : “http://yourgithubname.github.io/yourreponame",

If you use react-router-dom, the root of the application is always /, but when expanding it tries to open /your_project_name and an error occurs in the routes.

[elhamhashemii]

I had this issue with my React project. My solution was as follows:

I realized that I needed to modify the package.json file by adding the 'homepage' key, and the value should be the URL generated for GitHub. For example:

{
  ...
  "type": "module",
  "homepage": "https://alejodevlov.github.io/your-app-name", 

2. I found that I needed to modify the .css and .js paths in the index.html file generated after compiling the app for production. I had to add a dot at the beginning of the paths.
   For example:

<script type="module" crossorigin src="./assets/index-9503b887.js"></script>
<link rel="stylesheet" href="./assets/index-5c6ce281.css">

Hey. I have the same issue and did the same as you mentioned. I added a dot before /assets in the html file in my dist folder.
But when I run npm run deploy it again removes those dots automatically. Have you faced this issue?

[lucy-c1]

Hey. I have the same issue and did the same as you mentioned. I added a dot before /assets in the html file in my dist folder. But when I run npm run deploy it again removes those dots automatically. Have you faced this issue?

I had the same issue as well. I fixed this by switching my main branch to gh-pages on github and then directly, on github, modified my index.html file to be the correct file path. My project was already deployed then and it properly updated the page after a few minutes.

1. Make sure that you are on the correct branch. The main branch should be the default.
   

2. Update the index.html file and commit your changes
   

[peerdanish]

If you're using vite, then in vite.config.ts, add base : './' property. That solved the issue in my case.