Fix Create-React-App Showing README.md
Sep 23, 2020 • 3 Minute Read
Introduction
You've finally completed your React app and pushed it to GitHub Pages to be deployed, but upon checking the live project you realize your app only renders the README.md file and not your amazing app. What now?
This guide will demonstrate the simplest solution possible for this. Grab a cup of coffee and sit tight while you learn to fix this issue.
Why README.md is Rendered
The reason why you see your README.md file being rendered instead of your app is because you have not generated the browser-friendly static assets (HTML, CSS, and JavaScript) needed for your app to run in the browser. Luckily, Create-React-App offers a built-in solution to help you bundle your assets with one command. Doing this would generate a production-ready bundle that is compatible with your browser.
Build Your App
Now that you understand the cause of this problem, you can easily fix it. First of all, ensure that your repository has GitHub Pages activated. Now add the following line to your package.json file.
"homepage" : "https://{your_github_username}.github.io/{app-name}"
#{your_github_username} - Your GitHub username
# {app-name} - Name of your application
Now run the command below to generate an optimized bundle for production.
yarn run build
OR
npm run build
In your project root, notice that Create-React-App generates a new folder called build. This folder is what contains the browser-friendly version of your app. Go ahead and explore the folder to get a better understanding.
Deploy
You've finally generated your app but it still has not been deployed yet. Remember the build folder generated by Create-React-App? That folder is what is needed in your repository. With the help of the GitHub Pages package, you can easily deploy the build folder without any trouble. Run the following command in your terminal to install the package.
yarn add gh-pages
OR
npm install --save gh-pages
Once the GitHub Pages packages completes installation successfully, your production build has to be pushed to your repository. To do that easily, run the following command in your terminal.
gh-pages -b master -d build
# -b : Branch
# -d : Directory
And voila! Your app should be up and running via the URL you provided as the value of the homepage property in your package.json file, thus https://{your_github_username}.github.io/{app-name}. Go ahead and check it out in your browser.
Conclusion
And that's it! You've successfully fixed the issue. If you want to learn how to deploy Create-React-App with GitHub Pages, read my previous guide on How to Deploy React on GitHub Pages. If you need more questions answered as well, I'll be glad to answer them on Twitter @DesmondNyamador.
