choojs
Routing Client Side/Packaging for Deployment
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!
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.
@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 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.
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')) {
...
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.
