The difference between `rootURL` and `baseURL`

These properties do very different things yet they can be used to accomplish very similar goals. For this reason they are confusing and oftentimes used interchangeably. But beware, they also have very distinct pitfalls.

baseURL

//config/environment.js
 ENV.baseURL='/app/foo';

Results in:

<!--index.html-->

<base href="/app/foo">

So when the index.html loads an asset, the browser will internally prepend baseURL:

<script src="assets/vendor.js"></script>

is treated like:

<script src="app/foo/assets/vendor.js"></script>

rootURL

//app/router.js
var Router = Ember.Router.extend({
  rootURL: '/app/foo/'
});

Unlike baseURL this will not affect the asset URLs. This parameter tells Ember that the root index route starts at /app/foo/. So even if you define a route that has a path of '/' such as:

this.route('dashboard', { path: '/' });

Ember will recognize /app/foo/ as the dashboard route.

Would you like to know more?

Read about the pitfalls of rootURL and baseURL.

Tweet