Ember 2.x Creating a New Ember Project

Transcript from the "Creating a New Ember Project" Lesson

[00:00:00]
>> [MUSIC]

[00:00:01]
>> Mike North: So you guys checked out a project that I've published. But I'm actually going to the process of setting up a brand new Git repository. A brand new Ember project just to sort of convince you that I didn't set you up with some meticulously crafted, magical thing that you're not gonna be able to do when you walk away.

[00:00:29] So first, Ember CLI is just a command that you use in your terminal. And if you do ember -v, can everyone see this, by the way? All right, so ember- v tells us it's working. We can also look for help. Which gives you information about all of the different things Ember CLI does.

[00:00:56] The thing we're going to use it for right now is code generation, to give us a working application as a starting point. And we're also gonna use it for a development web server, which has baked into it an ASP.NET pipeline with Babel as the transpiler and [CROSSTALK]
>> Speaker 2: You have some text highlights that I can't really see.

[00:01:19]
>> Mike North: Thankfully, I don't think we're gonna run into that when I'm actually doing things. I don't wanna attempt to make that better with LiveShare. [LAUGH] So the way you create a new project is using ember new, I'm just gonna call it github-ui. So, what's happening here is Ember CLI has this concept of a blueprint and it's really just a template for an application, or a piece of an application, or even for an add-on.

[00:01:51] If you look at the internals of Ember CLI, it's really just a folder containing files with sort of placeholders for certain things, blanks that get filled in. And in this case, relating to the name of my application. We'll see that popping up in a couple places. So that's sort of abstracted out inside Ember CLI.

[00:02:12] It's gonna download the set of dependencies from NPM, and I'll follow that by going to bower and doing the same thing. And then what we'll be left with is, a completely set up Ember application. And it also initializes git as well, just forgot about that. And I'm actually just to save myself some characters in the terminal, I'm gonna move

[00:02:44]
>> Mike North: And I'm just gonna call it the letter g.
>> Mike North: All right, and I'm actually gonna rename my master branch.
>> Mike North: Perfect. All right, so, m is for master. If we look at our files here. Wherever we've got the app folder and we've got the tests folder. So I'm going to install some Ember addons here, so we're going to add Sass support because writing CSS is tiresome.

[00:03:29]
>> Mike North: And so what this is doing it is sort of Ember install is built on top of NPM install. What it does in addition to NPM install is it lets the Ember addon make changes to your app potentially confirming along the way that each change is appropriate so that you can have some initial setup or maybe it needs to introduce an extra dependency, or it needs to setup some configuration.

[00:03:55] But essentially, it gives the addon the hook where after NPM installs happen, it will run this and give you some post install setup opportunity as the author of one of these libraries. So now we have Sass installed, and if we look at what happened here, all we did was add something to package.json and install it.

[00:04:17] So this one was relatively simple. I'm also gonna install Bourbon which is just a little Sass library. I don't actually expect that we're gonna use it, but it's a better example of an addon that actually tries to make a modification.
>> Mike North: So again, going to NPM, and then we're gonna see it suggest a change.

[00:04:43] Ooops, sorry, I made a mistake there.
>> Mike North: All right, just to describe what happened there, by default, Ember has this file app.css, it's sort of the root stylesheet. You would sort of import everything from there. I forgot to rename it here. And, when installing Bourbon, it assumes that I'd already done that step there, that I'd already been working in the context of SCSS.

[00:05:23] So I think installing it again, we will see something different. Perfect. All right, so here's an example where this Library Bourbon has said, I want to do something to app.scss and Ember CLI is giving me the opportunity to accept or reject the suggested change. And it's not, it is making a change to a file but you have to think of it as replacing a file.

[00:05:56] And so, we can look at what it's trying to do by hitting d for diff. All it's doing is it's actually importing the Bourbon stylesheet itself into my app.scss so I can actually use this thing. And I can hit yes here and I will accept what this library says my app.scss should look like.

[00:06:19] What I wanna make sure you guys realize here is, as your app grows, like if I had styles that already existed here, this would blow it away. And so more likely the not, the use here is to look at this to manually make that change to my file, right?

[00:06:36] Until sort of you can see that you've incorporated what it says you should incorporate and then decline to actually so you would hit no here. I'm gonna hit yes because we haven't done anything, we have nothing to blow away. And so it's telling us it overwrote app.scss and we're good to go.

[00:06:58] All right, so I'm gonna go back out to the root of the app here. Also, if we look at bower.json
>> Mike North: Sorry.
>> Mike North: So, you'll see that we have ember 1.13.7 and ember-data 1.13.8. This is because Ember CLI has not released its 2.0 version quite yet. You can use the 2.0 versions just fine, so I'm just going to explicitly install the beta versions of the framework at ember-data right now.

[00:07:42] And the way you do that is bower install --save, ember#beta ember-data#beta. Beta is the name of a release channel. So, makes it 1, 1. And so, essentially this is like the latest beta release plus any patches from critical bug fixes that have been found. And so, if we look at our bower.json now, we've got the beta version of Ember, and then we've got the beta version of Ember-data.

[00:08:20] All right, this is what you guys checked out, that's the state we're in right now. So, I'm gonna fire it up, and I'm gonna use this left side here
>> Mike North: You'll see why I'm split screening. So ember s, s is for serve. If you've used Rails, it's basically the same thing as rails s.

[00:08:49] So it's starting up the development web server. I'm sorry it looks so funky here but, typically it looks more. So these lines are wrapping. It's giving you some information about how long the build, each step of the build process took. So we can see that this ConcatWithMaps step took 2.2 seconds.

[00:09:12] Babel took only two-tenths of a second. And if we go to. Let me bring another desktop over here real quick.
>> Mike North: So if we go to Localhost 4200, we can see Welcome to Ember. So, our app is running now, it's serving, yes.
>> Speaker 3: There is one in it, should they be following along updating their installs with all this?

[00:09:45]
>> Mike North: The state that I'm in right now is what you are in if you checked out the repository from the setup instructions. But I wanted you guys to understand how I got there so I didn't cheat you out of the sort of setting up from scratch experience. At the same time, I don't want 100 people NPM installing the same thing at the same time.

[00:10:07] [LAUGH]