Creating a new Ember project

Jun 15, 2015

Table of contents:

1. Installing Node
2. Install Ember CLI and Bower
3. Create a new Ember application
4. View the application in the browser
5. Run the tests
6. Run tests on every file change
7. Conclusion

Over the last couple of weeks we’ve covered a lot of the basics of Ember. Whilst we haven’t went into too much depth in any one area, hopefully you should now have a general understanding of the core characteristics of the framework and how it fundamentally works.

One thing we haven’t touched upon in testing. Testing is an extremely important tool in any modern developer’s tool belt.

However, testing is difficult to pick up when you only read about it in abstract tutorials.

Originally I had a couple of posts that went through the various techniques of testing an Ember application.

However, when I reread those articles back, it felt like there was a big piece missing.

So instead of showing you “how to write unit tests in Ember” or “how to write acceptance tests in Ember”, we’re going to actually create an application using Test Driven Development.

I think seeing Test Driven Development in action is a lot more valuable than knowing the syntax of writing tests. It’s not what you write that is important, it’s the conceptional value of the tests that we’re looking for.

So in today’s tutorial we’re going to go back over the basics of creating a new Ember application as a foundation to what is coming over the next couple of weeks.

Installing Node

To create a new Ember application we’re going to need Ember CLI. Ember CLI is a command line utility that ties together everything you will need to create Ember applications.

Don’t worry if you’re not used to using the Command Line, I promise using Ember CLI will make your life easier, not harder.

As with all installation type tutorials I write on Culttt, I’m using OS X as my operating system. The following commands should be pretty easy to translate to *nix operating systems, however, if you’re using Windows, sorry but you’re on your own!

To install Node I’m going to use Homebrew:

homebrew install node

Install Ember CLI and Bower

Now that we have Node installed we can use NPM to install Ember CLI and Bower. Bower is a package manager of Javascript applications:

npm install -g ember-cli bower

Create a new Ember application

With Ember CLI installed, we can now create a new Ember application:

ember new my-app

Replace my-app with the name of your application.

This command will generate the file structure for your new Ember application.

View the application in the browser

Now that the application has been generated everything should be in place for us to view it in the browser.

cd into the directory of your application.

Next, run the following command:

ember serve

Now if you visit https://localhost:4200 in your browser you should see the Welcome to Ember.js screen.

Run the tests

Next, we can run the tests to make sure everything is working as it should as a baseline.

In order for this to work you might need to install PhantomJS if you don’t already have it:

brew install phantomjs

Now if you run the following command, the default tests should run successfully:

ember test

Run tests on every file change

Finally, running the test command over and over again is going to get laborious. Ember CLI allows you to run the tests after every file change with the following command:

ember test —server

Now when you save a file your tests will automatically be run.

Conclusion

This was the basic set up for an Ember application. We now have the tools in place to create new Ember instances whenever we start a new project.

In this tutorial we installed Ember CLI and Bower and we also created a fresh new Ember application.

Out of the box the Ember application can be booted up and viewed in the browser. It also has a couple of tests you can run through to make sure everything has been set up correctly.

Next week we will start using TDD to start developing the application.