Ember is an opinionated Javascript framework. It makes building long lived, large web applications easy and fast. To begin exploring it, we'll walk through the installation process. We will be using Ember CLI to generate and manage our projects. Ember CLI is a powerful tool that gives Ember some decided advantages over other JavaScript frameworks. First, it provides a file structure that all Ember developers are familiar with. So, if you have an Ember CLI project, you can hire an Ember developer and they should be able to understand your product and even possibly commit code on their first day. Ember CLI also provides a command line interface, and a baked in build process, all of this with the the goal of increasing developer productivity. Let's get started.

Installing

Installing Ember CLI is easy. Just use npm to globally install the ember-cli package: 

$ npm install -g ember-cli@2.6.2

To confirm installation: 

$ ember -v

ember-cli: 2.6.2
node: 5.4.0

Now we are ready to create our first Ember project. If you are familiar with Rails, you will likely find Ember CLI very comfortable.

Creating our first project

To create a new project type: 

$ ember new first-project

This may take a while…

Let's change into our new directory. 

$ cd first-project/

If you take a minute and look at our new project structure you might find it looks pretty familiar.

Inside the app directory is where we will spend most of our development time. We will go in more depth here later. For now, let’s get our app up and running.

From the project root: 

$ ember server

Then, in your browser, visit: http://localhost:4200

You now have a functioning Ember app.

Let’s kill the server and go ahead and remove that ember-welcome-page addon from our package.json file. 

$ vi package.json

Remove the line that says ember-welcome-page . Now, restart our server: 

ember server

Look back at our browser, and now, of course, there is nothing there. Let’s create an application template. 

$ vi app/templates/application.hbs

Add: 

<h1>The Ember App</h1>

And save.

When we look back at at our site, we now see our message.

The application template is the parent of all your ember templates. As long as your Ember app is running, your application template is at the top.

Let's go back to our application template and add one line: 

{{outlet}}

We'll learn more about this syntax later, but for now, just know that Ember uses Handlebars syntax for templates. This outlet will provide a place for the direct children of our application route to render their templates.

To see this in action, lets add one more file. 

$ vi app/templates/index.hbs

In your new index file add the following: 

Hello from the index template!

Visit your site again and you will notice that your message from the index template appears in our application template's {{outlet}} . Normally, ember requires us to define routes to match our templates. However, index and application templates and routes are special cases. We don't have to define routes to handle these as they are defaults. As you probably guessed, just as the application template is the parent of all your templates, the application route is the parent of all your ember routes, and index is the default route for the root path. Since we aren't doing anything outside of the default behavior and since we didn't manually create an application or index route, Ember will provide those route instances for us.

Summary

That’s it for today. We now have Ember CLI installed and we have a working Ember application. Tomorrow we are going to get the Ember Inspector installed.

Resources