Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Routing Client Side/Packaging for Deployment #676

Open
AcidLeroy opened this issue Jul 26, 2018 · 6 comments
Open

Routing Client Side/Packaging for Deployment #676

AcidLeroy opened this issue Jul 26, 2018 · 6 comments

Comments

@AcidLeroy
Copy link

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
Copy link
Member

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
Copy link
Author

@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
Copy link
Author

@m-onz I guess this is expected behavior!

@lvivier
Copy link

lvivier commented Jul 28, 2018 •
edited
Loading

@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
Copy link

m-onz commented Jul 30, 2018 •
edited
Loading

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
Copy link

There is an ongoing discussion over at http-party/http-server#757 (comment)

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.

@rook2pawn rook2pawn mentioned this issue Dec 19, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@rook2pawn @AcidLeroy @lvivier @YerkoPalma @m-onz