Ember CLI is an integrated, rapid development environment for Ember applications. Based on Broccoli, a fast and reliable asset pipeline that runs on Node.js, Ember CLI is a powerful command-line interface that integrates many productivity tools and optimization utilities necessary for JavaScript development.
Ember CLI provides the following features and tools for Ember development:
- It creates a strong, convention-based project structure for Ember applications
- It generates Ember-specific application resources, such as routes, templates, and components, from the command line
- It supports template authoring in the Handlebars, HTMLBars, and Emblem.js formats
- It supports scripting in ES2015 (ES6) modules, CoffeeScript, and EmberScript syntaxes
- It supports CSS authoring in CSS, Sass, Compass, and Stylus
- It converts Node.js-style ES2015 modules into RequireJS-model AMD modules
- It integrates the npm and Bower package managers for managing dependencies to JS libraries
- It integrates a development server with LiveReload, which automatically rebuilds and updates code changes to all connected browsers
- It performs asset management functions for application resources (combining, minifying, uglifying, versioning, and so on)
- It enables the sharing of code and functionality using add-ons and blueprints
Later in this chapter, we will use Ember CLI as a development tool for building an Ember application and its various artifacts.
Ember CLI depends on Node.js. So, the first step is installing Node.js. Follow the instructions given on the website http://nodejs.org to set up Node.js.
Once Node.js is installed, you can install Ember CLI using npm, with the following command:
npm install -g ember-cli
Now, install Bower using the following command:
npm install -g bower
You may optionally install Watchman for better watching of code changes and the PhantomJS test-running environment.
Once Ember CLI is installed, you may start creating Ember applications incrementally using this set of commands to generate the required Ember artifacts:
When you use the ember new <project-name> command, Ember CLI generates and organizes files in a specific structure based on convention and then compiles them and performs a set of tasks during building and runtime. The following table describes the folder layout and important files generated by Ember CLI:
At the end of the build process, Ember CLI generates the deployable at dist/directory. You need to distribute the contents of this directory for hosting the deployable on a web server on release.
By default, the ember generate <generator> command generates artifacts inside specific resource directories directly under the app root directory. So, all your routes go under app/routes, templates under app/templates, and so on. However, this becomes a bit unmaintainable as the application grows. To solve this problem, Ember CLI provides the option of organizing your files in a feature-driven (POD) structure using the --pod flag when you generate an artifact using the ember generate command.
In order for the POD structure to work, you need to first configure the POD directory in config/environment.js as given in the following code:
module.exports = function(environment) {
var ENV = {
...
podModulePrefix: 'my-ember-app/pod-modules',
...
},
...
return ENV;
};The preceding snippet specifies that all the artifacts you generate with the --pod flag will be generated inside the <app-root>/pod-modules directory.
Once you configure the POD, you can start generating your artifacts with the --pod flag.
For example, if you want to generate a route inside the POD structure, use the following command:
ember generate route user --pod
This will generate the route file at /app/pod-modules/user/route.js.
POD modules group all the artifacts related to a feature in one place, thus making it more manageable.