Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "Building Your Code with Node.js" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

After installing Node.js, which is a program that allows you to run JavaScript from the terminal, Brian uses npm to install things from npm registry. Using npm allows for utilizing and managing JavaScript packages in websites.

Get Free Access Now

Transcript from the "Building Your Code with Node.js" Lesson

[00:00:00]
>> Brian Holt: I wanna take this a little step further. If you start getting into web development, you'll notice that a lot of things have a build step. That can be really intimidating because we haven't talked at all about how to build something in JavaScript. It's an entirely different thing and its actually kind of difficult there's an entire two-day course just on the most popular bundler, which is called Webpack.

[00:00:22] We're not talking about Webpack today because again, that's a two-day workshop and I have like an hour. [LAUGH] So I wanna show you how to integrate these libraries using a build step because I think that's important today to be a JavaScript developer, so let's do that. The first thing that I need you to do is I need you to install Node.js if you have not already installed it.

[00:00:47] If you click on this it'll take you to the Node.js website, you can either click 8.11 or you can do 10.1, I believe I'm using 10.1. Node is JavaScript on the server, okay, so it's just running Node from my command line.
>> Brian Holt: So let's go back here, I already have it installed but I'm gonna bring it up here.

[00:01:12] I'm gonna get rid of that, clear, let's see.
>> Brian Holt: So let's actually just go here. Welcome to the command line this is going to be less scary than you think it is. The command line is just really a fancy finder [LAUGH] right, so I can open my Finder here and most of us are familiar with looking at this, right.

[00:01:37] I have my downloads, I have my applications, I have my pictures and stuff like that. If you come over here to my terminal, if I hit ls is the same things, right pictures in public and personal and important and staff like that. That's all the terminal is, it's just interacting with your filesystem but using letters and such.

[00:02:06] So right now, we'll get a little bit more into that in our next lesson but for now we're gonna be messing with Node and I'm gonna say nvm use 10, I don't have it, okay, doesn't matter. So it doesn't really matter what version of Node as long as you're above 6, you should be okay, as long as that's happening, okay.

[00:02:26] So now that you have Node, we're gonna be using,
>> Brian Holt: Node to build our project, so once you install Node it comes with a thing called npm, which does not stand for Node Package Manager, but it definitely stands for Node Package Manager. I don't know why they say that it does not stand for Node Package Manager but it's a package manager for Node, so it's Node Package Manager.

[00:02:50] I don't understand, JavaScript's weird, okay. So I need you to find your project using the terminal, mine is on my desktop, all right, so I see it right there. So I'm gonna say, change directory cd into desktop.
>> Brian Holt: Okay so now I'm inside desktop you can see that.

[00:03:15] Yours won't looks like this I've setup my terminal a little bit different but whatever let's use terminal.app cuz then you can see.
>> Brian Holt: No it does look like that as well, never mind so it doesn't matter. So I am using iterm.app, you can use Terminal.app if you're on Mac, if you're on Windows, you can use something like, actually CMD should work.

[00:03:43] But beyond that I don't have Windows setup, so I can't really show you, but you should bring up CMD. If you go to Start, Run you can type CMD and then open the command prompt I believe and if you're on Linux you should definitely know where the terminal is or as you should probably maybe not use Linux, one or the two, I'm kidding that's mean anyone can use Linux.

[00:04:07] Okay so I'm gonna go to desktop, I'm on desktop if I hit ls that means list everything that's inside of this directory. I found popdemo which is right there so I'm gonna say cd popdemo and now I'm in my popdemo directory, right. Do we understand how I got here?

[00:04:24]
>> Brian Holt: Okay if I type clear that just clears, so I can see better. I'm gonna type npm install --global, this is going to install a tool that I can use called parcel, parcel is a little tool that helps you bundle your JavaScript application together. So I'm gonna hit that, it's gonna go out to the network, it's going to download all these JavaScript files, it's gonna bundle it all together for me so I can use the tool called parcel.

[00:04:54] Parcel is a really, really awesome thing let's go take a look at it. There's a bunch of documentation for it, it's really well made they'll walk you through a bunch of the stuff. Parcel will allow you to.
>> Brian Holt: Bundle all this stuff together, right. Ultimately, what my goal is here, right now on this project, where am I?

[00:05:16] This one, I'm loading from unpackage, that pop motion library, I wanna bundle it all together so it all comes in one nicely tight little bundle.
>> Brian Holt: So we're gonna wait for that to finish.
>> Brian Holt: Parcel's awesome, if it's a tool that you use, you should definitely donate to them.

[00:05:47]
>> Brian Holt: I should donate to them, so now I have this thing called parcel. It doesn't know it, help maybe? Parcel.
>> Brian Holt: Which I didn't have this before, right, this is a JavaScript bundler, and I got that from MPM, right, I told it go out to MPM grab this, put it on my computer.

[00:06:10]
>> Brian Holt: So now what I'm gonna do, unlock my computer here and make sure I'm doing the right things.
>> Brian Holt: Come down here to my project.
>> Brian Holt: So I'm gonna go delete this script tag.
>> Brian Holt: So I'm going to come in, where's my project? Code over here.
>> Brian Holt: And I'll come in here to index and delete this script tag, okay.

[00:06:46] So now I'm not loading off of unpackage anymore, instead I'm gonna come here to animation and right now I'm pulling all this stuff off of.
>> Brian Holt: This so let's refractor this so that all of these have, whatever, it's fine.
>> Brian Holt: I don't wanna pull this off of popmotion anymore, what I want, I'm gonna change window.popmotion to here.

[00:07:13] Let's do this const popmotion = require('popmotion').
>> Brian Holt: And then I'll get rid of this and I'll just say popmotion like that.
>> Brian Holt: So require is saying hey I need this library, go pull it in for me so I can use it, okay, and then this right here is pulling all those values out so that's what this line is doing, it's pulling them out of this object.

[00:07:44] I could actually put this into one line and put the required popmotion there but I separated it out, so hopefully you can see those are two separate steps. Okay, and now I need to go get popmotion so I can bundle it in here so I'm gonna come back to my command line really quick.

[00:08:00] First thing I'm gonna say is npm init, I to make this an npm project, so npm init- y,
>> Brian Holt: And it's gonna turn this to an npm project. So init does, is it makes it an npm project, and dash y means just don't ask me any questions, just make this work.

[00:08:21] If you leave that dash y off, if it's gonna ask you a bunch of questions like what's the name of this, how do you test this, what's your email, what's your mother’s maiden name, that's a joke it's not gonna ask you that one. But it's gonna ask you a bunch of questions that I don't really feel like answering right now, it's not the boss of me, okay.

[00:08:38] So now I have this right here package.json, this is how you configure node projects. So if I come in here I can look at it JSON, we've seen that before, JSON are JavaScript Object Notation, right, so it's just like a very bare bones configuration so it's called popdemo.

[00:08:57] It's version 1.0.0, blah, blah, blah it was all generated automatically, okay. So I wanna give it some dependencies, so what I'm gonna do here is I'm gonna come back and I'm gonna say, npm. So go get this off of npm, install popmotion. So it's going to go off of npm, it's going to go install popmotion for me so I can start using it.

[00:09:24]
>> Brian Holt: And fairly quickly it comes in it added four packages, because popmotion depends on other packages, so it has to go get all those packages as well.
>> Brian Holt: Yeah.
>> Speaker 2: Popmotion is really into something that was on the Internet or it's really into something that's on your computer.

[00:09:42]
>> Brian Holt: On the Internet.
>> Speaker 2: Okay so just what if you said like npm install cats.
>> Brian Holt: It would probably work, let's do npm info cats because I don't know what cats it is.
>> Brian Holt: So it's written by a lovely fellow named Luciferous
>> Group: [LAUGH]
>> Brian Holt: Newmanvon.
>> Brian Holt: So you would go to this url to see what's there, I'm not gonna check.

[00:10:16]
>> Group: [LAUGH]
>> Brian Holt: I don't trust Luciferous but like, let's say, npm info right here loldash, cuz this is one that I wrote. So you can see up here.
>> Brian Holt: Brian Holt right there bt, you can see there, all that stuff, you can go to the website which is again something that I wrote

[00:10:41]
>> Brian Holt: So it's just something off of, like there's a registry it's actually at npm.com. Is it npm.com right, yeah, Npmjs.com.
>> Brian Holt: So this is where it's coming from, if I search for popmotion.
>> Brian Holt: You can see this is actually what we're downloading right here.
>> Brian Holt: So if I come here and say Quick Start, that's probably the easiest way to get there, it says right here npm install popmotion.

[00:11:17]
>> Brian Holt: It says dash dash save here with the newest versions of npm, the dash dash says, implied so you don't have to worry about it. This is called the flag for those of you that are not familiar with the command line and this flag is not necessary any more.

[00:11:33]
>> Brian Holt: So that's a good question, so that's how I knew to do that. But anytime I need to come in here and install libraries that I can use in fact you can see here it now, it's automatically put this in here, popmotion. Come back to my command line.

[00:11:50]
>> Brian Holt: You can like npm install react, right, or npm install angular or npm install all of those things. Okay so now I have popmotion and I can make this work, so what I'm gonna say is that I'm gonna say parcel index.html. So I'm gonna point it to my default, whatever happen, index file for html right.

[00:12:18] Parcel is going to read that HTML file to figure out where all my JavaScript and CSS is and then it's going to just make this a tight little nice bundle for me. So if I do that,
>> Brian Holt: It's building my index.html.
>> Brian Holt: It's going and getting all the popmotion stuff and it built it in eight seconds, okay.

[00:12:40] So now rather than going like opening it with like as a file I'm actually running a local server now. So if I click on this or rather just copy and paste it and put it into my browser, localhost:1234. You can see here, it's working but it's not downloading off of unpackage anymore, it's not doing any of that stuff, it's being bundled together, all by Parcel.

[00:13:10]
>> Brian Holt: Does this make sense? I'll talk about the local host thing here in just a second but does the bundling stuff make sense? So this is in develop mode, and this is absolutely wonderful now. What's really cool about this, is how every time that you made a change you have to refresh the page, if I come in here and make a change to my CSS, Parcel's watching for changes and it'll automatically update my stuff whenever I change it.

[00:13:34] So if I change this to now be lime green and Save, I'm not going to refresh the page I'm just gonna come over and it just updates itself, which is really nice it helps me go even faster. That's called hot reload, or HMR, Hot Module Refresh maybe, I don't remember too many acronyms really neat though, right.

[00:14:01]
>> Brian Holt: So, there's a bunch of advantages to doing that. Another thing you can do now that I'm doing a Parcel, I can make my another file called, I'm in POPDEMO just like useless.js, I don't know I'm struggling to be creative at this point of the day. And all I'm gonna do inside this file is say console.log("this is entirely a useless file").

[00:14:29]
>> Brian Holt: Okay, so it's another JavaScript file in my same project. If I come back over here and open my command line or my console, it's not being logged out, right now, right. It's not being a brought into the project but if I go into animation.js and up here at the top and I say const, it'll say require ./useless, the .js part's implied.

[00:14:59]
>> Brian Holt: It's going to run whatever is inside of useless, so if I come back over here this is entirely a useless file.
>> Brian Holt: So you can actually bundle together your own files this way, you can have multiple files, you couldn't do that before. Require would not have worked before and now it does, cool.

[00:15:20]
>> Brian Holt: Okay.
>> Speaker 2: And that's what nodeJS does for you?
>> Brian Holt: Notice what's powering Parcel, so Parcel is the part that's actually doing the bundling. So Parcel is written in Node, we're about to do Node ourselves, so Node is just allowing you to execute JavaScript outside of the browser.

[00:15:41] I wanted to show you that this is the old way of doing modules with JavaScript, which is called Common JS, not something you need to know. There is a new way of doing modules, which is called ES6 modules. So I wanted to just show you both ways because you'll see documentation in both ways, what's cool about VS code is it will refactor it for you.

[00:16:09] So you see this little light bulb right there, show fixes? Say convert to ES6 modules, and it just fixes everything for you.
>> Brian Holt: That's import Popmotion from Popmotion, where as before it was saying require, right, it's different now. This is the new way of doing it, in the future you should probably do it this way.

[00:16:33] The problem is that Node doesn't understand, Node inherently doesn't understand import so it has to go through a translation layer before it hits Node but we'll get there. Most browser code you'll see will be using the new import way so I wanted to show you both.