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.
Before you set up your Ember CLI, you need to satisfy the dependencies required by the project.
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.
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.
npm install –g phantomjs
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 is shown in the following screenshot:
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.Let's look at the rest of the generated files and folders present in my-first-ember-app
directory.
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:
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.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 }
18.117.187.62