Closed allenwhite closed 3 years ago
This is a known github pages thing. The server does not respect SPA routes. There are tons of blogs on how to do work arounds to solve this issue, but the long and short is you'll need something like this: https://github.com/websemantics/gh-pages-spa/blob/master/ghspa.js
This issue is that when you go to a page like /privacy-policy, github pages will look for a file called privacy-policy.html or privacy-policy/index.html. If it doesn't find either of those, it returns 404.html. That's just how gh pages works. A server that respects SPA routes would redirect to index.html and let the client handle resolving the route. React router and angular router and others all have this same issue on gh pages.
The work arounds that people blog about are all using the same basic technique. You create a custom 404.html for gh pages to serve. It has some logic to capture the intended url (whatever was in the url bar) and cache it off somewhere. Some use local storage, others tokenize the original url as a query param to the following redirect, this is where it gets creative. Then, they all do a client-side redirect to the root of the app. Lastly, in the root index.html, they check the cache or query param or whatever and pass that to the client side router (or manually add a push state or whatever, again, a little creativity here).
The work around I pasted above is a little script that works as an example. This is another repo that many of the blogs reference or use directly: https://github.com/rafgraph/spa-github-pages
On Fri, Oct 2, 2020, 11:41 PM Allen White notifications@github.com wrote:
We have the build folder deploying to the gh-pages branch but it doesn't seem to be routing correctly. It does locally. Any idea what we are missing, @gbuerk https://github.com/gbuerk ?
For example, this link to the home page https://finna.events or this link to the home page https://finna.events/home work fine, but this privacy policy route https://finna.events/privacy-policy doesn't. The events routes do not work either, and neither does our default route.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Finna-Events/Finna-Events.github.io/issues/6, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEBJAWT3EYKIFS7JLVHYJBTSI2MNNANCNFSM4SCMH5DQ .
I saw some people mentioning solutions like this yesterday but figured id ask. I ended up going with this solution, which makes index.html
and 404.html
identical. It seems like it's working? Although I need to set the title of the page a little better.
Interesting idea. Very clever. I haven't seen that one before.
Looks like you left the 404 title - may want to update that.
On Sat, Oct 3, 2020, 10:38 PM Allen White notifications@github.com wrote:
I saw some people mentioning solutions like this yesterday but figured id ask. I ended up going with this solution https://github.com/Finna-Events/Finna-Events.github.io/blob/master/public/404.html, which makes index.html and 404.html identical. It seems like it's working? Although I need to set the title of the page a little better.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Finna-Events/Finna-Events.github.io/issues/6#issuecomment-703191617, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEBJAWTYIPGQVAYOAVXHJL3SI7NZPANCNFSM4SCMH5DQ .
Trying that! Couple of other things I noticed too. But this is definitely gettin the job done for right now. Thanks for your help!
https://github.com/Finna-Events/Finna-Events.github.io/blob/2e829407d412f0a541945ec30b8e4f11eddeac2d/src/Routes.js#L20
We have the build folder deploying to the
gh-pages
branch but it doesn't seem to be routing correctly. It does locally. Any idea what we are missing, @gbuerk ?For example, this link to the home page works fine, but this privacy policy route doesn't. The events routes do not work either, and neither does our default route.