Unable to update contents of react app published using github-pages

user_9874021 0
Viewed 813

I'm new to React and not very familiar with git. I deployed a React App on github-pages. I made some updates and pushed the changes on the master branch. When I reload my webpage the updates don't show. The app is configured to use the gh-pages branch, but I don't know how to access this branch using git from the command line.

How do I update my react app?

github-pages reactjs git
2 Answers

It took me days to finally find the answer for react-gh-pages not updating. I hope the following answer helps as it did for me. It is a combination of multiple answers that I have researched over:

The main and most common reason is your browsers caching feature. In order to disable it for every rendering of your index.html,

  1. Add this snippet in your index.html file under the public folder.

<meta http-equiv='cache-control' content='no-cache'> 
<meta http-equiv='expires' content='0'> 
<meta http-equiv='pragma' content='no-cache'>

  1. Push any new changes to the master or main branch(not to the origin gh-pages).
  2. By now your master branch is updated.
  3. Now run: git push origin :gh-pages. This will delete the gh-pages branch.
  4. Run: npm run deploy. This will build build your app and re-create gh-pages branch with updated content.
  5. Now go the settings section on the top-right side of your app repo page. Scroll down to the bottom. Under Github Pages section, under source, there is branch section. Change that to your master branch or main. Keep the root folder as it is.
  6. Go to your site and you will see a Readme file. It may take some time. After a minute or so change the branch back to gh-pages. After a minute visit your site and it should be updated by now.

Edit: Since you have deleted and re-created the gh-pages branch, after step 6, if you go to your website you may get website not found error. Don't panic yet. Make sure you change the publishing source to master branch and wait until you see the readme content on your website. Only after that you go back and change the publishing source back to gh-pages branch. It will take some time to update but it will work eventually!

I hope this helps! Let me know if it worked for you as well in the comment section, cheers!

user_138170410

Just have to build again by running:

npm run deploy

user_98740210
Related