NPM Crash Course

[Music] hey what's going on guys welcome to another crash course so I decided to do a crash course on NPM or node package manager for a feud reasons one because there's a lot of front-end developers subscribed my channel that I think are a little intimidated by the command-line and by package managers and I want to show them how easy it is to install remove and update packages and then - I think there's a lot of people that have been using NPM for a while they follow along with my videos and so on to install packages but may not know for instance how to find where global packages are stored or the difference between dev dependencies and regular dependencies or how to list out their packages things like that just really helpful tasks that they could be utilizing so in this crash course we're gonna learn all about the node package manager alright so before we get started let's talk a little bit about what NPM actually is so as I said it stands for node package manager and if you have any experience with Ruby on Rails it's similar to Ruby gems or if you're a Python developer it's similar to PIP okay so it's basically JavaScript package manager it's installed with nodejs but don't let that fool you into thinking that you need to have experience with the node.js runtime or node applications to be able to use NPM alright you could even use NPM just for you know to install bootstrap or foundation or some front-end framework so it's essentially just a JavaScript package manager all right no node.js skills are needed to use it now when I say packages or modules I mean the same thing they're used interchangeably and modules are basically just JavaScript libraries okay so you can install bootstrap as a package jQuery lodash just about every popular library or framework or script that's available is available with NPM alright and this makes it very easy to share and reuse code alright so here are some of the things that you'll learn in this little crash course so you're gonna learn how to install remove up date and list packages or modules will look in depth at the package.json file which is an extremely important file when it comes to using NPM and node applications we'll talk about local and global packages dependencies dev dependencies and the difference all the end not all but most all the important NPM commands and shortcuts will talk a little bit about versioning and also NPM scripts all right so that's what we'll be doing in this crash course and whether you've been using NPM for years or you've never touched it I think you'll benefit from this video so let's go ahead and get started all right so if you want to use NPM you do have to have no js' installed it comes with no js' so if you don't have it installed already just go to node.js org go ahead and download it if you're on Windows or Mac it's a simple installer if you're on linux just use whatever package manager that that your distro uses all right now there's one other site I want to show you and that's NPM J Escom this is basically the repository for NPM modules so if we want to search for something like let's say Express which is a web framework and we click on Express you'll see it'll take us to that documentation page which resembles the github page it shows you how to install it gives you some examples some documentation it even has the github link over here if you click that and that's basically you can see it's basically the same thing alright so if you want to check out some some modules I think they list like the most popular ones and things like that but you can check that site and look around if you want but let's go ahead and get started so what I'm gonna do is I'm gonna create a new folder on my desktop and I'm just gonna call this NPM app ok now we're not focusing on what we're building with this application it's I just want to give you basically just an overview of how to use NPM alright so I'm gonna open this with my text editor I'm using Visual Studio code so I'm gonna say open with code okay you can see we have it over here on the left and I'm also gonna open it I'm gonna open it with get bash okay which is the terminal program that I'm using so I'm gonna say get bash here and we're gonna just snap this over to the side and we'll put Visual Studio on this side and let's make this bigger alright now there is an integrated terminal with Visual Studio code but I want it over here and I want it to be bigger so I'm not going to use that the integrated terminal I can make this a little skinnier okay so let's get into some commands and then we're gonna talk about the package.json file and we'll go from there now I realize that you may be on a different environment you may be on a Mac or Linux you may be using a different text editor terminal and the only thing that you need to do make sure of is that you have your folder open over here and you have your your in the same folder in your terminal or command line all right so I'm every command that I write in this crash course I'm gonna link a text file to in the description so that you'll have all of those commands all right so first thing we're gonna do is look at the version of NPM we can do that with NPM - V and you'll see that I'm using version 5.3 point zero five point four is released but I was having some issues with permissions on Windows so I decided to roll back to five point three all right so you can also check it with NPM - - version usually with these flags you'll have a long and short version okay the short will will be just a letter and you use a single - the long will be the full word and you'll have you use the double - so for example - G and - - global would be another one alright now if we were to just type in NPM what that does is it brings up the help page if I type in NPM help it'll do the same thing and it just gives us a list of all the different commands okay so you can see we have an it install uninstall all the commands that are available with NPM now we're definitely not going to go through all of these in fact a lot of these are related to actually publishing your own modules on the NPM repository so we're not going to get into those but we will go over the basics and the fundamentals all right so let's clear this out if you're using git bash you can do ctrl L and that'll just clear everything out so next thing I want to do is talk a little bit about the package.json file all right now the package.json file is probably the most important file in the whole nodejs JavaScript world it's a manifest file that has all of your application info like its name its version author etc but that's not the most important part the most important thing is that it holds all of your applications dependencies and what I mean by dependency is the modules that it needs to work so if you are if your application runs on Express then you need to define in this file that it uses Express ok you'll want it in listed in the package jason so that if you deploy your app or if you move it somewhere it knows that it needs to use Express and not only does it list the name of the dependencies but also the specific versions that it uses ok because if it has the wrong version then excuse me things may break ok you can also create scripts in your package JSON file called NPM scripts and I'll get into that later now you could manually create this file but that would be kind of a waste of time because we have a very simple command called npm init which will actually create the file for us alright so let's get back to our terminal and let's run NPM in it alright so back in get bash or whatever you're using for your terminal let's go ahead and say NPM in it now before you run it make sure that you're in your actual application folder ok I called mine NPM app so make sure you're in that and then we're gonna run it and basically it's going to take us through and it's gonna ask us some questions so the default answer is going to be in these parentheses and if you're happy with that answer then you can just click enter so NPM app is good but if we wanted to we could name it something else but that's good so I'm just gonna hit enter version it's gonna be 1.0.0 that's good and I'm gonna go through the the semantic versioning schema later as well description so if you wanted to put something here we'll just say a simple sample app entry point this is basically the main javascript file sometimes you'll see app KS or server dot Jas will just keep the default of index J s test commands we don't need to worry about that we don't have a git repository keywords you can put specific keywords if you want author you can put your name or skip it whatever license the default is ISC I usually use MIT and it's gonna ask if everything is ok and then you just click enter and now if you look over in our file structure we have a package dot JSON file and it has all the stuff that we just answered now we're going to stick to this NPM init command for a few minutes I want to talk about it a little more so what I'm gonna do is I'm gonna just delete the package JSON file that was just created and I'm gonna show you how we can clear this out I'm gonna show you how we can run NPM on it without having to go through all those questions so do that we can say NPM in it and we can either do - Y or we can do - - yes and what that's gonna do is it's just going to accept all of those answers for us okay it's going to accept the defaults so let's run it and you'll see that we didn't have to answer any questions and it just created the package Jason alright now you might be asking well you know what if I want to add my name or change the license or something like that we can actually change the defaults for NPM for our package JSON file all right so let me show you how to do that so I'm going to just go over here and clear this out and we're gonna run NPM config set ok and then we're going to decide what we want to set so I want to change the author name to be my name by default so to do that we're gonna say set and NIT - author - name and then we're gonna put inside quotes here whatever you want ok so I'm just gonna put my own name and I'm gonna hit enter alright so it doesn't give us any response or anything back but it does in fact change the default for for the author all right let's say we want to change the license to be MIT so we can say NPM now again you can say config set but when you're setting you actually don't even need to include the word config you can just say npm set and then we'll say in it - license and we'll set that so we'll set that to MIT and we'll run that so now again let's go ahead and say NPM and NIT let's first delete this package JSON file okay and then we're gonna run NPM in it and I'm just gonna do a dash Y here to accept all the defaults and let's click enter all right and now if we look at our package dot Jason you'll see that my name is there for the author and we have MIT for the license okay so we change the defaults for those options now if you ever want to check what there is for a default from your command line you can do that as well so we can do that with NPM get and let's say we wanted to check the author so we can say NPM yet and knit - author - name and you'll see we get Brad traversée okay and I'm I'm omitting the config you can also do config get and that'll get it as well so what if we want to remove defaults okay so basically just you know go back to what it was in the beginning so for that we can say NPM config delete and we're gonna say let's do delete and knit - author - name okay and then we'll do the same thing for the license so we'll say NPM config delete init license and let's go ahead and delete our package JSON file and let's run NPM and knit - why and check it out again and now you'll see that the license is back to the default of is C and then author is blank alright so that's how you can set defaults check them and delete them so we're going to clear that out and now we're going to install a module so the module I'm going to install is called load and I'm sure a lot of you know what that is it's basically a JavaScript library that gives you a bunch of utility functions that I can do things like sort arrays loop through arrays set timeouts and delays just all different things to do with JavaScript and it makes it a lot easier than to just write it out with vanilla JavaScript so we're gonna install that so we're gonna go over here and say npm install lodash now there's one very important flag that we need here and that's - - save and what that does is it saves it to our package JSON as a dependency okay so that that's basically the most important part of this file and if we don't use - - save it will get installed it'll create a node modules folder and install it but it won't get added to this file so we want to want to make sure that we have that flag so let's go ahead and run that and what it did is it did two things it first of all added this dependencies object and it added load - and it also has the version I'm gonna go over this in a little bit and what this this symbol here means and all that and then it also created a node modules folder and it put the lodash module inside there alright so now we have lodash installed so let's go ahead and create whoops and want to close that let's create our our entry point which is going to be this index dot JSP okay so in the root we'll say new file index dot j s and what i'm gonna do here is just basically create a very very simple application that's just gonna loop through an array and output it into the console and the contents of this application and what it does does not matter at all it's just an example so you can see how modules work so we're gonna create a variable I'm going to just call it an underscore that's the convention for low - low - meaning an underscore and we're gonna set that to require okay so whenever you install a module and you want to use it inside your application you just want to set a variable and set it to require and then whatever the name is so in this case hello - all right so now what I'm gonna do is just create a simple variable called numbers okay we'll just set this to just some random numbers all right so we have some numbers now we want to loop through it and I'm gonna do that using the each function that's available with a low - so we can say underscore dot each and I could have called this anything I could have called this LD and then said LD dot each I could have did that but the convention is to use an actual underscore so each is gonna take in the actual array so numbers and then it's also going to take a function alright and then this function here is gonna take in an iterator we're just going to call it number and then also an index okay which will be just it'll start at 0 and then each iteration it'll go 1 2 3 and so on but all we want to do here is console.log the number ok and that's it that's our application so we can run this in our console by just saying node and then the name of the file which is index dot JSON Dex and there we go so it outputs all of the numbers in the array so you can pretend that this is some big application it doesn't really matter as far as what we are using it for we're just using it to talk about modules and NPM alright now I want to give you an example of why it's important to use the save flag and add it to your package jason all right so let's say that we're happy with this application we want to we want to push it to a git repository for other people to grab it and use it now when you pushed or a git repository or you you move your file somewhere you don't want to include the node modules folder because this is just this is just a third party module and it's just you don't want to you know clog up your application with I mean you could have a ton of stuff in here so you just want to list them in your package.json file and then you'll just take your you know your app files and then the package.json file you'll leave the node modules okay a lot of times you'll create a git ignore file and you'll add node modules to it so it knows not to push that up to the repository all right so let's say someone takes it from your repository they clone it or they pull it down or whatever we'll just call this we'll say NP we'll just call it my app all right so we're gonna go ahead and we're gonna take our index J s and our package dot jason we don't want the node modules and we're gonna paste that over here and then I'm gonna open up another terminal in my app and the new the new application that we just pulled down so let's open up a git bash and all we have to do now if we try to run it as is if we say node index we're gonna get can't find modulo - because we have no node modules folder with low - in it so what we have to do is just run npm install ok nothing else just npm install and what that does is it looks at the package.json dependencies and it installs anything that's inside of that okay so let's run that remember this is the second this is the my app this isn't our initial application ok so it says added one package and let's take a look at my app and now there's a node modules folder with LowE - ok so now if we go back and we say node index our application works ok now let's do the same thing okay we're gonna delete everything in the second folder in my app and let's go into our original app and Visual Studio code and just remove the dependencies right here ok let's say we just did npm install lo - without the save and then we'll take our two files again bring them over ok and then we'll open up get bash in the second one and we'll say npm install' and you see that it doesn't say any packages have been installed because it doesn't see any there's nothing in dependencies so if we now try to run node index it can't find low - because it was never installed so that's why it's very important to make sure that you save your dependencies all right I know that was kind of a side tangent but I just wanted to show you why that's so important so let's go ahead and put that back and save all right now you also have something called dev dependencies and you want to solve something as a dev dependency if it's only gonna be used for development okay you're not going to need it in production and one one example that I can think of for this would be like gulp which is a task runner used to do things like minify your JavaScript compiled sass files things that you do in development so let's go ahead and install a dev dependency I'm gonna clear this out I'm gonna say npm install and i'm going to install gulp and then also gulp has a bunch of different plugins i'm going to install the gulp - sass plugin alright because you can do this you can install more than one module with one command but now at the end i'm gonna say - - save - dev ok and by the way you can put this at the end or you can put it in the beginning like this - - save or - - save - dev you can do it like that as well but let's go ahead and run that and that's going to stall both of these alright so notice that it didn't get these two modules they didn't get put in dependencies they got put in their own object called dev dependencies okay and then we have gulp and gulp sass and they did get added to the node modules if I reload this now also notice that there is now a ton of in this node modules folder the reason for that is because gulp has a ton of its own dependencies so the node modules folder isn't only going to be your dependencies it's not going to be just this stuff it's gonna be any dependencies that any of these have so this gets huge and you can see why you don't want to package your application with this folder okay because it gets humongous depending on how big your application is and how much you know development tools you have running and stuff like that ok now with dev dependencies I'm just gonna kind of do the same thing here and create a new folder called my app and I'm gonna bring over these two files and then let's open up my app with git bash or whatever terminal you're using and if we say npm install it's going to install all of our regular dependencies plus the dev dependencies okay so both of those but if we want to apply - - production if we applied this flag what it's gonna do is it's only going to install the regular dependencies you can see added one package and if we go into my app and let's take a look at we'll just look in node modules no gulp ok no gulp or any of the other dependencies if we were to just run let's actually delete the node modules and we'll run it without the - - production and you can already see that it's different it's it's adding gulp it's adding all of those other dependencies and you may get warnings and stuff if some of the other dependencies are a little you know out-of-date or something if something is deprecated or whatever and now if we look in there we have all that stuff okay so that's one of the differences between dev dependencies is you can add that production flag and it's not gonna it's not gonna install that stuff all right all right so let's get back to Visual Studio code and now we're gonna go over uninstalling or removing dependencies so let's clear this out all right when I say dependencies modules dependencies packages all the same thing so let's say that we don't want to use these this gulp SAS or gulp anymore so all we have to do is say NPM uninstall gulp our let's do let's do gulp SAS and since it's a dev dependency we also want to include that flag again all right because that's going to remove it from here as well as delete it so let's go ahead and run that all right so now you can see that that's gone it's also been deleted so there's also some aliases for uninstall so let's remove listen let's get rid of gulp now and we're gonna use removed ok so we can use uninstall or remove you can also use just RM or un tell any of those they're all going to do the same thing so let's say remove gulp and let's say - - save - dev and that removes gulp all right now you can also install certain versions of modules so what I'm gonna do is I'm actually going to remove lo - for a second I'm gonna say NPM let's use RM this time and we'll say lo - it's a regular dependency so I'm going to say - - save so now that's removed if we look in node modules and we just reload this you'll see that there's nothing in there except just the dot bin so let's say that we want to install an earlier version I think the latest version was one second we should have looked before I had installed it but the latest version is four point seventeen point four so let's say we want to install four point seventeen point three what we can do is we can say npm install lodash and we can do at four point 17.3 - - save and there we go so now you can see that we have four point seventeen point three all right so let's say that we want to update to the latest version we could simply go NPM update lo - and there we go you can see that the three change to a four ok so it's as easy as that to update it's as easy as that to install remove update you know it's that's very easy very simple commands like I said I'm going to attach a text file it's gonna have all this stuff for you you guys can put it somewhere and you can kind of keep it as like a little cheat sheet all right so let's stop for a second and let's talk about these version numbers now when we install a package or a module when we look inside the package Jason at the version numbers they're always in this this format so we have three three numbers separated by dots in between so basically each of these has a meaning so this last one here this is the patch version alright so what that means is that this is when when there's some kind of bug when there's something wrong and they fix it or a couple bugs and they fix them they're gonna increase this okay so this number gets increased now this isn't going to break anything on your on your in your application okay if you upgrade to the next patch version it's not going to break anything it's gonna fix you know fix some issues at least if the application is created by good developers all right so that's that's called the Hach version next we have the minor version okay which is the middle one so for the minor version they may add some new features okay so maybe there's some new features to the application but it's not gonna break your application okay your syntax should be safe okay so you should be you should be able to upgrade that version without having to have any worries now the major version which is this number this applies breaking changes okay so if you go if you have your application and you upgrade to let's say let's say from Express version 3 dot whatever to version 4 dot whatever your application is probably going to break and you're gonna have to go in you're gonna have to look at the new documentation and then upgrade your application you're gonna have to upgrade your syntax to match the new version so that's what these three numbers are so let's go back into Visual Studio code and we're going to talk about the little symbols all right so let's take a look at our package Jason and let's look at our lodash dependency and we have our version number but before that we have this caret symbol so what this signifies is that when we when we go and we move this or we push it to a repo and someone clones it and they run npm install it's going to install the latest the latest minor version okay so if there's been an update and there's now lo - four dot 18.0 or something like that and they run npm install that's what's going to get installed is that latest minor version all right now if Flo - has actually changed to five as the major version it will not install five okay it's not going to install the latest major version even if there's been an update it'll stick to four it'll just be the latest version of four okay the latest minor version now if we were to put a tilde here like that what that's going to do is it's gonna it's gonna say to keep this minor version and only update the patch version okay so go to the latest patch version okay now if you take this off completely like that it is going to install this exact version no matter what even if there's a new patch version it'll always stick to this exact version now if you want to just completely replace this with an asterisk like that what that says is install the absolute latest version so even if there's a low - 5 then go ahead and install that and that's usually not a good idea because like I said the major version there's usually breaking changes and if you do this and they pull down your application and they do NPM install then there there may be some issues and it may not even run ok so that's why when you do NPM install low - the default is to just keep the minor version to update now when this could get a little tricky is when you're working with alpha versions of applications alphas and betas and those of you that have taken my bootstrap 4 course on udemy know that I had some real issues with that so what I had to do is go back and when we built the starter pack I had to have you guys remove this so it installed the exact version ok so it can get a little tricky and it can get a little aggravating especially if you're creating courses like like I did but just know that that's what these little symbols mean all right hopefully I explained that all right so let's go ahead and just make sure that this is saved all right so next thing I want to move to is global modules because up to this point we've only installed local modules meaning that they're just going in the node modules folder let me just reload that all right so a good example of a global module would be something like node Mon node Mon is a module that can continuously watch your applications so that you don't have to keep restarting it every time you edit it so every time you save it'll it'll it'll watch it it'll restart it and that's something that I like to install globally most of the time so let's go ahead and do that let's go over here and let's say npm install and we're gonna add the - g flag for global and then we're gonna say node mon all right and since we is global it's not going to go inside of our node modules folder it's not going to go inside of our package Jason it's being installed on our actual machine now if you want to know where this is being installed there's actually a command that can show you where your global modules go and that's NPM root - G and you can see that mine on Windows it's going to go to your users folder AppData roaming and then node modules so let's actually check that out so we'll go to let's see I want to go to our users Brad ants go to app data or is it you'll have to show hidden files as well and then let's see roaming NPM and there it is node 1 so anything you install globally is gonna show up here ok or whatever this folder is ok if you're on a Mac or Linux obviously it's gonna be a different type of location now since we installed node 1 we can we can run it from anywhere ok but generally you want to run it inside of an application directory so let's see what happens if we run it ok so what it did is it ran our application and it's continuously watching it so if we go over to index J s and we just change something like let's change this to a 31 and we'll save it watches it and then it reloads it and runs it again and this is great if you're working with like Express and you're working with a web server so that every change you make you don't have to go and restart your server you can just run node Mon and we'll watch it and then you can just go and you know reload your browser and your application will upload alright I'll reload I should say another good module for installing globally is is like a server type module I like to use live server so I'm just gonna stop the node Mon with control C and let's go ahead and say NPM install live - server - G and then what that does is it'll allow you to run whatever directory you're in on your localhost and it'll load it up in your browser all right so let's go ahead and run a live server and it just opens it up I don't have any index.html file in my folder if I did it would load in fact I guess I can do that real quick just to show you we say index dot HTML and we'll just put an h1 here and save and there we go all right so it gives us this little server which is nice and we can go we can stop that with ctrl C alright now if you want to remove a global module so let's see if we go to back to that NPM folder you'll see that now I have live server there if you want to remove this you do it the same way we can do NPM remove or uninstall just make sure you add the - G flag and then let's remove node lawn and then that should go away okay so you can see that node lawn has now disappeared all right so let's see what else I know this is getting long with them trying to cover as much as I can if you want to list the packages in your project you can use lists so if we say NPM list you'll see that we just have low - now I'm actually going to install gulp again just so I can show you something so when I say NPM install gulp and I'll just add it as a regular dependency okay so now if I say npm list you'll see that it's gonna list everything okay including all of the dependencies of gulp so let's say we just want to list the top-level what we can do is we can say npm list and we can add the depth flag so - - depth and we can set that to zero and then you can see it's only going to show us gulp and low - alright if we want to change the depth to one it'll show us just the dependencies of gulp okay but a lot of the dependencies of gulp have more dependencies and that can be another level so if we say - you'll see that it gets bigger so if you just do NPM list it'll show all of the dependencies of all the modules all right now I'm just gonna remove gulp real quick so let's say n can remove gulp and I added that as a regular dependency alright so the last thing I want to do is talk about scripts ok so if we look in our package dot jason we have a scripts object and by default they give you this test this is if you want to install something like mocha some kind of testing framework and you want to have you want to be able to say npm test now a lot of the times you'll see a start script so we're not going to use test I'm just gonna change it to start and then what you would do is put in the command to start your application which in our case is what node index J s so we would say node either index or index dot JSP and say npm start and that runs our application now there's a few reasons to do this one is because if someone takes your application they may not know or they may not want to look and see what your main file is they don't want to go in here and see all the main index J s because it could be something else it could be apt J s or server J s so NPM start gives them just an easy way to start it up without even have to look have to look another reason would be you might change this okay so you may change index J s like let's rename it to app dot J s and we'll go ahead and change the main here to app J s and then we can start this up with node app since we changed the name node index no longer works so what we would do is just update our start script like that not like that app is and then they can say NPM start and that works all right another reason is if you deploy to like let's say Heroku or something like that some kind of platform a lot of times they'll look at the start script to see what file is actually gonna need to need to be run so that's that's another reason but start isn't the I mean you can add any script you want like let's say we want instead of having to do live server globally let's say we want to install it locally and then create a script for it so what I'll do is I'll say NPM actually first of all I'm going to remove it from the global area so let's say remove live server - G all right and then we'll install it locally so we'll say npm install usually this will be a dev dependency so we'll say save dev oops save dev live server all right you can see that that got added and then we may want to create a script like let's say we'll call it just server and we'll want it to run live server so we'll save that go over here and now we can say npm run server and it'll open it up for us all right so that's an example of a very simple npm script notice that I did run I didn't do if we say npm server that's not going to work when we create a script unless it's start or test or i think there's some other ones then you have to do run okay so no matter what you put here we could call this dev if we wanted to and then we could go over here and we could say npm run dev and that'll start up live server alright so I think that's gonna be it guys I hope that you learned something here whether you've never touched NPM before or if you've been using it for a while or if you know you know all this and you just wanted to watch it as a refresher that's fine so that's it thanks for watching guys and I will see you in the next video

Channel: Traversy Media

Views: 212,695

Rating: 4.9643025 out of 5

Keywords: npm, node.js npm, node modules, node package manager, npm packages, npm modules, npm javascript, npm tutorial

Id: jHDhaSSKmB0

Length: 42min 3sec (2523 seconds)

Published: Mon Sep 18 2017