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.
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.