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

I just built this tiny package (for bower / npm) to solves that exact problem so I thought I'd share it here as an answer to your question,

https://github.com/websemantics/gh-pages-spa

If you include the package in your 404.html and index.html pages, it will redirect all the traffic to Index.html,

It supports Project and User/Org Pages type repositories, handles QueryStrings and comes with a working example,

Answer 2

Github pages allows you to create a 404.html page that will be shown each time ... there is a 404 error. If http://USER.github.io/PROJECT_NAME/about doesn't exists, it will show your 404.html content with the "not found" url as window.location.

So, this page can contain a script that redirect to a hashbang style route. eg : react router, even using clean urls (browserHistory) can understand a route like PROJECT_NAME/#/about and will automatically push to PROJECT_NAME/about.

That's ugly !

Answer 3

Since you're using React, the HOWTO in create-react-app should work.

Basically, add a homepage field to package.json and install the gh-pages package.