choojs / choojs/choo

Routing Client Side/Packaging for Deployment

Open
#676 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
6.8k
Forks
573
PR merge metrics
No merged PRs in 30d

Description

### 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:
```





```

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`placeholder`
}

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!

Contributor guide

Open the contributing guide

Research direction

Start with index.html and index.js, then reproduce the behavior using the documented browserify command and a simple HTTP server. Compare loading the root route with manually entering /homer and determine what deployment behavior is required for the dynamic route to render as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
devops, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.