Finna-Events / Finna-Events.github.io

Finna's Landing Page
https://finna.events
0 stars 0 forks source link

Routes aren't working? #6

Closed allenwhite closed 3 years ago

allenwhite commented 3 years ago

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.

gbuerk commented 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:

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 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 .

allenwhite commented 3 years ago

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.

gbuerk commented 3 years ago

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 .

allenwhite commented 3 years ago

Trying that! Couple of other things I noticed too. But this is definitely gettin the job done for right now. Thanks for your help!