This course has been updated! We now recommend you take the Full Stack for Front-End Engineers, v3 course.
Transcript from the "Application Setup" Lesson
[00:00:00]
>> Jem Young: So let's go in to set up our note application. The first thing we wanna do is we wanna change ownership of the /var/www directory. So we don't have to sudo whenever we wanna make a file or modify it. We just wanna be able to access it at will.
[00:00:14] So we're gonna use the chown command. Which is c-h-own, change ownership. Kind of makes sense. The -R means it's recursive. So, it's gonna change that /var www directory to own everything below that. Sorry, I should clarify. This is your user name, not actually $USER. Wait no, this one is $USER:$USER, sorry.
[00:00:37] [LAUGH] I'm gonna fix this later but it is $USER:$USER. Or you could also say JEM JEM. It doesn't really matter, but we're changing the ownership of that directory. So I'm gonna go to do that now to make sure I have my notes correct. So clear, and I'm gonna say sudo chown -R.
[00:00:58] I think I can use $USER. Actually, let me just check. Say, echo $USER. Yes, so that works. We can use $USER. You can use your actual command.
>> Jem Young: But I will use $USER just cuz it looks cooler. Chown -R $USER:$USER. And we say /var var.
>> Jem Young: /www cool.
[00:01:33]
>> Jem Young: The permissions thing may seem pedantic. Why bother? But this means every time you create a file you don't have to sudo it anymore. You don't say sudo VI. You can just say VI because the directory is now owned by you. It's little things [LAUGH]. Years of doing this I've learned this make it a little bit easier in the long run.
[00:01:52] So let's make an application directory. So mkdir /var/www/app. So mkdir /www/app, cool, and I'm just gonna cd into that.
>> Jem Young: And again, you're free to call it whatever you want. You can call it Sweet New Application. You can call it Foo. Doesn't really matter, but I'm calling it app just for simplicity's sake.
[00:02:36]
>> Jem Young: And then I'm gonna run git init on it, so git init. I'm just gonna initialize an empty git repository for now. All right, everybody with me so far? This is probably the part where UI engineers generally come in, actually a little bit further. But this the part where you're like, okay, I know what to do from here.
[00:02:56] But getting here is where all the work's in. And by doing it, we're almost there. We're almost masters of the stack. I use the && sometimes. That just means do this command and then do this command. It's a good way of chaining things. One of my favorite ones to do is probably git pull, so git pull to pull down from mastery or whatever.
[00:03:19] And then &&, and yarn install because people are constantly updating packages when I do a pull and it just does it all in one command. Not necessary. It's a nice little shortcut to have.
>> Jem Young: We can make the directories if you want. We don't have to do that today and, [SOUND] we can skip it for now.
[00:03:38] We'll need it for tomorrow. But if you want, you can make directories, ui/js ui/html, ui/css.
>> Jem Young: Actually, I'll just do it now, cuz why not? So mdir.
>> Jem Young: Ui/js.
>> Jem Young: And if you wanna check a directory to see what's in it without actually going in, you can just say ls, the directory name.
[00:04:26] So ls ui tells me the directory's in there.
>> Jem Young: Nice, so now we're going to create just an empty file. We can save the I app.js which is fine but if we just want to create just a blank file, we're gonna use the touch command. Touch just modifies the time stamp on it in case you wanna run a search of the system.
[00:04:48] Say, what were the files that I modified in the past hour, so use touch. Not used that often, but the benefit of using touch is we can just touch a file and it just creates it automatically. It's like the laziest way of creating an empty file. So I'm gonna say touch app.js.
[00:05:07]
>> Jem Young: And have an app-js. It's much faster than typing going VI and then right quitting saving, just a little shortcut. Next we're gonna do is something that a lot of people don't know about, even though we probably use npm every day is the npm init command.
>> Jem Young: See, npm init will set up your node modules.
[00:05:27] It'll set up your package name. It'll add a licence. It'll do all the stuff for you automatically. So I'm gonna call this, app is fine. Call it whatever you want. Version fine, description, full stack front end or something.
>> Jem Young: Entry point, app-js, test command, don't have one yet.
[00:05:49] Git repository, don't have one yet. Keywords, author, Jem. License, let's say MIT, doesn't matter. Looks okay, cool.
>> Jem Young: And now what npm did was it created this package.json for me, which is nice. It just scaffolds that out for you. It's much easier than just manually creating all these things.
[00:06:12] You have to remember the syntax and all that. Npm init is a nice command. Let's install Express now. Express is a node JavaScript-based web server. It's one of the more popular ones. I think it's waning in popularity, but there's lots of options there. There's Happy. There's the one that Netflix invented.
[00:06:35] I don't remember [LAUGH] what it's called now. It's the one we use. I'll look it up later. But Express is probably the most common one. I try to choose things that you can Google search easily expressing this, and Express is the easiest one to use. So now, we switch from using app to npm because we're using node modules.
[00:06:52] So, npm i, or npm install express, and we're gonna save that.
>> Jem Young: Express --save.
>> Jem Young: Cool, and if we check out our package.json, we see it added as a dependency express. A common mistake I make all the time is I forget to do --save when I install my node packages.
[00:07:24] So they're installed one time and then whenever I pull this repo to another computer nothing's there. I'm like, why isn't stuff working, cuz I forgot to save it. So don't forget to save.
>> Jem Young: But now, we're getting into more familiar territory that we're all a little bit more comfortable in.
[00:07:38] So, let's edit that app.js file. And what we're gonna do is we're gonna create a bare-bones express server.
>> Jem Young: And it's gonna do exactly what we were doing before, that simple HP server. I could've used the node module HTTP, which is built into node. But because we're using Express, the syntax is slightly different.
[00:08:03] We're using Express cuz we can build on that later a lot faster than we can with a basic HTTP server. And if you're lazy or not lazy. I shouldn't say that. If you're getting hand cramps or you just tired of typing, you can go to this URL and just copy and paste it.
[00:08:19] I will forgive you.
>> Speaker 2: I think you're missing a parenthesis.
>> Jem Young: I am missing a parenthesis. You just copy and paste [LAUGH]. I'll fix it. Actually can I fix it? I think it's a screenshot. [SOUND] just copy and paste it [LAUGH].