Transitioning to Ember CLI

transitioning-to-ember-cli.md

Transitioning to Ember CLI

• Ember CLI Documentation
• Migrating to Ember CLI
• EmberApp Broccoli Helper

Folder Configuration

Ember CLI expects folders to be a certain way, particularly the app folder. You may choose to refactor, or you may choose to keep your own structure. The following is an example of a Broccoli configuration to do so:

// Brocfile.js

var app = new EmberApp({
  name: 'company-namespace/some-app-name',
  trees: {
    app: mergeTrees(['app', 'app/js'], { overwrite: true }),
    styles: 'app/less',
    templates: 'app/hbs'
  },
  outputPaths: {
    app: {
      css: '/assets/app.css',
      js: '/assets/app.js'
    }
  }
});

Furthermore, make sure you import configuration using absolute module path in instead:

// app.js

import config from 'company-namespace/some-app-name/config/environment';

Unfortunately it seems you can't customize the primary application entry point. Rename your 'application.js' to 'app.js' and place it at the root of your 'app' tree. Be sure to rename other associated application files, like your ApplicationController, etc.

Improve performance a bit by unwatching those custom folders:

// Brocfile.js

var remove = require('broccoli-file-remover');

// The fact that these folders are hard-coded is a bug
EmberApp.prototype.removeStylesAndTemplates = function(tree) {
  return remove(tree, {
    paths: ['less', 'styles', 'hbs']
  });
};

Modules

Ember CLI explicitly wants you to import ember and ember-data (DS). Edit and cast the following CLI incantation to add these import statments to all files that JSHint complains about.

Assets

Public assets should be in public/assets. Use app.import to add Bower JS and CSS one by one...

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
  destDir: 'assets' // optional to place as 'assets/ontawesome-webfont.ttf' instead of 'assets/ont-awesome/fonts/fontawesome-webfont.ttf'
});

... or use static-compiler to do harder work for you.

Make sure you are using versions of libraries that play nicely with ember-cli and that youare using the correct app.import statements for that version. For example, the ember-simple-auth app.import configuration for v0.5.3 is different than for newer versions.