Need Help with git pages

I am not sure what i am missing… i have been testing how to deploy react app to git pages. but it is not working for me. " it has been a white blank page. No text, no error" here is my package.json


and it is returning this…

I need help

Hmm, I’ve not used parcel for my build tool before, so it’s hard to diagnose, but the dev console shows that some assets can’t be found, and the network tab suggests the path is formed incorrectly:

ebruphs

The browser is looking at https://ebruphs-b.github.io/src.4341edf5.js to find the JS, but the actual url for it should be https://ebruphs-b.github.io/toptracks/src.4341edf5.js

You may need to review the parcel docs to see how to fix that properly. It could just be an incorrectly formatted relative url.

I just had a play around with your repo. If you serve the dist folder with a lighweight server (I use python -m SimpleHTTPServer 8080) then you can see what GitHub pages sees.

If I then change the url for the missing assets from "/src.df90cfd1.js" to src="src.df90cfd1.js" (for example), then the page renders properly. Do the same for the stylesheet url and any other assets.

I’m still not sure how parcel determines the urls for the dist folder, though - really you want to fix the build step properly, rather than edit the dist files manually.

This is what the dist/index.html looked like after my edits:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Top Tracks Online</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="src.dc6ca6ef.css">
  </head>
  <body>
    <div id="root"></div>
    <script src="src.df90cfd1.js"></script>
  </body>
</html>

(I added the line breaks for readbility - in the dist folder it’d actually be all on one line)

1 Like

Update: I found the fix: https://github.com/parcel-bundler/parcel/issues/1092#issuecomment-377116795

  • Delete your dist folder.
  • Change your build script to this: "build": "parcel build src/index.html --public-url ./",
    (This adds the path for the public url)
  • Run the build and deploy scripts again.

Then it should be ready for gh-pages.

As an aside - parcel looks really sweet! I’m sort of amazed that it bundles everything up with so little config required!

1 Like

This worked @JacksonBates Thanks so much for saving me. You don’t want to know how I’ve been all this while with this :joy::joy::joy:
Yeah parcel been doing great since i discover it :smiling_face_with_three_hearts:

1 Like

This is the kind of thing I waste the most time on professionally.

I can complete a feature just fine, but then there’ll be some weird dance the build step wants for the code to work in production, and somehow my use cases are never that well documented!

If you get into full time development you can look forward to nonsense like this ruining your week at least every few months :wink:

1 Like

you’ll probable document them now I guess