Fix Create React App showing README.md

React is a front-end JavaScript library for creating user interfaces from individual components. To facilitate this, Create React App is a command allowing the user to focus more on implementation than on building the environment. It sets up an environment ready for development with the latest JavaScript features and optimized workflow.

However, you can face many issues while creating and running your React app. A prevalent runtime error is when your application works as intended offline, but when you deploy your application via GitHub on GitHub PagesGitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, you can only see the README file.

Potential reasons for errors

There can be a few reasons for this error. Throughout this Answer, we will try to guide you on how to resolve these.

Incorrect start command

Before diving into fixes, it is essential to recheck your command statements. To run your application, ensure you have correctly used "npm start", or if you are using a watcher like nodemon, double-check that you have entered the command correctly. Moreover, make sure you are in the correct directory. First, redirect your terminal to the indented directory, then start your development server.

Missing dependencies

Another easily fixable issue could be missing dependencies. Install all necessary dependencies, especially after adding new code to your GitHub repository. To do that, go to your application folder and check for a "node module" folder. If it exists, delete it and reinstall all dependencies. If it does not, install all dependencies regardless by using "npm start" or "yarn start."

Default build branch

When deploying on GitHub Pages, the default branch is the "Master Branch." Therefore, it is essential to keep that in mind. One option can be to push your code to the main branch. This can be a potential fix; however, you can also change your default page's site.

Change homepage

Another method we can employ is changing the homepage from inside our project. We can change the assumed hosting directory from the root to another folder. We can override the "homepage" header in our package.json file to do this (one of the two options).

Afterward, we need to run the following command.

Finally, override the scripts header in package.json for the following lines of code.

Conclusion

Hopefully, by following this guide, we will have solved your error. However, wait a few minutes if you do not see your updated result instantly. Due to latency issues, it sometimes takes a few minutes for changes to take place. Refresh your page and you should be able to see your application.