search

open-austin / budgetparty

Budget Party was built to help people understand and augment a city budget for Austin. It is an interactive app that is best used in context of a "Budget Party" event.
https://austinbudget.party
The Unlicense
25 stars 24 forks source link

Client side routing #202

Closed prestonp closed 7 years ago

prestonp commented 7 years ago

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: https://github.com/open-austin/budgetparty-landing/issues/6

prestonp commented 7 years ago

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

mateoclarke commented 7 years ago

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 https://github.com/open-austin/budgetparty/issues/43

prestonp commented 7 years ago

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