Is there a configuration in Github Pages that allows you to redirect everything to index.html for a Single Page App?

Question

I'm trying to post my SPA app that works fine locally but when I push it to Github Pages, the interior pages don't register if you navigate to them directly.

For example http://USER.github.io/PROJECT_NAME/ works but http://USER.github.io/PROJECT_NAME/about doesn't because theres no redirect or rewrite. The index.html is located at the root of the project.

Answer 1

If you are creating react app and you want to use Browser router in your gh pages the solution is to create 404.html file in your root directory and copy all the content in index.html to 404.html after you have build your react-app.

When a user try accessing your page e.g https://successtar.github.io/teamwork/ GitHub will serve your index.html page while if a user try accessing https://successtar.github.io/teamwork/foo, since it does not exist, GitHub will serve the 404.html page which has same content as the index.html and with this you get your react app working as expected.

Here is the source code for the example https://github.com/successtar/teamwork/tree/gh-pages

UPDATE

You can automate the process for every time you run npm run build to auto generate the 404.html file.

First Step: install shx for cross platform commands as follow npm install shx --save-dev

Second Step: Go to your package.json in the scripts block replace "build": "react-scripts build" with "build": "react-scripts build && shx cp build/index.html build/404.html"

That is all.

Whenever you run npm run build the 404.html file will be auto generated.