Full Stack for Front-Ends Part 2 Node setup and installation

[00:00:00]
>> Jem Young: All right, we switch to the test user. Here's where it gets a little bit trickier. So if i were just to apt install node, we'd get node4. Node4, it's good, it's the work horse, it's been around for a while. We want node6, that has better ES 2015 support.

[00:00:17] It's a little bit nicer, mpm3, it's a little bit faster. So what are we doing here? This is kind of funky, and as always, don't just copy paste things, let's kind of understand what is going on. Curl is a way of making HTTP requests. Interacting with everything, interacting with other servers, other domains, things like that.

[00:00:39] And then we're piping that into bash.
>> Jem Young: Let's just copy this, and let's just copy the curl part, and we'll see what's going on.
>> Jem Young: Look at that, it's a shell script. That's pretty cool. So this is a shell script that says, hey, if I'm [INAUDIBLE], I want the latest, I want the node6 package.

[00:01:06] And then I'm gonna do all the set up for you. That's pretty nice of them to do that. In the old days you had to manually build these things. Now we don't do that anymore. Everybody with me so far? All right, so we wanna pipe this into a bash shell.

[00:01:22] So we're gonna say sudo -E, preserve our environment, and we have to run this as sudo because we're installing packages. Then we're gonna say bash Now dash just says, nothing else is gonna come after this, so ignore any output past what we pipe in. Just gonna run that,

[00:01:47]
>> Jem Young: Nice, all right.
>> Jem Young: Everybody with me so far? Wasn't too bad, a little scary, lot of code there, but we're gonna slowly ramp up. What's our next step?
>> Jem Young: Also I forgot, I'm so smart, just kidding. I added a link to ExplainShell, which is extremely useful. So you're saying, man, Jim is talking so fast and he's going on and on and on, but I don't understand what's happening, but I'm too scared to ask him a question about what's happening.

[00:02:17] Explainshell.com, it'll tell you exactly the options we're passing. It doesn't work for everything, they do their best. But for this instance, it's explaining what the curl-S and L mean. Super useful link, bookmark it for the future, if you're just running commands, you're reading a blog post and you don't really get what's happening.

[00:02:36] ExplainShell, nice.
>> Jem Young: All right, so let's install Node.js, so sudo apt install nodejs.
>> Jem Young: Yes.
>> Jem Young: And let's just make sure you have the right version installed, so you should be on node6 something. If it's not 6.11.4 don't worry about it, especially if you're watching this in the future, the node version will likely be upgraded a bit.

[00:03:23] But for now, it should be on node6 something if you did things correctly. If you didn't you probably installed node4. So if that's the case, just go back and start over, it's not that bad.
>> Jem Young: And the benefit of doing it this way versus the other way is we don't have to sim link node like we did in the first time, it automatically does it for you.

[00:03:43] So now when I type node, it's node versus before we had to type nodejs cuz node was some radio frequency package. Yes, I still don't know what it does, no one does.
>> Jem Young: Now this is where it gets tricky and why we use Ubuntu 1610 last time and not 1604.

[00:04:04] Cuz we're gonna have to do some trickery because the way node installs, but let's just double check. So let's say npm config get prefix, npm config get prefix
>> Jem Young: Hm, /user, that's not good. In fact, it's so not good that I have a big warning on here about why it's not good.

[00:04:28] Because this is a true tale from life where I've locked myself out of my own, all of my files. So what's happening is node installed into, or mpn in node installed into /user instead of /bin /user my name. /user is the root directory for all the user owned files.

[00:04:50] The problem is, actually I'll just show you the problem right now. So I'll just say sudo npm i -g, say forever. Love forever.
>> Jem Young: What will happen?
>> Jem Young: A little slow. That's okay cuz we use it with sudo, but the problem with that is now forever can only run as sudo, which we don't want, we want to run as my user.

[00:05:23] So if I said mpn -i -g, I don't know, say gulp.
>> Jem Young: All these errors, why? Because it's trying to install the /user which I don't own, I don't own permission to write to that file. Only root does, we have to pseudo it, but we don't want to pseudo it because we don't want to run nodules as root, that's pretty dangerous.

[00:05:53]
>> Jem Young: All right, so we're gonna fix this. But so I'll just tell you embarrassing stories. Naive approach, so I was like, I know what to do, I'll just change ownership to /user to me. All right, that's fine. But root can no longer write to that. So all those applications that I write to /user no longer have permission, and my whole machine locked up and I had to start over from beginning.

[00:06:12] Because I decided to change ownership of /user to me. Don't wanna do that. That's why I have this large warning, these are mistakes that I've made, learn from my pain. So what we're gonna do is NPM has this already set up. The long and short of it is we're gonna make it a local directory called NPM global where we're gonna solve all of our global NPM packages.

[00:06:34] We're gonna change the prefix on that to that directory. We're gonna add that to our current environment, and then we're gonna restart the environment just to make sure that all of our shells are referenced to where it installed the new NPM modules. Don't worry, this is kinda gnarly, this is why I was trying to avoid it.

[00:06:51] But it's not that bad, we understand a bit more about how shells work, how servers work, how permissions work. It's not too bad. And then I will walk through this just to make sure we're all on the same page.
>> Speaker 2: What does it mean by back on the command line?

[00:07:05] Did I leave the command line?
>> Jem Young: Yes, on step three we opened a .profile near local. Don't worry, if you are a little confused I will walk through, I will do this myself just to make sure you know I'm not lying. I don't have a server set up a head of time where I'm like, it's so easy guys, come on, [LAUGH] it's already done.

[00:07:23] No, I'm gonna suffer with you, if we make mistakes, we will make them together.
>> Speaker 3: So we should do a touch.profile?
>> Jem Young: You could have one there already.
>> Speaker 3: Just in the home/user?
>> Jem Young: Yeah, home directory, yeah, if you do it ls -la. la -la, yeah, you should see .profile in there.

[00:07:52]
>> Jem Young: So I'm gonna go ahead and do this. So we do it mkdir -/.npm-global. Cool, next step. Npm config set prefix.
>> Jem Young: I'm gonna cheat cuz I'm lazy. Wait, no, I took it out. Wait, no I didn't. It's gonna, I took it out. I try to copy paste code cuz I'm lazy sometimes.

[00:08:46] But you shouldn't do that, you should write it down. So now I have to do it the old fashioned way, vi,
>> Jem Young: Profile, and where are we going? Skip to the end, and we're going to say export PATH, that's right, yes, =-/.npm-global.
>> Jem Young: /bin.
>> Jem Young: And $PATH. That right?

[00:09:33] Yes, that looks good. Then we're gonna save it, cool. Then we're just gonna say source, just gonna reload this from our profile, it's gonna reload our shell. And now it should be able to pm i -g forever without having to pseudo that. So I did things correctly.
>> Jem Young: Sweet.

[00:10:07]
>> Speaker 3: We should also be able to check that just by running the npm config get prefix again, right?
>> Jem Young: Yes, but I always like to just double check, you never know. All right, everybody with me so far? People looked frustrated already. That's a record, 45 minutes in. Now, all right, everybody with me?

[00:10:29] We can install NPM modules without using sudo, globally. Cool. So to recap what we did, we created a local directory, something we own. We set MTM to use that for the global installation directory. We put that in our environments, we're gonna reload it so NPM always knows about it, and that's it.

[00:10:49] Cool. It looks like a lot, the first time I ran into this I said, what's going on? But then you realize it's actually not that bad. If you go to the actual node page it's a bit longer, a bit more verbose, but we do things the easy way, aka, the lazy way.

[00:11:02] And let's make sure forever installed just like I did, npm -isg. What does forever do? Someone remind me, we used it in last course.
>> Speaker 4: It keeps the apps the app running continuously without having to keep a window open.
>> Jem Young: So you say it keeps the app running forever?

[00:11:18]
>> Speaker 5: [LAUGH]
>> Speaker 4: Perhaps.
>> Jem Young: Perhaps. Yes, excellent answer.
>> Speaker 4: Forever is very committing.
>> Jem Young: Yes.
>> Speaker 4: I am not willing to do that as a back end.
>> Jem Young: [LAUGH] But you have to though, these things are important. You don't know how long your server is gonna stay up.

[00:11:32] I've showed Jem rules. That's a Jem rule, that you don't know how long your server's gonna be up. Give it a good name cuz you might regret it later. That is a funny story. I worked at a analyst company called Chart Beat a few years ago. And we just had silly names for our servers, they didn't make any sense.

[00:11:48] And someone said, why is this? Because someone ten years ago named them something and we had keep naming this weird naming convention. And it made no sense, but the take away is server names are important because you don't know how long they're gonna be around. And as I said in the last course, make sure its contextual about what the server does.

[00:12:05] This is just a simple web server. But in the future you might have a database server, you might have a proxy server, things like that. So you wanna make sure it's not just Jem1, Jem2, Jemfoo1, Jemfoo2, cuz again, let's say you're starting a billion dollar company, you don't know how long your server's gonna be around.

[00:12:21] Hope you all start billion dollar companies, and 10% to me as your advisor.
>> Jem Young: All right, now let's change our working directory to /var/www. If it doesn't exist, let's go ahead and create it. Make 0/p/var/www if it doesn't exist.
>> Jem Young: Yes, you will have to pseudo in slash var because that is owned by roots.

[00:12:54]
>> Jem Young: And because just lotion is nice, they include Git for us, we don't have to install that. But if you watch in the future, Git may or may not be installed on your machine, so just app install Git. And then we're just gonna clone the simple node server that I built.

[00:13:11] And we're gonna use that as a server request a bit later on in the course. But for now, this is all just a setup just to make sure we're on that nice paved road.
>> Speaker 2: cd fsfe 2, right?
>> Jem Young: Yes, fsfe2, fullstack frontend2.
>> Jem Young: So you are correct.

[00:13:38] Bam, nobody's perfect.
>> Jem Young: And you just run npm i, might take a little bit. So I'm gonna go ahead and do this. So I'm gonna say cd /var/www. Doesn't exist. So sudo mkdir, mk directory, /var/ww, cool,
>> Jem Young: Also, git clone, what was it?
>> Jem Young: Did I not change ownership?

[00:14:32] I did not, what a slacker. All right, so this is my bad. If you run into issues right now, you're saying, why can't I clone anything? Jim's so smart he clearly doesn't run errors like this. I do. We forgot, because we created this directory with sudo, as in it belongs to root now.

[00:14:48] We need to change our ownership to us. How do we change ownership? Remind me. We did it a lot last class. How do we change ownership in a directory shown, change owner? So I'm going to say, sudo shown -R out of habit, recursive. And we're gonna cheat and say user.

[00:15:11] And user, just a reference to ourselves. Let's say /var/www, cool. Now I have ownership and I can clone my repo.
>> Jem Young: Right, nobody's confused. This is great. We understand permissions just a little bit. And I'm going to cd into that.
>> Jem Young: And I'm going to npmi.
>> Jem Young: So how many people use YARN and how many people use NPM still?

[00:16:04] YARN? A few people. NPM for everybody else? Any other strange one, JSPM? Think there's more. Yeah, unrelated to this course, what's the difference between YARN and NPM?
>> Speaker 2: YARN is still faster.
>> Speaker 6: Yeah, better package locking
>> Jem Young: Yeah, YARN is a bit faster now. NPM has made great strides in the past.

[00:16:29] I've spoken with Laurie Voss, who's the COO of NPM. He's like, yeah, it's cool YARN did their thing. We encourage everybody to contribute back. NPM has gotten much better now. They've got locking, kind of a bit more predictive when you NPM install, it's gonna install the same way every time, versus before it was like maybe, hopefully.