Transcript from the "Creating Local Packages & npm" Lesson
[00:00:26] All of those are packages that you can consume inside your application. And even though those are front end packages, they are still considered node packages, cuz you're actually installing with node. They're being built with node, things like that. They're being consumed by node even though the end target is probably the browser, but how they got there was through node, the mechanism of how they got into your application.
[00:00:50] So you could think of packages as like a collection of modules or even just one module that is available to you, like it's shared whether it's on a registry somewhere, whether it's locally on your computer, it's just a bundle of modules or some type of logic that you are able to use and you didn't write it, it's its own application, it's its own entity.
[00:01:11] And you're bringing it in almost like the internal model, the internal modules found in node js, like the FS file system that we use, we talked about path, different things like that. You can think of those as packages built internally into node js. So when it comes to node, there is a very special tool that we use to manage those packages because like I said, there's hundreds, thousands, millions of packages out there and you need to have some type of experience around that to be able to get the packages you want, find them, make sure that they're right, different versions, different stuff like that.
[00:01:47] So there's something out there that's called node package manager, or NPM for short. NPM actually is already installed on your machine if you have node, you didn't have to do anything. It comes bundled with node, although they're two separate things. So NPM is amazing because it allows us to search, install, build all different types of packages in our application much faster.
[00:02:12] A lot of OS level languages like Python and Ruby they also have package managers, Python has like PIP. Ruby has like Ruby gems, different things like that. This is just nodes version of that, it's called NPM. There's also other package managers out there as well. You might have heard of like Yarn and probably some other ads that are out there as well.
[00:02:32] They pretty much all do the same thing and they're interchangeable with small features here and there. Going forward, we're just gonna use NPM for everything because that's the standard and up to the point that it is now. It's actually pretty good. So we're just gonna use NPM. So what we're gonna do is we're gonna create our first package, and we're gonna learn how to consume other packages.
[00:02:53] So let's do that. So what we're gonna do is, first we have to create, we have to turn an ordinary node code base, an ordinary node app into a package. And you've probably seen this and done this a bunch of times, but you probably didn't know what it was for and the meaning behind it.
[00:03:11] So I'm gonna walk you through it, we need to create a package JSON file. And we're gonna use NPM to do that for us. So let's head over to our app here. I already had all this stuff. I'm just gonna just make a new folder and toss all this stuff in there and I'm gonna call it like intro.
[00:03:26] And I'm just gonna say, let me just grab all of these things, drag them all, I guess, I don't know. I'm just gonna put all these in the intro folder and then I'm gonna make a new folder here. Well, outside of this folder I'm gonna make a new folder and I'm gonna call this package, like that.
[00:03:42] It's important that we make a new folder here or you can treat your root folder as the folder that you're gonna work on. Regardless, we need a folder to put something in. So if you're following along, just make a folder. And then what you need to do you need to make sure that you change directories into that folder from your terminal.
[00:03:57] So I'm gonna change directories into package like that. Now I'm inside of package and what we're gonna do now is we're going to initialize a package JSON file which is basically telling node that hey, this is a package. So, we're gonna say NPM run it. And once you run that you're gonna be inside of this interactive prompt that's gonna be asking you questions.
[00:04:20] You can just hit Enter repeatedly to go through the defaults, but we're gonna walk through so we kind of understand what these field names are and why some of them are important and why some of them aren't. So the first one, it's asking us like, what's the name of this package?
[00:04:33] This is important, because if you ever decide to publish this package to a registry, and we'll talk about that, this name has to be unique. That way when someone NPM installs your package name, it's guaranteed to be that package and not something else. We don't want any conflicts on name.
[00:04:48] So there's no miscommunication or misunderstanding about which package you're actually getting. So if you are gonna publish it, it has to be a unique name. And as you would imagine like anything else that's unique like URLs, all the good names are already taken. So you can namespace these if you pay for like a private account, you can namespace them or maybe it's free now, I don't remember.
[00:05:07] But if you get an account, you can namespace them. And that's a whole another thing, but yeah, you do wanna give it a name. I'm just gonna call mine App cuz we're probably not gonna publish this, it's totally fine. And that's only if you publish it, you're gonna keep it locally, you don't have to give it a unique name.
[00:05:21] In fact, this name doesn't even really matter. So I'm just gonna say App. I'm gonna keep it on version 1.0.0. If you've never seen this version syntax before, this version syntax is called semantic versioning or SEMVAR for short. And basically it's just a three digit system that like tells you what the major version is, what the minor version is, and what the patch version is.
[00:05:45] Whereas major is, every time you see a bump in the major version, that's a really big change. It's probably going to break your app if you upgrade to that. A minor is like we fixed some bugs, everything pretty much works the same. And we're just fixing some stuff behind the scenes or maybe we added something new that doesn't break anything.
[00:06:01] And then a patch is just like yeah, we like changed some documentation or we changed how this thing works. But you use it exactly the same. So that's SEMVAR So that's why you'll see those three digits. So I'm just gonna keep that at 1.0. The description is exactly what it sounds like.
[00:06:15] Whatever you put here is gonna show up on like a registries website like NPM website or if it's hosted on GitHub or if it's hosted on Yarn or whatever registry, some internal registry, the description field is here so it can be read and presented that way. And then an entry point is if I were to require or import your module, what file would I be importing?
[00:06:37] What is that file? That's the entry point. The entry point is what is the door into your module when someone imports it. So that's it, was gonna default to that and then a test command is what command should we run when someone tries to test this thing and I'm gonna keep that blank for now.
[00:06:53] The Git repository is exactly what it sounds like, where on Git is it hosted if anywhere and keywords we don't need author we don't care about right now, their license is okay. So as you see, I went through all of that and it generated this JSON object here and it added it to a file called package.json.
[00:07:11] So I'm gonna say yes, that's okay. And then I'm gonna go check it out. So you can see I have a package.json here. And all the stuff that I filled out is right here. Ready, good to go. So now we are officially a package. We are NPM package right now.
[00:07:28] And now we can use NPM and we could do all different types of things. So let's go back over to our website here. We talked about some of these, like the name and the version. We talked about the main here. One thing we didn't talk about was scripts.
[00:07:44] So scripts is really powerful. We're gonna use them here in a little bit. But they basically just allow you to teach NPM different commands to run, like little shortcuts that you can do test was one of them. It acts as what was the test command, that's a test script.
[00:07:59] But you can make a script, any name and you can make it do whatever you want. So they be pretty powerful. Next, we're going to use NPM to actually install some stuff and see how that works. And I just wanna walk you through that process. So some of the commands that we wanna use are gonna be NPM install.
[00:08:18] So if we go look at NPM install, I'll type in NPM Install help. You can see that it pretty much says you can run NPM install with no arcs and it's going to try to install everything in the directory. We'll talk about that, or you can run NPM install with like a name and a name could be like I said, a scope thing if you have a paid account or something like that, or an alias to something, a folder if it's local, even a Git URL, a username slash project,.
[00:08:45] Like it's, you can pretty much install anything at this point with NPM is pretty impressive. There's just a couple flags here that we're gonna talk about and how that works. So NPM Install is one, exactly what it sounds like, it installs packages. And then we got NPM tests, which is the test scripts.
[00:09:00] And then we got NPM uninstall, which is the opposite of install, it uninstalls things. So those are the three main commands that you're probably using NPM and until you run into like caching problems and D duping and versions all messed up then you gotta start looking into all these other crazy NPM commands, but we're not gonna do that today.
[00:09:18] We're just gonna focus on these three. So it is gonna be just fine.