Ember.js, EmberCLI - removing the hash ( # ) from the URL

Question

So according to Ember's documentation Ember defaults to using the hashchange event. Thats why we have the fancy #/some/url setup. We can also set it to use the browser's history API.

I've noticed that most (if not all) sites listed on Built with Ember apparently use the history API. Which makes sense because it make the URL look more natural.

All that is to say I (sorta) understand where, how, and why the # gets tacked on.

My question relates specifically to EmberCLI. I've noticed that when I create a simple app the # is not in the URL. Is that because I havent deployed it yet? Or does the CLI default to the history api? If so, where is this set? I cant find an instance of

App.Router.reopen({
  location: 'history'
});

Answer 1

The first one I clicked used hash history ;) https://fnd.io/

By default Ember uses the hash change event, mostly due to cross browser compatibility. http://caniuse.com/history

In ember-cli it uses auto by default. http://emberjs.com/api/classes/Ember.Location.html#toc_autolocation

If you look in router.js you'll notice

var Router = Ember.Router.extend({
  location: YourAppENV.locationType
});

which pulls its settings from config/environment.js

module.exports = function(environment) {
  var ENV = {
    baseURL: '/',
    locationType: 'auto',
    EmberENV: {
    ....

Just as a quick plug, location history is a tad more difficult to set up, since you essentially have to tell your server to serve from the base page whenever it's hit, and ignore anything after that, but it's really just a one time setup.

Answer 2

For locationType: 'auto' Your routes will be http://localhost:4200/login

For locationType: 'hash' Your routes will be http://localhost:4200/#/login

That's it.