open-austin/budgetparty

Client side routing

prestonp opened this issue · 3 comments

So for single-page applications we need to figure out how we want to handle routing.

If we're going to host on github pages, we'll probably have to use HashRouter because we can't have sub-paths like https://austinbudget.party/home or https://austinbudget.party/login serve the javascript bundle. If we switch to HashRouter, the urls will look like https://austinbudget.party#home and https://austinbudget.party#login

If we want to keep normal looking urls, we will need to set up a web server that serves same html/javascript for ALL urls. Then the BrowserRouter will look at the document.location and route normally.

So, the one line to address this is here:

https://github.com/open-austin/budgetparty/blob/master/app/src/components/index.js#L8

@mateoclarke @VictoriaODell Do you guys have a preference for hosting or how the urls look?

More background: open-austin/budgetparty-landing#6

Actually, there's a trick to getting gh-pages to work like a normal single page app. It involves setting up a custom 404 page which is easy. https://github.com/rafrex/spa-github-pages

Interesting. I remember that we were using HashRouter instead of BrowserRouter in the first version of the app because BrowserRouter wouldn't work at all with gh-pages at the time. I seems like the redirect script would be slightly more preferable than ugly urls if you think it is easy.

See #43

The redirect trick is pretty clean, I say we do that