Old Guides - You are viewing the guides for Ember v5.11.0.
Go to v6.0.0

Embedding Applications

In most cases, your application's entire UI will be created by templates that are managed by the router.

But what if you have an Ember.js app that you need to embed into an existing page, or run alongside other JavaScript frameworks, or serve from the same domain as another app?

Changing the Root Element

By default, your application will render the application template and attach it to the document's body element.

You can tell the application to append the application template to a different element by specifying its rootElement property:

app/app.js
import Application from '@ember/application';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

export default class App extends Application {
  rootElement = '#app';
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
}

loadInitializers(App, config.modulePrefix);

This property can be specified as either an element or a jQuery-compatible selector string.

Disabling URL Management

You can prevent Ember from making changes to the URL by changing the router's location to none:

config/environment.js
/* eslint-env node */

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'my-blog',
    environment: environment,
    rootURL: '/',
    locationType: 'auto',
    locationType: 'none',
    …
  };

  …

  return ENV;
}

Specifying a Root URL

If your Ember application is one of multiple web applications served from the same domain, it may be necessary to indicate to the router what the root URL for your Ember application is. By default, Ember will assume it is served from the root of your domain.

For example, if you wanted to serve your blogging application from http://emberjs.com/blog/, it would be necessary to specify a root URL of /blog/.

This can be achieved by configuring the rootURL property on ENV:

config/environment.js
/* eslint-env node */

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'my-blog',
    environment: environment,
    rootURL: '/',
    rootURL: '/blog/',
    locationType: 'auto',
    …
  };
}

You will notice that this is then used to configure your application's router:

app/router.js
import Router from '@ember/routing/router';
import config from './config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function() {
});
On this page