Routing Client Side/Packaging for Deployment

AcidLeroy commented 6 years ago

Expected behavior

I've written some routes that are not behaving as expected. I initially started off with the create-choo-app scaffolding; however, that required turned out to only be a good idea for development. When it came to deployment, my dynamic routes were all broken when I tried to push up my dist folder to s3 (where I am going to eventually host my choo site). So rather than use the fancy bankai package, I thought I would use browserify to get everything working. Again, this caused all my routes to break. Am I missing something, or do you have to run something like budo or bankai in order to serve the page up? Here is basically what I am doing:

index.html:

<html>
  <head>
    <script src='bundle.js'> </script>
  </head>
  <body>
  </body>
</html>

index.js

var html = require('choo/html')
var choo = require('choo')

var app = choo()
app.route('/', placeholder)
app.route('/:user', placeholder)
app.route('/:user/:repo', placeholder)
app.route('/:user/settings', placeholder)
app.route('/404', placeholder)

function placeholder (state) {
  console.log(state.params)
  return html`<body>placeholder</body>`
}

app.mount('body')

browserify command:

browserify index.js -o bundle.js

When I run a simple http server like python -m simpleHttpServer 8000 my initial route comes up fine. But then if I attempt to type localhost:8000/homer into the address bar I get a 404 error.

I would expect that I should get "placeholder".

I guess ultimately my question is how do I get everything nice and packaged in the browser so that I can manually type routes in the address bar and get the results I am anticipating? Thanks!

YerkoPalma commented 6 years ago

This is expected. Any route request are handled by the server choo, as a front end framework, can't do anything about that. What you need to do is redirect any static route to the route where your choo app lives.

AcidLeroy commented 6 years ago

@YerkoPalma, can you explain this in a bit more detail or point me to some docs where I can find out how to do this? Thanks!

AcidLeroy commented 6 years ago

@m-onz I guess this is expected behavior!

lvivier commented 6 years ago

@AcidLeroy the python simpleHTTPServer knows to rewrite the route / -> /index.html. That's why that route works. But it doesn't know to rewrite /homer, doesn't find a file called "homer", so it responds with a 404. You need to use a server that you can configure to rewrite the routes you want to use with your choo app.

At my work we use Caddy with its built-in rewrite directive for this purpose. Any full-featured HTTP server (nginx, Apache, etc.) can accomplish this.

m-onz commented 6 years ago

You can direct the user to a a route like /#homer/123/abc if the route is inside the current page. Choo is inherently just a single page app so. If you want to enforce a route like /homer/123/abc its probably necessary to route using http routing (see the core node http library).


var http = require('http')
http.createServer(function (req, res) {
    if(req.url.startsWith('/homer')) {
...

rook2pawn commented 2 years ago

There is an ongoing discussion over at https://github.com/http-party/http-server/issues/757#issuecomment-984590971

What I am looking for primarily is

something simple precisely like http-server
something canonical and precise for using choo
" What you need to do is redirect any static route to the route where your choo app lives." - this is fine but we need the precise set of rules.
I will probably work with @johannesloetzsch and @thornjad to see if we can use http-server a canonical means.

choojs / choo

Routing Client Side/Packaging for Deployment #676

Expected behavior