Series: Journey to Ember-CLI

Moving to Ember CLI from Ember Appkit

Published on May 29, 2014

Ember CLI is replacing Ember App Kit. It's easier to install and update, it runs faster, and it has all the conveniences of Ember App Kit and more.

In this screencast, we're moving our Ember App Kit application to Ember CLI. It's a pretty smooth transition, but I guide you through a few common speed bumps.

This is the first pro episode. Sometime in July I'll be starting a subscription service, and pro episodes (3 episodes a month from now on) will be behind a paywall. Until then, please enjoy them for free.

Update: July 2014 turned into February/March 2015. Woops! The schema for what is free and what is paywalled has also changed slightly.




Hey, welcome back. In this SparkCast, we're going to be taking a look at Ember CLI. We're going to be taking our application and converting it into an Ember CLI application.

Ember CLI is a framework for creating Ember applications. It uses a lot of lessons learned from Ember App Kit. However, it's much easier to install and update since it's based on npm. It also uses the broccoli build tool instead of grunt. This screencast won't be talking about all the details. Here, I'll be telling you just enough so you can switch your Ember App Kit application to the current
version of Ember CLI.

The first step is to install Ember CLI. Do it through npm. We're making sure to install it globally so we can access it on the command line. Now, we can create a new Ember CLI project by typing "ember new" and then the name of our project. It will create all the files and then it will do an npm and Bower install automatically. You'll see that, just like in Ember App Kit, Ember CLI creates a lot of folders for you and already gives you a bunch of the boiler plate.

Now, there are two ways we can proceed. We can either copy and paste our files from out old project into our new Ember CLI project, or we can do Ember init in our old project. That will put in a bunch of Ember CLI files into that project. The downsides of the copy and paste are that it takes a little bit of time, you lose your commit history, and copy and paste is just ...

The downsides of Ember init are that you're going to have to overwrite and merge quite a few files, some of which you'll need parts from both so you'll have to end up going back to those and adding what you need back in. The other downside is that you don't really know which files are now useless. There are some that were needed in Ember App Kit that aren't now. They've been replaced by newer methods.

Here's a quick run-down of the files that we won't be needing anymore. To start off, your grunt file. That's been replaced with broccoli. Included with that are all the Bower and Npm modules that are supporting grunt. You'll notice that these lists are a lot shorter. Then, we won't be needing the API stubs folder anymore. That's been replaced with server, which is a full-on node server. Also, the task directory, which is there to support grunt. Finally, the environments folder in config. Go ahead and delete those and there might even be more, I'm not sure.

Now that you've either got your files copied over or you've done Ember init and deleted the excess files, we need to get a few things back into working order. The first will be getting our dependencies back into our app. In Ember App Kit, we had a file called index.html in the app folder and we used that to pull in all our vendor files. In Ember CLI, in our broc file, we say app.import which will do the same thing but quicker because broccoli is optimized for things like this.

The second big difference is how we use the proxy. In Ember App Kit, we use proxy URL and proxy path, specified in package.json. Here, we're going to use proxy as a command when we're running the Ember server. We'll run Ember server proxy and then give the full path. Except, if we use it just like that, it won't work. There's currently a bug in Ember CLI, version 0.28, that causes it to be able to get from the server but not to post to the server, unless you comment out this one line in server, index.js. If you comment this out, then it will work.

Let's test it out. We'll change the author name to Ben Franklin and then save, and it works. But, you will notice that our nice styling is going so we're going to get Bootstrap back in here. Let's start off by installing the Bootstrap sass package through Bower. Then, we're going to install an npm package that makes broccoli work well with sass. Then, we'll rename app.css to app.scss. Finally, in your app.scss, add this line that will import all of Bootstrap's css. We'll restart the server and then, when you load the page, Bootstrap is there. Now, you're completely on Ember CLI.

This week, I'd like to give a big shout-out to the Octolabs blog, where I took a few of the commands for getting Bootstrap working. I'd also like to thank Adolfo Builes, sorry if I mispronounced your name, who helped me out a lot on Ember CLI in IRC. Finally, if you're still watching on YouTube, you should know that I have a website and you can view stuff there. All right, I'll see you guys next week.

Journey to Ember-CLI

Subscribe to our mailing list