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.

Answer 2

Better than a RewriteRule, you can use this for Apache 2.2.16+:

FallbackResource /index.html

in your Apache configuration so that the RewriteRule doesn't need to run for every request. This will make sure every route in your ember application falls onto the index.html file.

Answer 3

@Pascal: He's not talking about actual page refreshes, but rather using Ember's history (location: 'history').

To answer your question, you will need to configure your .htaccess to serve up the content as usual to the JavaScript. Once your URLs are configured to load your application, then Ember will take care of everything for you as usual from the URL.

Answer 4

Yes, you would need to have matching routes on the server side. Not using the hash tag will force a reload of the page as well, slowing things down, and probably causing more refresh than should be necessary.

Plus you will need to pass state via the server, or use some variant of the browser local storage.