The Application

The Application class extends Ember's Application, wires up the resolver, and starts the app — the closest thing Ember has to a "main" function.

4 min read Level 2/5 #ember#application#resolver

What you'll learn

Read app/app.js end-to-end
Understand how the Resolver maps names to files
Recognize modulePrefix and podModulePrefix

Most frameworks have a main or index.js. In Ember, that file is app/app.js — the Application class. It is tiny but central.

app/app.js

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

export default class App extends Application {
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
}

loadInitializers(App, config.modulePrefix);

The class extends Application, sets its modulePrefix (matches name in package.json), and plugs in the Resolver.

What the Resolver Does

The resolver maps logical names to ES module paths. When Ember needs component:my-button, the resolver looks for:

app/components/my-button.js         # Glimmer class
app/components/my-button.hbs        # template

Similarly, service:auth resolves to app/services/auth.js, and route:posts.index resolves to app/routes/posts/index.js. This is why you never import your own components or services — the resolver finds them.

Initializers

// app/initializers/setup-sentry.js
export function initialize(application) {
  application.register('sentry:main', sentryClient, { instantiate: false });
}

export default { name: 'setup-sentry', initialize };

Initializers run once at boot, perfect for registering third-party clients on the dependency-injection container.

Routes — The Backbone of Ember →