ember.js - Client-side Javascript app - url routing with no hash tag

Question

I'm working on a new client-side only app with the latest version of Ember.js. There is a single PHP page which builds the scripts, css, template files, etc. and delivers it all into index.php. I'm using an htaccess directive so that all requests are rewritten to /index.php. The PHP is only there to conveniently package the Javascript, as far as I'm concerned.

Currently, routes in the browser look like this and work just fine.

/#/about 
/#/favorites
/#/etc
/#/posts/5/edit

However, I would like them to look like this - which do not work just fine.

/about
/favorites
/etc
/posts/5/edit

The exact same client-code is still delivered with the second option - but it always hits the index route handler. I've seen client-side apps pull this off before - what am I missing? Do I need to have matching route handlers on the PHP side?

Edit: I'm looking for a specific answer of how to approach this. The web is full of "oh - you just do this" information that leaves everybody else scratching their heads.

Answer 1

In Ember.js (version 1.0.0rc3) this can be accomplished by using the Ember.js location API:

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

And then setting the web server to redirect traffic to the Ember application.

To give a concrete example here is a basic Apache .htaccess file redirecting traffic to the Ember application located in index.html:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html#$1 [L]

As Alex White points out Apache 2.2.16 and above supports a simpler configuration for redirecting traffic to a single target:

FallbackResource /index.html

The FallbackResource is part of the mod_dir module and requires AllowOverride Indexes to be set.

Make sure to test the application routes thoroughly. One common error is Uncaught SyntaxError: Unexpected token <, which is caused by using relative links to CSS and JS files. Prepend them with a / mark to make them absolute.

This functionality is not supported in Internet Explorer <10.