Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Setting up your first Ember.js application using Ember CLI

Now that we have some understanding of the features provided by Ember CLI, let's jump into how to set up your Ember CLI project.

Prerequisites

Before you set up your Ember CLI, you need to satisfy the dependencies required by the project.

Node – Ember CLI runs on node.js and hence it is important to install the latest version of node. To do that, please follow the instructions mentioned at http://nodejs.org.
Ember CLI – Once you have successfully installed node on your machine, it's time to install the ember-cli package using node package manager by running:
```
npm install –g ember-cli
```
This will install the Ember command line utility in your environment. Once the npm command finishes successfully, run ember help to check if the ember command line was installed properly.
Git – Please make sure that Git (http://git-scm.com/book/en/v2/Getting-Started-Installing-Git) is installed before installing bower, as some bower packages require it to be fetched and installed.
Bower – Ember CLI integrates with bower so that you can manage the frontend dependencies effectively in your project. To install bower, run the following program:
```
npm install –g bower
```
Similar to ember-cli, bower (http://bower.io/) will give you access to the bower command in your terminal.
To check if bower was installed properly, run bower -help in your terminal to see if you get the proper help message.
PhantomJS – Ember CLI uses PhantomJS (http://phantomjs.org/) to run your integration test. PhantomJS is a WebKit environment that can open your web applications in headless mode. It also provides a JavaScript API that gives you the capability to programmatically navigate, take screenshots, assert on page content, and more. To install PhantonJS, run:
```
npm install –g phantomjs
```

Creating a new application

Now that all your dependencies for Ember CLI are installed, let's create a new project using the Ember command line tool installed.

Run the following command in the terminal at the location where you want to create a new project:

ember new my-first-ember-app

Once the above command finishes, it will create a new application inside the my-first-ember-app folder. It will also generate the complete application structure for you, with all the dependencies for your application already installed.

Let's see what's generated inside the my-first-ember-app folder.

The app folder structure

The app folder structure is shown in the following screenshot:

The contents of the app folder generated within my-first-ember-app

Let's look at the app folder first. The app folder contains your Ember.js application building blocks:

app/components/ – This folder should contain all the components of your application. According to Ember CLI resolver conventions, the components' names should have a - in them. In the latest versions of Ember, there has been a lot more focus on components, rather than views. We will discuss more about components in Chapter 7, Building Reusable Components.
app/controllers/ – This folder should contain the controller modules of your application. Controllers are covered in Chapter 5, Handling Display Logic Using Ember.js Controllers.
app/helpers/ – This should contain all the handlebars helpers of your application. Handlebars and helper methods are covered in Chapter 3, Rendering Using Templates.
app/models/ – This contains all the ember-data model modules. You can learn more about ember-data and model classes in Chapter 6, Communicating with the API Server Using ember-data.
app/routes/ – All application routes should go inside this folder. Child routes are defined inside app/routes/parent/child.js. Routing is covered in Chapter 4, Managing Application State Using Ember.js Routes.
app/styles/ – This folder should contain all your style sheets.
app/templates/ – This folder should have all the handlebars/HTMLBars templates. You can learn more about templates in Chapter 3, Rendering Using Templates.
app/views/ – This folder contains all your application views.
app/router.js – This file contains your route configuration. The routes defined here are resolved from the modules defined in app/routes/.

app/app.js – This file is the main entry point of your application and contains the configuration that applies to your Ember.js application.

import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';

Ember.MODEL_FACTORY_INJECTIONS = true;

var App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver: Resolver
});

loadInitializers(App, config.modulePrefix);

export default App;

This is what the default generated app.js looks like. As you can see, it exports your Ember.js application, which inherits the Ember.Application class.

app/index.html – This is the main file for your single page web application. This is where the structure of your application is laid out. It includes the JavaScript and CSS files of your application. This file also includes certain hooks for the Ember CLI add-ons using {{content-for 'head'}}, {{content-for 'head-footer'}}, {{content-for 'body-footer'}}, and other such tags. These tags should not be touched unless you are developing your own add-on.

Supporting files and folders

Let's look at the rest of the generated files and folders present in my-first-ember-app directory.

The complete files and folders generated by the Ember command line tool

As you can see, there are a lot of folders and files generated to help you start working on your project faster than ever.

bower_components – This folder contains all the dependencies which the Ember CLI installs via bower. The bower components are listed in its configuration file bower.json present at the same level.
config/environment.js – The config folder is the placeholder for your application configurations. Ember CLI supports different configurations for different environments. By default, it has already created configurations for your application for development, test, and production environments. You can also add your configuration for any other custom environment you wish to use for your application.
If you look inside environment.js, you will notice that the environment module exports the configurations in an ENV object.
The ENV object can be imported into other files using the following statement:
```
import ENV from my-first-ember-app/config/environment';
```
To enable logging for your application in the development environment, you can add the configuration inside the if (environment === 'development') section. It is commented by default, so you can just uncomment the configuration you want for your environment. Here is how the final code block with logging enabled for the development environment will look:
```
if (environment === 'development') {
     ENV.APP.LOG_RESOLVER = true;
     ENV.APP.LOG_ACTIVE_GENERATION = true;
     ENV.APP.LOG_TRANSITIONS = true;
     ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
     ENV.APP.LOG_VIEW_LOOKUPS = true;
  }
```
Once you enable logging, you will start seeing the log messages inside the console of the development tools of your browser:
Log messages being logged in the code of your browser's development tools
By default, Ember.js will be attached to the body of your HTML document. You can change that by setting the ENV.APP.rootElement = '#ember-cli' property in the environment.js.
This will attach your Ember application to the DOM element that has an ID ember-cli. This is useful for cases where you are building a component of an existing website using Ember.js, and want to attach your div to an existing element.
node_modules – This folder contains the node dependencies used by Ember CLI.
public – This folder contains assets that should be copied as they are to the root of the packaged application, these assets will not go through the broccoli asset pipeline used by Ember CLI.
vendor – This folder should contain libraries which cannot be installed using bower or npm. The libraries in vendor should then be imported into the broccoli asset pipeline, by adding the necessary import statements in Brocfile.js.
test – This folder contains helpers and resolvers to run unit and integration tests using the Ember testing module for our application.
To run tests for your application, just run:
```
ember test
```
At your project's root location, it will run the unit and integration test in headless mode using phantomJS.
In order to continually run tests whenever you change any file, just run the following command:
```
ember test –server
```
You can also run tests in the browser when running the development server by navigating to http://localhost:4200/test/.
Ember CLI uses Qunit as its testing library, though you can plug in other libraries using their Ember add-ons.
Brocfile.js – This file contains the build instructions for the broccoli asset pipeline. If you add additional libraries such as bootstrap, you will have to include the assets of these libraries in Brocfile.js in order for them to be processed by the asset pipeline.
```
app.import('bower_components/bootstrap/dist/css/bootstrap.css'),
```
This will tell the asset pipeline to include bootstrap.css in your application.
```
app.import('vendor/my_library/mylibrary.js'),
```
This will tell the asset pipeline to include mylibrary.js present in the vendor directory.
bower.json – This file is the configuration file for bower, and contains the dependencies of your application that need to be installed via bower.
package.json – This is the node package manager configuration file. It contains the node.js dependencies required by your application.

Running your first Ember.js application

Now since we have understood all the libraries and the structure of our first Ember.js application.

To run your Ember CLI application while developing, run the following command in the projects root directory:

ember server

This will start a development server at port 4200. To run your application on a different port, you can pass in the port configuration to the Ember CLI as follows:

ember server –port 4300

Or you can add the following configuration to the .ember-cli file present in your project's root directory to permanently change the default configuration:

{
  "port": 4300
}

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for Setting up your first Ember.js application using Ember CLI

Create new playlist

Sign In