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:
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.