Getting started

With this book, we’ll create an app to keep track of items we lend to our friends. It’s a very simple app, but it will allow us to learn Ember. At the same time, we’ll learn how to use Ember CLI generators, work with third party libraries, and write Ember CLI add-ons.

Requirements

  1. Install Node.js. The easiest way is to download the installer from http://nodejs.org/.
  2. Install the ember-inspector. Click here for Chrome or here for Firefox.
  3. Install watchman for fast watching. We can start it with watchman watch ~/path-to-dir.
  4. Make sure you are not required to run npm (Node’s package manager) with sudo. To test this, run the following command
npm -g install ember-cli

If you were prompted to install as sudo, make sure you can run npm without it. Tyler Wendlandt wrote an excellent tutorial for installing npm without sudo: http://www.wenincode.com/installing-node-jsnpm-without-sudo. It’s very important that you are not required to run npm as sudo, otherwise you will have problems when running Ember CLI.

All set? Now let’s create our first Ember app.

ember new

Like other command line tools, Ember CLI comes with a bunch of useful commands. The first one we will explore is new, which creates a new project.

Creating a new project
ember new borrowers

The new command will create a directory with the following structure:

Project Structure
|-- README.md
|-- app
|-- bower.json
|-- bower_components
|-- config
|-- ember-cli-build.js
|-- node_modules
|-- package.json
|-- public
|-- testem.json
|-- tests
+-- vendor

Change directory into your project.

We will cover all the components as we move through this text, but the following are the most important.

  • app is where the app code is located: models, routes, templates, components and styles.
  • tests is where test code is located.
  • bower.json helps us manage JavaScript plugins via Bower.
  • package.json helps us with JavaScript dependencies via npm.

If everything is fine, we can do ember server and navigate to http://localhost:4200 where we should see a Welcome to Ember message.