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 i

Answer 1

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 2

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.

Answer 3

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 4

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