Search code examples
javascripthtmlreactjsgithubgithub-pages

Publish React App onto Github Page but Shows Blank Page

I have successfully uploaded a simple react app onto GitHub page using gh-pages, and now I'm trying to import the Shards dashboard project(https://github.com/DesignRevision/shards-dashboard-react) onto my GitHub page but it only shows a blank page.

Below is information I have so far:

  1. My GitHub project and page address are

https://github.com/HarveyLijh/Company_ESG_Rating_App https://harveylijh.github.io/Company_ESG_Rating_App/

  1. The Shards dashboard project runs perfectly on my local
  2. My package.json looks like this enter image description here
  1. My chrome inspect window looks like this enter image description here
  1. I have run the npm run deploy to build, and it runs perfectly without error
  2. I uploaded my newly-created build folder onto my GitHub repo from the last command

why is this happening?

Solution

  • You need to understand how URLs work. URL is a path that point to some specific resource on server. But how to locate that resource specified by a URL is totally up to the server to interpret. This interpretation is termed as "resolution".

    Server can naively map the URL to the local filesystem path to a physical file on hard-disk. E.g. http://localhost/foobar/dist/index.html is likely pointing to somewhere like /etc/www/foobar/dist/index.html if you’re running nginx or apache server.

    It can also be a in-memory file that’s generated on-the-fly by server. Php server typically does that. http://localhost/home.php is not a physical HTML file on disk. But the server generate HTML content on requested.

    Now there’s another approach in the middle ground, which explains your situation.

    The server can resolve the main path:

    and all its sub-paths:

    all these paths point to the same index.html file at: https://raw.githubusercontent.com/HarveyLijh/Company_ESG_Rating_App/gh-pages/index.html, which is a physical file on disk.

    The server only sends the same HTML to the browser. When browser finished loading the page, JS steps in, readd the URL in your address bar, and further decides which "state", or "route", should be rendered inside the React app.

    That's how BrowserRouter works.

    Browser exposes the History API to JS. With that API, JS can control the URL displayed in address bar, without actually go away to another page. In other word, the default behavior of entering URL in address bar and hit ENTER key is disabled temporarily. All that time you all just viewing the same index.html file.

    To support BrowserRouter, github page service must first support the aforementioned behavior of resolving sub-paths to the same index.html, but unfortunately this is not configurable.

    Solution

    There's an easy hack: just copy your index.html and rename it to 404.html!

    Cus all sub-paths resolution would fail, and github page will resort to displaying 404.html, and voila, problem solved!

    For more detail of this hack, see: https://github.com/rafgraph/spa-github-pages