Author avatar

Desmond Nyamador

Fix Create-React-App Showing README.md

Desmond Nyamador

  • Sep 23, 2020
  • 3 Min read
  • 12,519 Views
  • Sep 23, 2020
  • 3 Min read
  • 12,519 Views
Web Development
Client-side Frameworks
React
Front End Web Development
Introduction

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.

1"homepage" : "https://{your_github_username}.github.io/{app-name}"
2
3#{your_github_username} - Your GitHub username
4# {app-name} - Name of your application
json

Now run the command below to generate an optimized bundle for production.

1yarn run build
2
3		OR
4
5npm run build
bash

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.

1yarn add gh-pages
2
3	OR
4
5npm install --save gh-pages
bash

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.

1gh-pages -b master -d build
2
3# -b : Branch
4# -d : Directory
bash

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.

LEARN MORE