Routing Client Side/Packaging for Deployment
- 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
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