Deploying React App on GitHub Pages - "Page Not Found" Issue

[Encoded99]

Select Topic Area

Bug

Body

Hello GitHub Community,

I'm currently facing an issue while deploying my React app on GitHub Pages, and I'm seeking some guidance to help resolve it.

Issue Summary:
I have followed the recommended steps to deploy my React app on GitHub Pages. I've pushed the contents of the build folder to the gh-pages branch, but when I visit the deployed site, I consistently encounter a "404 - Page Not Found" error.

Steps Taken:

I ran the npm run build command to generate the optimized build files.
I pushed the contents of the build folder to the gh-pages branch as instructed.
I can see the files in the GitHub repository, but the live site isn't working as expected.
What I've Checked:

The paths in the index.html file seem correct, and the assets are present.
I've tried to test the app locally using http-server, but I'm still experiencing the same issue.
I've checked for any .nojekyll files as mentioned in the documentation, but none exist in the repository.
Repository Link: https://github.com/Encoded99/new

Request for Assistance:
I'm reaching out to the GitHub Community to seek assistance in resolving this issue. I've gone through various troubleshooting steps, but I'm unable to pinpoint the exact cause of the "404 - Page Not Found" error. If anyone has encountered a similar issue or has any suggestions on what might be causing this problem, I'd greatly appreciate your input.

[arafajs]

Some things to check:

• Make sure that you have pushed the contents of the build folder to the gh-pages branch. This is the folder that contains the optimized build files for your app.
• Check the paths in the index.html file. Make sure that they are correct and that they point to the files in the build folder.
• Try clearing your browser's cache. This can sometimes fix 404 errors.

[arafajs]

Additional resources that you may find helpful:

• Deploying React apps to GitHub Pages: https://blog.logrocket.com/deploying-react-apps-github-pages/
• Troubleshooting 404 errors for GitHub Pages sites: https://docs.github.com/en/pages/getting-started-with-github-pages/troubleshooting-404-errors-for-github-pages-sites

[Encoded99]

I think the problem is not even git hub specific, because I drag and drop the build folder on netlify and and try to access the site but it's showing blank page, and I check the console it's showing error regarding to some manifest json file and some css and js file in the build folder

[nftushar]

It looks like you've provided a clear and comprehensive description of the issue you're facing with deploying your React app on GitHub Pages. Since you've already taken several steps and ruled out a few common causes, I can offer a few more suggestions to troubleshoot and potentially resolve the "404 - Page Not Found" error:

1. Check Base URL: In your package.json file, ensure that you have set the homepage field correctly. For a GitHub Pages deployment, it should be set to the repository name. In your case, it should be "homepage": "/new".

2. Wait for GitHub Pages to Deploy: Sometimes, it takes a little while for the changes to propagate and the deployment to become fully functional. Make sure you've given enough time for the GitHub Pages to build and deploy your app after pushing the changes.

3. Check Routing Configuration: If your React app uses client-side routing (e.g., React Router), the routes might not work as expected on GitHub Pages due to its server configuration. You may need to add a 404.html file with some specific content to your public directory to ensure client-side routing works correctly. More information can be found in the GitHub Pages documentation.

4. Custom Domain and HTTPS: If you're using a custom domain, make sure your DNS settings are correctly configured. Also, note that GitHub Pages enforces HTTPS, so ensure that your app works over HTTPS. Mixed content (HTTP resources on an HTTPS page) can cause issues.

5. Check the gh-pages Branch: Double-check that the gh-pages branch contains the correct build files. You can navigate to the gh-pages branch on GitHub and see if the files are there.

6. Remove 404.html from Source Code: If you've added a 404.html file to your project, try removing it. Sometimes, having this file in your source code can interfere with the GitHub Pages deployment.

7. Use HashRouter: If you're using React Router and facing issues with client-side routing, consider using HashRouter instead of BrowserRouter. Hash routing tends to work more reliably on static hosting platforms like GitHub Pages.

8. Deploying from main: Instead of deploying from a dedicated gh-pages branch, you can also try deploying from your main (or master) branch directly. Set the build output path to the root of the repository (not inside a subfolder) and then follow the GitHub Pages deployment process.

9. GitHub Actions: Consider automating your deployment process using GitHub Actions. This can ensure a consistent and reliable deployment process every time you push changes.

Remember to carefully review each step in your deployment process and make sure there are no typos, missed settings, or overlooked files. The GitHub repository link you provided will also be useful for community members to directly inspect your code and settings to provide more specific guidance.

Lastly, if you're still encountering the issue after trying these suggestions, consider reaching out to GitHub Support or asking for help on GitHub's official forums, as they might be able to provide more targeted assistance based on the specifics of your project and deployment process.

[Encoded99]

Thanks for the reply, I think I have already, try to deploy the page manually on netlify to see if it's GitHub specific issue but when I do that, the page built still remain blank, while there is an error in the console about manifest json file and some CD and js file in the static folder

[Mrtee160561051]

install gitHub pages by running the code below in ur terminal
npm i gh-pages --save-dev

[SH20RAJ]

https://youtu.be/0d6tf4te4lw?si=20jbAWtEtTAfA19n

[User-DK]

If none of Above helps and you are using BrowserRouter then please set this change the app name to you website path, This is very much important