Creating Your App

To create a new project using Ember CLI, use the new command. In preparation for the tutorial in the next section, you can make an app called super-rentals.

ember new super-rentals

A new project will be created inside your current directory. You can now go to your super-rentals project directory and start working on it.

cd super-rentals

The new command generates a project structure with the following files and directories:

|--app
|--config
|--public
|--node_modules
|--tests
|--vendor

bower.json
ember-cli-build.js
package.json
README.md
testem.js

Let's take a look at the folders and files Ember CLI generates.

app: This is where folders and files for models, components, routes, templates and styles are stored. The majority of your coding on an Ember project happens in this folder.

bower.json: Bower is a dependency management tool. It can be used to manage front-end plugins and component dependencies (HTML, CSS, JavaScript, etc). All Bower components are installed in the bower_components directory. If we add front-end dependencies, such as Bootstrap, we will see them listed here, and added to the bower_components directory.

config: The config directory contains the environment.js where you can configure settings for your app.

nodemodules / package.json: This directory and file are from npm. npm is the package manager for Node.js. Ember is built with Node and uses a variety of Node.js modules for operation. The package.json file maintains the list of current npm dependencies for the app. Any Ember CLI add-ons you install will also show up here. Packages listed in package.json are installed in the nodemodules directory.

public: This directory contains assets such as images and fonts.

vendor: This directory is where front-end dependencies (such as JavaScript or CSS) that are not managed by Bower go.

tests / testem.js: Automated tests for our app go in the tests folder, and Ember CLI's test runner testem is configured in testem.js.

ember-cli-build.js: This file describes how Ember CLI should build our app.

If you take a look at app/router.js, you'll notice some syntax that may be unfamiliar to you.

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
});

export default Router;

Ember CLI uses ECMAScript 2015 (ES2015 for short or previously known as ES6) modules to organize application code. For example, the line import Ember from 'ember'; gives us access to the actual Ember.js library as the variable Ember. And the import config from './config/environment'; line gives us access to our app's configuration data as the variable config. const is a way to declare a read-only variable, as to make sure it is not accidentally reassigned elsewhere. At the end of the file, export default Router; makes the Router variable defined in this file available to other parts of the app.

Once we have a new project in place, we can confirm everything is working by starting the Ember development server:

ember server

or, for short:

ember s

If we navigate to http://localhost:4200, we'll see the default welcome screen. Once we add our own app/templates/application.hbs file, the welcome screen will be replaced with our own content.