React app not showing up on Github pages

I’ve pushed numerous projects to github pages, but this is my first time trying to push a React app. It is simply showing the readme file instead of the actual app. I created a new gh-pages branch and pushed to it. My settings for my repository are set to gh-pages and it says my site is published. Is there anything specific for React projects I need to change? I know the initial build takes a while but it’s been over 20 minutes with no changes.

Hi @gvholley, welcome to the GitHub Support Community!

There’s some specific steps you need to follow to deploy a react site to GitHub Pages depending on which type of Pages site you’re hosting. You may need to include the repository name in your package.json file under the homepage variable before your site’s asset links work correctly once deployed to Pages. There’s instructions on how to do that here:

If that doesn’t solve your issue can you post a link to your repository so I can take a look?

1 Like

Thank you for your message. I followed the steps, but when I try to do yarn gh-pages I get the following error:

Extracting tar content of undefined failed, the file appears to be corrupt: “Invalid tar header. Maybe the tar is corrupted or it needs to be unzipped?”

Maybe an error when I edited my package.json?

Here is my repository: https://github.com/gvholley/reactmovieapp

Thanks for posting that! It looks like your gh-pages branch currently has a copy of the contents of your main branch rather than the compiled version of your site. You’ll need to run your deploy script in order to build and deploy your application correctly.

As for the error message you’re seeing, I’m not 100% sure on what it could mean but judging by this issue is could be a network connectivity issue inside yarn itself? I’m not too familiar with yarn though so you may have a better understanding of this issue than me!

I couldn’t fix the issue so I tried again with npm. No errors show up and it seemed to bild, but I get a blank white page which I check the github pages URL. I have it on my gh-pages branch and I have my homepage saved in my json.

You’re still missing the /reactmovieapp section from your URLs.

It looks like you’ve added the homepage variable inside the dependencies section of your package.json. You’ll need to take this out of there and put it on the same level as the name etc.

Once you’ve done that, build and deploy your site again.

I managed to get it working by using npm over yarn, thanks!

1 Like