Series: Journey to Ember-CLI

Intro to Ember App Kit

Published on Apr 17, 2014

How to start a new Ember App Kit project.


  • Source code (really just a copy of the Ember App Kit starter kit)



Hey and welcome back to Ember Sparks. So far our application has only been using one JavaScript file, one HTML file and then some pasted in library files. However our app is starting to grow and if we don't find a better foundation for it, we are going to start running into some problems.

The first problem is that our files are going to get very long if we're trying to stuff all of our JavaScript into one app.js and all of our templates into one index.html.

The second is that all of our dependencies have to be updated manually. If a new version of Ember comes out, we have to get and check to make sure that it works correctly with the Ember data and Handlebars versions that we are using, and that's going to get increasingly difficult as we rely on more and more libraries.

The third is that connecting with the server through Cross Origin Resource Sharing, or CORS, doing it without proper tooling is pretty difficult and that's one reason why this screen cast is late, is because I was trying to do that without the proper tooling.

So if we keep on with our current architecture, eventually we are going to have lots of issues.

What tools will we need? When I was deciding which tool to use for the screen cast, I went for the most accessible options. That means the ones that use rails were out because that could alienate a good 10% of our listeners, and ones that were still in beta were also out, that leaves Ember App Kit. However it should be noted that Ember CLI will be coming out of beta within the next few months hopefully and at that point we'll make the switch.

The recommended method for getting started with Ember App Kit is to download the zip file from their site, then go ahead and rename it whatever you want as well as moving it around to the correct directory and then go ahead and cd into that folder. Once you are there, run npm install to get everything setup, then run grunt server, then go ahead and visit on localhost:8000, and that's really all there is to it.

Ember App Kit has a lot of cool features right out of the box. It has Bower set up to give us the latest Ember as well as a lot of commonly used libraries. It has grunt setup to concatenate our files and it has a folder structure that encourages good organization and there is a lot more. We'll start exploring those next week when we inport our app into the structure. See you then.

Journey to Ember-CLI

Subscribe to our mailing list