Course App Setup

[00:00:00]
>> Mike: Let's open up our editors, download the workshop project and get started. So you'll need to make sure that you run npm install -g ember-cli. If you know you already have ember-cli installed, any version will do. Then clone the workshop project, go into that folder, install the dependencies and then run Ember serve.

[00:00:24]
I recommend you use Visual Studio code for this workshop. And that'll just help you see all the nice developer experience that you'll see me go through. When you open the folder, make sure you click the Open Workspace button and you may see a dialog saying Mike has recommended you install some extensions, so make sure you click Install All.

[00:00:48]
Now that we've cloned the project and installed its dependencies, all we need to do is run Ember serve and Ember CLI is building our source code into something that can run in the browser. In addition you can see JSON server is running so that's our little development back end.

[00:01:05]
You may notice in the root of your project you have a db.json file, that's effectively our database, it's just a JSON file. So as we work with this API you'll be able to see things change there. We're not dealing with data yet but I'm just trying to give you a high-level roadmap of how this project works.

[00:01:26]
One of the things that we see in our console is we're serving on local host 40 200 and I've got that URL open on the right. And make sure my path is correct.
>> Mike: There we go, so we see, congratulations, you made it. So this is Ember telling us that we have successfully started the app up.

[00:01:49]
Now, we should look at where this is coming from. And you're gonna wanna go to app/templates/application.hps. That this is the top level Handlebars template and Handlebars is the markup language that we use. It's sort of a superset of HTML. But this file that we're looking at now, application HPS, that is responsible for what you're seeing on the screen to the right.

[00:02:20]
So we can see that if we were to delete some comments, and this thing welcome page, and save, everything on the right disappears. And if we were to add something new,
>> Mike: It would appear on the right. So this provides us a really nice quick iteration cycle where we can make some changes, save, and then see on the right side everything is keeping up to date.

[00:02:48]
So let's do something with this. In the root of your project, you will find a folder called starter files. And in there, there's a starter.html. And this here, this is the raw HTML. Maybe your designer gave you this as sorta a breakdown of the way the site is supposed to look for this project, but this is gonna be our starting point.

[00:03:15]
Start with some raw HTML and CSS, and we're gonna evolve the app from there. So I'm gonna copy this to my clipboard from starter.html. Go back to application HBS which is in the templates folder. App slash templates application HBS. And I'm just gonna paste this and hit Save.

[00:03:36]
Now on the right we see some stuff but it doesn't quite look like Slack yet. The reason is we're missing our CSS. So we can go back to the starter files folder and grab our CSS. We are going to be using Tailwind which is a CSS framework. It is what allows us to express our styles mostly in terms of classes in our html.

[00:04:03]
Sorta composed together via classes instead of us writing a lot of CSS. You won't need to worry about this for the workshop. I just want you to know what you're looking at. But hopefully, it means that this part of an app is out of mind. So we're gonna take starter, CSS's content, and we're gonna go to app > styles > app.css, and paste it in there, and hit Save.

[00:04:31]
And on the right, we should see something that looks like Slack, there it is.
>> Mike: So congratulations, we have something that looks like what our finished product will resemble. I'm gonna make a commit and then we will continue on.