Ember CLI

Init and Server

The CLI will bootstrap a new project for you. Plus other stuff I suppose.

Create a new project (and folder with the same name)

ember new yourProjectName

Start the Ember web server

Navigate (cd) to your project’s folder and enter ember serve.

Generate Commands

Sometimes when using ember generate it will respond with the cryptic phrase Yndh.

Yndh stands for Yes, no, diff, help.

Templates

Templates should probably be plural (e.g. ember generate template todos).

ember generate template objectName

Models

Models should probably be singular (e.g. ember generate model todo).

ember generate model objectName

Adapters

These are ways to get at your data store.

ember generate adapter application

Resources

This will create a route (in the router.js file), a model (with the same name), and a template file. It does not generate a resource in the router.js file; you are going to have to manually create the resource.

ember generate resource objectName

A typical resource in the router.js file looks like this:

import Ember from 'ember';
import config from './config/environment';
 
var Router = Ember.Router.extend({
	location: config.locationType
});
 
Router.map(function() {
	this.resource('logic', {path: '/'}, function() {
		this.route('new');
	});
});

export default Router;

Routes

ember generate route objectName

If you want to create a route inside of a resource, then include the resource’s path. e.g.:

ember generate route resource/objectName

Components

Components have to have a hyphen in the name, this is so they don't clash with future html components that may be released.

ember generate component objectName

Adding Other Files

Public folder

You may need to add pre-build items to your site (for example, your company’s header and footer). This may be comprised of JS, CSS, images, etc. If they don’t need to be compiled, then place it in the “public” folder which will simply do a straight copy to the “dist” folder when the site is built by Broccoli. They will not go through the Broccoli asset pipeline.

Vendor folder

This is used in a similar fashion as the “public” folder, except the files are to copied anywhere by default; you must explicitly add these to the Brocfile.js file. Items in this folder should be libraries that can not be installed via npm or bower. When Broccoli compiles theses items they will get added to /dist/assets/vendor.js and /dist/assets/vendor.css.

Broccoli – Asset Compilation

Broccoli, similar to Grunt, will run tasks to compile and concatentate Javascript ES6 files and CSS Preprocessors (SASS, LESS). As of ember-cli 0.2.7, Broccoli prefers to deal with individual files (vs adding a whole directory) in the Brocfile.js file.