Mini-Apps Embedded in Your App
Engines — In-App Boundaries
ember-engines splits a large app into independently-built sub-apps with their own routes, services, and build artifacts.
What you'll learn
- Install ember-engines
- Mount an engine at a parent route
- Use lazy engines to code-split a route
Engines let a single Ember app embed mini-apps inside it. Each engine has its own routes, controllers, services, and build output — useful for very large monoliths or for code-splitting an admin area.
Install
ember install ember-engines
ember addon settings-engine --target-engine The second command scaffolds a new engine called settings-engine (it lives
as a sibling Ember addon).
Mounting an Engine
// app/router.js
import EmberRouter from '@ember/routing/router';
export default class Router extends EmberRouter {
location = 'history';
rootURL = '/';
}
Router.map(function () {
this.mount('settings-engine', { as: 'settings', path: '/settings' });
}); Anyone navigating to /settings/* now lands inside the engine’s own
router and template tree.
Lazy Engines
A lazy engine ships in its own bundle and downloads on demand:
// lib/settings-engine/package.json
{
"name": "settings-engine",
"keywords": ["ember-engine"],
"ember-addon": {
"lazyLoading": { "enabled": true }
}
} The host app sees a placeholder route until the user actually visits
/settings, at which point the chunk loads.
Sharing Services
Declare which host services the engine wants to consume:
// lib/settings-engine/addon/engine.js
import Engine from 'ember-engines/engine';
export default class SettingsEngine extends Engine {
modulePrefix = 'settings-engine';
dependencies = {
services: ['session', 'store'],
};
} The host then passes them at mount time. Engines are heavy machinery — reach for them only when a plain route folder is not enough.
Build & Bundle →