Ember CLI, locationType: ‘hash’, and serving index.html for all URLs

Question

I have a particular use case where I want to use the URL hash for routing within Ember, AND I want for the path part of the URL to be somewhat dynamic too.

For example:

localhost:4200/#/properties/edit

Would work exactly the same as this:

localhost:4200/about/#/properties/edit

Or this:

localhost:4200/products/widgets/model-5000/#/properties/edit

It would be 100% acceptable if navigating between these different example URLs above would produce a full page refresh, though any hash change in the URL would keep it on the "single page."

I want for all of these URLs to point to the app/index.html file and for Ember CLI to kind of "ignore" the path, but I cannot figure out how to configure Ember CLI to do this when it's serving the app. For example, the /about scenario above gives me the error Cannot GET /about .

Is this possible with plain vanilla Ember CLI, or will I need to turn to something like ember-cli-rails to have more flexible routing in development? I'd assume that configuring this to work properly in production would be relatively simple, but I need something that works for development too.

Answer 1

Yes you can use a wildcard: http://emberjs.com/guides/routing/defining-your-routes/#toc_wildcard-globbing-routes

import Ember from 'ember'; import config from './config/environment';

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

Router.map(function() {
  this.resource('index', { path: "/*wildcard" }, function() {
    this.route("properties", function() {
      this.route("edit");
    });
  });
});

export default Router;

Answer 2

The solution was to create an Ember CLI add-on: ember-cli-hash-anywhere .

With that installed, the web server ignores the path part of the URL and serves up index.html every time.