Skip to main content

17 Your First Ember App

Episode 154 · November 21, 2016

Install and build your first Ember app

Ember Javascript Frontend


Our goal for this video, is to get ember up and running on your system, and then make a very very simple app. First we'll download nodejs if you haven't already. So you download it, and that will install nodejs and npm for you. npm is the node package manager, and that's how we're going to get a lot of the software that we're going to be using. Firs we're going to install using npm, this is after you've downloaded and installed npm. We'll install bower, which is another package manager, and we'll do -g so that we can install globally so we can access it anywhere. Now we're going to install ember cli npm install-g ember -cli ember cli is the command line interface that goes with ember, and ti's a lot more than just a command line interface. It also provides the file structure, the generators, the test harness, the whole addon ecosystem. Ember is a framework for what you end up putting online, while ember cli is the framework for all the other tools that go in to creating that final product. Now that ember cli is installed, let's se it for the first time, so we're going to generate a new ember project ember new ember-frontend So it's going to create a bunch of files, and it's going to start installing the default packages that it's giving us, we'll look at those in just a second, but let's go ahead and see our ember app in action first. So we'll cd in to the the directory that we made, and then we'll type ember s, now we'll visit our app in localhost:4200, and if you see this page, then it's working, congratulations. Now it's time to open up your codebase in your favorite text editor. So here's our file structure, it's going to be pretty familiar to you since you've been doing rails you've got your app which contains much of your app separated out into different types of files, so components, controllers, those are different than rails controllers by the way, and models, routes, templates, and then you've got all your config, you've got your tests, and then a bunch of configuration files. We'll look at two of those right now. The first is package.json, this is where npm goes to know what dependencies that it needs to download. This is the set of packages that comes with ember cli by default, so we've got something to help us with ajax, we've got of course ember cli itself, we've got things like babble, so you can write in ES6, almost anywhere in your ember app. You've got ember data to help you talk with the server, you've got js hint and liver load. Those are really useful. qunit for testing, and several other things. You've also got a bower.json file, which does some of your other dependencies, and this is slowly being phased out, thy're wanting to get rid of it eventually, but it's still useful for things that might not have an npm package yet, so now that we know the lay of the land a little bit, let's go ahead and make our first customization. We're going to go and we're going to use the ember generate command, or ember g route application. The application route, just like in rails, is a little bit special. It's the base route. That's what's going to be shown when you're here at the main base page. One of the files that was generated was the template application.hbs, and hbs is handlebars, and we'll get to that in just a second, but first it's basically html with some extra things thrown in. We'll go ahead and write some html, and then we'll see it displayed on the page, and it reloaded automatically thanks to live reload. So these templates, they're kind of like rails views, and handle bar is kind of like erb, and what's the closest thing to a rails controller? It is not, as you might expect, an ember route is more than just this, that I'm going to show you now, but one of the most common things you'll do on the route is to have a model hook, and the model hook is the most common way to grab information from your server, and spread it to the rest of the app. There are other ways, but this is the conventional basic way. Alright, so whatever you have returned from here, will show up as model in our application template, so we can just return, let's start with a sentence. This is not what you would usually return but I want to show it to you working, and there it's displaying that sentence. You can also return, a hash. So this hash will be have the same property, and then the sentence2 property, and then here, we're going to call {{model.sentence}} and {{model.sentence2}} and we'll see that we'll have to close out this h3 tag if we don't, it will show us a nice error, and it will show both of those. So this hash is a plain old JavaScript object, and then this dot is saying: On this object, I want what's behind this sentence key. You can also return arrays, so here we'll return an array of just, we'll do some numbers, and we can loop through those arrays in our application template using each helper {{#each model as |number|}}, so we'll go ahead and put them in a list, so we will display the number in each list item, and delete our old stuff, and we'll see our numbers in a list. You can also return an array of objects, so offscreen we will put in a bunch of objects that represent cute monsters. Each of them has a name and a level, so we'll go into our template and we'll go ahead and display those. So we'll have the {{}} is level {{monster.level}}, and it's displayed perfectly. This is our first super basic ember app. In the next video, we're going to go ahead, and replace what's in here. We don't want to hard code this data. Instead, we're going to connect it to rails. I'll see you there.

Transcript written by Miguel




I have a question. If you have an app that is developed on Rails on the backend and Ember on frontend, would you keep both frontend and backend on the same repository, or on two different ? If the 1st case is the correct, then I guess both would live under the root (app name) folder right? something like this

- app-folder (git-init here)
-- backend (rails api)
-- frontend (ember)


You could do that and some companies recommend that for instance thoughtbot. Personally I would n't though, your git commits would be messy because you'd be commit to 2 different project/languages in one go and that can lead to messy git logs when debugging.


Thank you for your reply! so I guess in this case you would also deploy on two different machines/droplets (if you are using DigitalOcean for example) is that correct? How would the backend communicate with the frontend?


Am not sure about the droplet part, but I think using 2 in this case is much better option unless your system admin skills are top notch and you can make them work on one droplet.
For connecting the backend with the frontend, you have to do some magic with the adapter. I recommend this tutorial: http://www.thegreatcodeadve...

Login or create an account to join the conversation.