Engines — In-App Boundaries

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.

4 min read Level 3/5 #ember#engines#architecture
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 →