Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Build files not found net::ERR_ABORTED 404 #285

Closed
chrisdel101 opened this issue Mar 10, 2019 · 24 comments
Closed

Build files not found net::ERR_ABORTED 404 #285

chrisdel101 opened this issue Mar 10, 2019 · 24 comments

Comments

@chrisdel101
Copy link

chrisdel101 commented Mar 10, 2019

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 chrisdel101 reopened this Mar 10, 2019
@chrisdel101 chrisdel101 changed the title Build files not found Build files not found net::ERR_ABORTED 404 Mar 10, 2019
@chrisdel101
Copy link
Author

Not resolved but might as well close.

@JuanIrache
Copy link

Hi Chris,

Did you find a solution?

@chrisdel101
Copy link
Author

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
Copy link

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
Copy link

OnrHng commented Jan 23, 2020

hi there,, anyone find a solution?

best

@meta-meta
Copy link

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
Copy link

@meta-meta FYI Medium link is paywalled

@jtremback
Copy link

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

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

@Mahmoudhoko
Copy link

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

@Mahmoudhoko
Copy link

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

@JuanfeRomero
Copy link

JuanfeRomero commented Oct 27, 2021

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
Copy link

shieldgenerator7 commented May 21, 2023

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
Copy link

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

candyapplecorn added a commit to candyapplecorn/interactive-resume that referenced this issue May 25, 2023
@Efess86
Copy link

Efess86 commented Jun 14, 2023

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
Copy link

Efess86 commented Jun 14, 2023

I got email from gitHub

pages build and deployment: Some jobs were not successful

@Efess86
Copy link

Efess86 commented Jun 14, 2023

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

@Efess86
Copy link

Efess86 commented Jun 14, 2023

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.

athdromeda added a commit to athdromeda/portfolio that referenced this issue Aug 15, 2023
@romanshutsman
Copy link

romanshutsman commented Oct 28, 2023

< base href="./" >

@AlejoDevLov
Copy link

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", 
  1. 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
Copy link

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
Copy link

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
Copy link

elhamhashemii commented Jul 29, 2024

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", 
  1. 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
Copy link

lucy-c1 commented Aug 23, 2024

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.
    image

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

@peerdanish
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests