Handling Routes

In notebook:
Building Modern Web Apps
Created at:
2016-01-21
Updated:
2016-01-21
Tags:
React libraries JavaScript Ampersand Webpack
The public dir is only for output

New app.js file
  window.app = {
    init () {
        
    }
}

window.app.init();
Will now add a router. 
Router
Matcing urls to a handler
Client-side routing - the server has to know a range of urls that it will always respond with the same response (let the client app take over)

Creates a router.js
  import Router from 'ampersand-router'
Very similar to backbone router
To export code with ES6 from a module:
​export default the_one_thing_you_want_to_export​
  import Router from 'ampersand-router'

export default Router.extend({
    routes: {
        '':'public',
        'repos': 'repos'
    },
    public () {
        console.log('public')  
    },
    repos () {
        console.log('repos')
    }
})
The ​routes​ object is a pair of urls (here: ' ' is the root, and 'public' is the public directory/url) and handlers, listed below

Someone notices that public is a reserved word in JavaScript (but in ES6 you can use them as properties)
In app.js : 
  //**** 1. import
import Router from './router'

window.app = {
    init () {
      //**** 2. instantiate
      this.router = new Router();
      //**** 3. start the router
      this.router.history.start();
    }
}

window.app.init();
You can add as many routers as you want (at 2.), but you only need to start once
Now you can go localhost:3000 and localhost:3000/repos and you get the name in the console. Plus some webpack dev server logs