Complete NPM Crash Course 2020 | Learn NPM fundamentals and basics

so what is going on everybody my name is Michael and welcome to a brand new course on NPM this is the step five for your front-end web developer learning path on code down so if you want to be a front-end web developer you have been following this course all along from the very step one and yeah NPM is a package manager for node and in this whole basics of NPM and this whole package manager concept web series we'll be learning about what NPM is exactly how you can how you can work with it what are the alternatives how to be you know very very efficient with using NPM as your tool and trust me if you are into web if you are into web development even for the backend part and in a lot of cases in general as well because you can install global modules within PM CLI tools you can create CLI tools it's all that good stuff which NPM comes with all along so I'm pretty excited to do the series we'll be covering a lot of ground on NPM from the next tutorial onwards so that's all for the intro I'm gonna see you really soon in the next one alright guys welcome back and in this video we'll be seeing that what exactly is NPM why it is needed you know why it is there in the first place so starting off with the roots of NPM NPM used to be an independent company earlier but now github has acquired NPM so essentially microsoft owns github so that means microsoft own owns NPM as well so first things first you know that you are in good company NPM is a company backed by Microsoft and Microsoft isn't going anywhere anytime soon so you can rely on the confidence on the trust NPM has to offer you with that being out number two think about NPM is that it has been a standard package manager for node for I mean like almost for the whole time right since node launched as a runtime for JavaScript till date so yeah NPM has been from the very beginning now what is a package manager exactly well package manager you see that a lot of times what would happen is when you're creating websites or if you are creating backends or if you're creating CLI tools or whatever you are doing you're gonna need to do a lot of things which are pretty low level for example creating a server right now you would say that it's not low level but I'm I'm talking relatively according to the language so you know interacting with sockets and the HTTP client module on node I'm considering that as low level in this context right although it is not low level but still let's just assume because that involves a lot of work right you have to you know get the chunks of the HTTP request in order then wait for the whole HTTP request to arrive concatenate all the data then parse the response as you know whatever JSON or whatever you're expecting or maybe on the basis of headers then you have to make sense of the request which has been made then do some logic and then send the response as well in a similar way so you know it kind of becomes complex really quick when you're working with applications which are doing a lot of things right so you cannot you absolutely just cannot build everything from scratch you have to build on other people's work right so what people do is they would occasionally what whatever they have done is that they would make it make that open source and they would maintain it right by maintaining I just mean you know usual bug fixes and version upgrades or maybe feature addition as well so people maintain those packages and they are open source and NPM acts as a repository to host those packages right now github is as a place to host the whole code but NPM kind of acts as a repository to host the package only right so you you can't really browse the core of a package on NPM because NPM just uploads just contains the minified tar.gz file whatever it is like the minifides minified archive of that particular file right and a readme for your for your help technically they could display the code but it's not it's its main selling point right so NPM just hosts all these modules on their website they provide a nice CLI and this is where the power of NPM really lies so it's not a website NPM is actually a tool right a website is just a front for you know just discovering packages and it's not necessary for example right if you want to use NPM as a developer you do not need to visit website a lot so what you have to do however is use their CLI tool a lot right so this is like one of the commands which NPM has there are a lot of other commands as well we'll go through all of them but yeah NPM acts as a command line tool to fetch and install and manage remove update upgrade all the packages right in your node application NPM is specifically a package manager just for node it cannot work with other languages like Python or Java or any other right and as a matter of fact even Dino does not support it which is like another one time for JavaScript but still it has chosen not to support it out of the box so the idea is that NPM acts as a package manager allows you to download manage update upgrade remove packages easily right and with the weekly downloads when you see that a package has a weekly downloads of like over a million or so you can you can very safely assume that it should be a very very much used package right a lot of people are using it that means it would be most probably it would be maintained by a lot of good people right so yeah that's that's basically it for the introduction part for NPM that's in general what it is how it works and there I have just given you a brief idea of you know the whole thing right so yeah that's all for this video I'm going to to you pretty soon in the next one hey everyone welcome back my name is Mei hole and in this video we'll be taking a look at what is the difference between yawn and NPM now when you are like you know browsing popular packages like Express or maybe react native or you know any other package which is a node module you're gonna face an option between two packages almost always the first one being NPM and the second one being yarn so yawn is up and is another package manager which is hundred percent just like NBM except the fact that it is yawn which is an alternative and number two it is backed by Facebook so Facebook created yawn microsoft owns NPM although it did not create it but yeah they own it so the idea is that yawn was born because a couple of years back or so Facebook not really Facebook yeah well everybody could experience that NPM was very slow right in a lot of operations and it did not include support for log files out of the box you know it did not work fast enough there were no caching strategies which were very good at that moment so you know the tool was lagging a lot right and there was no competition in the space so you know competition when there is competition the customer gets the benefit so there was no competition and the tool did not had a lot of things you know which could be implemented so what Facebook did is that their employees came up with another package manager out of the box and it kind of started a race between NPM and yarn people you know NPM trying to get people to use NPM Facebook trying to get people to use that and yeah so what happened because of this is that all along the two teams coordinated they you know just talked among each other people saw what NPM is doing people saw what yarn is doing both were open-source so that's not a problem and in 2020 now what has happened is both of the package managers have reached at a point where they are pretty much very similar right so yawn and NPM I believe I have used both both of them for a lot of projects and pretty much they are just the same now right just you might observe yawn is a little bit fast on your dev server NPM is a little bit faster on your production server you know all those little things but but the main idea is because both projects are open-source and they have shared all their best strategies and you know everything both of them are good you can pretty much go ahead and choose anything but because the series is on NPM I would obviously recommend you to stick to NPM only because yawns CLI syntax is a little bit different than NPM but yeah I mean Yanis good too if you want NPM is good as well they are pretty much the same thing now but the fact that NPM has been around for a long long time and yeah I mean a lot of packages have you know just they have been built with with the idea that NPM would be installed so a lot of times some sort of CLI functionalities might fail if you do not have NPM I cannot really remember exactly which tool I used just a couple of days back but yeah it failed because I did not had NBM installed on a production server so yeah that's that's the idea of using NPM that's one point for NPM so yeah that's that's basically it for the differences between NPM and yond not much again this one thing about yarn about yarn version two which which is something for a different video but yeah when I'm talking about yarn I'm talking about yawns classic version right in this version one series right yawn version two manages stuff in a very very different way it does not use node modules it uses some other plug-and-play functionality on how modules should be managed but anyway that's not the topic we'll just stick to node modules because it's most widely supported it has been for a long time and yeah for the most part it's manageable at least so yeah that's basically it for this video I'm gonna see you pretty soon in the next one hey everyone welcome back my name is Miho and in this video we'll be taking a look at how you can download install and setup NPM and node for the most part on your systems now it does not make sense to install NPM because it cannot work without node so you know you just cannot have a system which has NPM install but not node because NPM internally uses JavaScript which needs node or at least a node like runtime environment to be present on the system so the best way to get started with NPM is to download node right so you can go ahead on node.js org now hear me out this is for Windows guys so if you're on Windows go ahead on node.js org download the you know the LTS version if you want you can download the current one as well it's mostly bug free but just don't use it on production right just use the long term stable version on production so just go ahead and download either one of those it's a wizard installation just follow along with the next next next thing and you should be done for the Linux skies out there if you're using Mac OS right so what you have to do is simply go to your terminal that is just open your terminal and right for you install note and I'm assuming here that you have brie U which is a package manager for Mac OS right so NPM is a package manager for node and brew you is a package manager for your whole operating system right and node is a package for your OS right it makes sense so just go ahead and install three you just Google it's it's a simple Ruby script you have to execute in your terminal and would be available I won't be covering that I'm assuming that you have that installed if you face any problem just let me know below Bri you install node would get the node and set it up for you once you do that it should automatically just link your node as well but just in case you can run this as well so when you when you run riru link node it would actually link the binary to your environment so that you are able to run node just like that then if you do node we you're gonna get something like this right all right to my Linux guys out there what you have to do is you have to install NPM in the most worrying way the node package manager and the node as well so what you have to do is first of all just go ahead and run oops I'm already rude so I don't need that AB get update right so once you do that it's just going to update the repository so that you fetch the right package then what you need to do is just say apt-get install NPM right and yep I told you that you need node before you install NPM but if you just start you install NPM using apt-get it will just go ahead and do that for you automatically but the but the thing which you have to remember here is that the NPM and node which is there in the Ubuntu repositories is not updated right so it's very old NPM so if you are following this video make sure in any case to follow the next video as well where I would show you how you can manage no diversion using a package known as end so in this video we'll just we'll just stick along and install NPM and node on Linux but just just make sure to watch the next one as well just in case and yeah I'm just using app yet but if you're on a distribution like cent OS or whatever just use that package manager try to figure out the repo for that and well if you're on you know some sophisticated Linux then I'm pretty much believe that you can install node by yourself anyway so that kind of defeats the purpose of me showing you how to install node so yeah let's just wait for it for some time and it should be done soon all right so once you do that you're gonna see that now you have access to node and NPM and you I guess they updated their repositories but anyway I remember the last time I did that it was like I was getting note 7 and NPM 4 or 3 here I guess but anyway now this is a pretty decent node version no 10 is a decent version 10.19 but anyway in the next video make sure to watch the next video I'll show you how you can manage the versioning of your NPM package and be a versioning of your node system installation itself so yeah that's basically it for this video I'm gonna see you pretty soon in the next one so what is going on everybody my name is May ho and welcome back to this video in which we'll be seeing what is NPM worsening and node worsening essentially and why would you ever need that so the idea with no versioning is to have multiple versions of node on your systems right it is pretty much like you can think of it like Python versioning if you are coming from Python environment you see that you have virtual environments in Python if you are able to relate so what virtual environment in Python is loosely mapped to what worsening is in node so the idea is that you can have multiple installations multiple different versions of node on your system and you can switch between them easily without actually causing you know a chaos to your system so you can have pretty much like no 10 11 12 13 14 installed on your system simultaneously and you know you can just work with any one of them if you like now why would you need that thing in the first place well first things first for example if you're working with the legacy code base which allows which probably runs on node 6 although you should have updated it by now but I'm just considering some edge case which which has some humongous sort of I don't know some code with written in node which uses node 6 and it's not compatible with the upward versions you should stay with no you should stay running note six on that system only now if you use to code for that system on your primary device you want to have node six written here right not note 10 because you know that's what your project works with so you might want to have node six for some legacy projects and you might want to work with just you know node twelve thirteen fourteen for your regular projects right because they come with a lot of new features a lot of performance optimizations why not so that is one reason right the another reason for this is could be like a lot of times what happens is when we install packages using NPM they are not just JavaScript packages right they are they could be they could be system binaries as well which have to be compiled using node Gipp right so it's gy know - UI p i might pronounce it wrong because i've never heard it how to pronounce it but anyway the idea is that you can have actual binaries that is actual code which is compiled right with as node packages so as part of north packages for example so the idea is that if you have a node binary which is compiled with no version six or seven or eight it might break or it might not work at all with node versions nine ten eleven twelve for example so for that project you need to be using node eight only if that binary does not support a node version greater than ten you can't just work on that with an old version greater than ten so that is number two the number three reason I can think of is just for fun right so there's a experimental release for node and you want to try it out without breaking a lot of things one way is to like you know install it as a version on your main system although you can always go ahead and use stock or containers for that but we won't get it we won't be getting into that but yeah the idea is that you can go ahead and install the highest note version play it around little then downgrade as you like without you know all from the terminal you don't have to touch anything at all yeah that's good so yeah those are my three reasons why you would want versioning with node in the next video we'll see how you can do versioning with node and how that works so that's all for this one I'll see you in the next video really quick hey everyone welcome back and in this video let's just go ahead and see how we can manage multiple versions of node so just like I said you have some sort of packages which node provides right and there's this one little handy package called n that is just the letter n what this would allow you to do is that it will allow you to just manage your node installations without creating any sort of problem on your main system so how do you install it well just go ahead if you're on Linux or Mac this will work just fine my windows friends I'm very sorry but n is not supported on Windows so what you have to do is you have to work with another package manager which is known as nvm right and if you just go ahead and just Google nvm and not angry immerses in you're gonna see that this is this stands for an old version manager right windows supports this right Linux and Mac OS also support this but I would highly recommend not to go for nvm if you're on Linux or Mac OS because n is much more simpler to operate it's much more easier and intuitive so what you have to do back to Linux and Mac OS just write sudo npm install g n right and do not worry if you do not understand this command at all will be breaking down all of that later on just go ahead and do that for me for now and of course su is not found for me because i'm already you root npm install GN and what i want to do and not because i was rude and just to clarify here because i am running this inside a docker container and this and that does not have a sudo binary so anyway that is the talker container running linux ubuntu just for the record I'm slow yeah so it's a bun too and for mac OS you can do a similar thing sudo npm install GN right so what it would do is that once you run both of these commands that is either of these command on linux organ or mac OS what it's going to do is it's going to make a command known as end just end available on your systems right i'm gonna show you how that works on mac because i would be able to use sudo at the appropriate places then so what you have to do first of all is right sudo n and then latest so what this would do is that it will grab the latest version of node which is there which is available and will install it on your system partly to the already installed node version so let's just go ahead and enter it will ask you for your password just go ahead and enter that and you see that it's installing node fourteen point four for me right i think i have fourteen point three on my system but fourteen point four was released so that's the latest one and once it does it has just install it but if you see right now it has not it actually changed my new version as well i did not expect it to and yeah i can just say that it changes your node version it will just update your node version to the latest one as well all right so that's fine and you're gonna see that your NPM is updated as well so if you were running an older NPM you see that it install node 14.4 with NPM so it's not just node is updated NPM also gets updated so how do you go back to your previous version well it's simple just write sudo and hit enter and you're gonna see a list of all of your no divisions which are installed for me I have 10.17 13.5 1414 314 for right and you can basically see that you can also use D for delete q for quit and just go ahead and if you want to switch to nor 13.5 just go ahead do that and hit enter it will take some time to copy the files at appropriate places and set the path but in a couple of seconds or so it will say you that yep it has updated and it has restored the NPM as well as node so now if you go ahead and write node V and n P and V you're gonna see that you have the correct versions super handy super useful I can't tell you how many times I use this in a day because of if I'm working with some sort of legacy code base so again go ahead and if you do not want any versions you can delete them for example you can delete 10.17 or maybe I'll just get rid of 14.0 and 14.3 so there it is it's deleted it's gone you can again install a specific version if you want by going sudo N and the version for example 6.0 right so it's installing node 6.0 for me now and it will appropriate in it will install an appropriate NPM as well so you see 6 came with NPM 3.8 so there's that so if I go ahead and do that now you're gonna see I have the node 6 right now and you can verify that by seeing that flat is not a function on an array right which is well available after node 10 or 11 I guess so the idea is that I'm just gonna delete this because I don't need that I'm gonna keep on thirteen point five the idea is that you can manage it exactly the same way on you know on Linux as well so just go ahead n latest it's going to install okay so it saves me that it needs coal or W cat as well because it's running inside a container it does not has that so you probably would have you know Ko'olau W yet so I'm just gonna install coal and now and would be able to you know be able to operate properly so if I do n latest so we had that rate it's installing node 14.4 now and you can go ahead and do node we oops you see that we have some path problem here so just go ahead and copy this as well so just go ahead and do run this command and you should be able to do that just find right node V n in PMB that's fine you can also restart your terminal or you can just do a source of bash RC as well if you want so yeah that's basically it for this video that's how you manage versions with n a very simple CLI tool written in JavaScript for node amazing that's all for this video I'm gonna see you pretty soon in the next one so what is going on everybody my name is may hole and welcome to this video in which I want to explore what is a node module right so the thing that happens when you install an own module that is a little bit different than what actually is a node module is in itself you see that I'm on the I'm on the NPM page of lodash which is a very very popular utility for node and it comes with tons of handy features so if I go to the github repository of lodash what you're gonna see is all the source code for lodash right so this is more or less mostly a lot of part of this would be actually present when you do an NPM installation of this lodash module right so the idea with the modules is that it's going to fetch a lot of code well mostly a lot of code from a single package name itself so when you write NPM install lo - we'll see what install is but when you write that particular command what's it's going to do it's going to come to NPM it's going to fetch the code which stores which is stored on NPM well you see that it is on github as well but just like I said your packages are hosted on NPM as well so when you do NPM install of lodash it's not actually going to get up it's actually installing it from the source with a file which is hosted somewhere on NPM infrastructure only it pulls it down it extracts that file and it places it into a folder known as node modules right so let's just go ahead and create a very basic project saying NPM basics right and I'm gonna open this folder and I'm gonna say NPM install lodash right and we'll cover all these commands but NPM install - we'll just go ahead and do whatever I said earlier so let's just go ahead and hit enter and don't worry about these warnings for now what we can see is now we have a folder called as node modules inside our directory you can see right here we have a node underscore modules folder this is this is going to be the primary place where all of the external packages would be placed by NPM right so for the most part you never really need to open or explore this folder at all right you can just leave this folder as it is you'd never need to open it you never need to add files or remove files manually from this folder for the most part again and yeah if you go ahead and take a look here you're gonna see you get low - as a dependency here so all of the dependencies would be listed as folders here and right here for the low - you can see it has got all these files and if you take a close look you're gonna see that these files are pretty much what you're gonna see on github as well right for the most part so you know you can just go ahead and see what could have has and these folders at the top but yeah this is basically same as all these file you can see right here but a lot of NPM packages what they do is that they post the original source code on github that is the non minified and like nicely commented and beautiful code on github and for the NPM what they would do is they would compress it they were optimize it they would minify it and then they would ship it so for the most part you might a lot of times you might see that the code inside the actual NPM files is not same as the code which is available on github so just keep in mind NPM and github are not synchronized right it is no it is no responsibility of developer to have the same code on the github repo as well as on the NPM as a package so yeah that's that's basically it for this video I just wanted to give you a brief overview of a single module lodash as introducing you what modules are and yeah I hopefully assume that you learned about node modules a little bit and this was enough nice little push for the beginning so yeah that's basically it for this video I'm gonna see you pretty soon in the next one hey everyone welcome back and in this video what we'll be doing is we'll be seeing how NPM actually installs that particular module so the last video I installed NPM install lodash install lo - by saying NPM install lo - like that but what happened exactly I mean we can just go ahead and see at NPM we have this package and just like a sale on github a lot of times the code does not really match so what happened when I write when I wrote NPM install lo - a lot of things to start with first things I'm not going to cover the whole process just the main thing that is how NPM installs a package so there's a command called NPM view instead of NPM install and if I write NPM view lo - what it's going to do it's going to spit me a tar file URL that is the star ball URL what this is is that when you as a developer when you create an NPM package what you do is that you dar your source code and you upload it to NPM so when a developer is actually creating a node module the only thing NPM receives from the developer is the star file right that it NPM does not care what is in the package it does not care about that github source code or whether you want to host it on github or not it just cares about getting this star file right so once you have the star file once NPM has the star file it stores it inside its registry write it which is probably a CDN or something which basically hosts this this package right so when you do npm install of lodash what it does is that it takes this URL that is the tarball URL which i which it got from NPM it goes to you know this particular URL and it downloads this lodash file right and if we go ahead and just take a look at this file what you're gonna see that it is an actual if I go ahead - or maybe let's just move it here right so now I have this low - fourteen point seventeen point five and if I say tar you know just unzipping this file you're gonna see I have a package with me and I have all this files right all these files so what essentially happened is that NPM said okay let me just go ahead and see if your lower lash is located it got this URL it did a curl or W get or whatever on this URL and saved it as a tar file on your system then it extracted the star file into a folder called as known modules so see this is the same this is the same file structure if we see you have about 6500 44 files in this and if I go ahead inside that whatever that was the package which we downloaded we will see that it also has six thousand five hundred forty-four files so what NPM just did is that it extracted it out for you inside node modules right now you could do it yourself for you know one or two packages but a tool like NPM comes really handy well it does not really just do that it also verifies the integrity of the package whether it's tampered or you know corrupted while it was being downloaded so you can see that if I do NPM view lodash what it's going to show me is that once you download the star file the integrity the sha-512 hash of that package is this value and this is the hsm for the package so NPM actually matches the SHA as well after its downloaded because you do not want to install a corrupted or possibly tampered package because that could be some sort of untrusted code so yeah that that was a basic idea on how NPM works a little bit under the hood I believe that's not really required for the most part and most of the people don't really know that as well but this is a this is a good thing to know as a front-end developer if you're getting into front end you should basically just know a little bit of nets and credits of how your tooling works right so yeah now if you get a lot of times if you get in case an error that DSHS some it's not matching you know that well why it is not matching it might be because your ISP or whatever is tampering with your connection or something so yeah that's basically it for this video I'm gonna see you pretty soon in the next one hey everyone welcome back my name is Mei hole and in this video let's just go ahead and take a look at what NPM did where I installed the lodash package so let me just go ahead and remove everything from the static tree actually and we have a nice clear slate to begin with so I'm gonna do that thing again NPM install lodash and let's just pay a little bit of the warnings this time so we have a bunch of warnings you see we can for the most part we can just ignore this one because no description no repository these would be fixed by the first two warnings so you see that the first warning we get is that it says that it cannot file cannot find a file known as package dot JSON right so the idea is what happens is that NPM it actually needs to maintain it actually needs to manage your modules it cannot just install and forget about it right because a package manager has the responsibility to not only just install but also remove also update also you know patch in a lot of cases all of your modules right so for that it needs to have a record it needs to have a place to actually store the information about all that stuff sure it can go ahead and scan node modules you know always but that is not the best way because what happens if I go ahead and if I go ahead and say node module said if I go ahead and create you know just just create an empty folder like Express does that mean I have Express install well of course no so that that kind of becomes tedious for NPM Buddhists recursively scan node modules for for the packages and it is actually in unfeasible as well because what you will see in future is that a lot of packages have their own dependencies as well so for example you might install a package named X Y Zed which depends on low - rate so you essentially installed X Y Zed but you also have access to low - indirectly so that low - module would also be placed inside the node modules folder itself but if you want to remove X Y Z you expect to remove low - as well right because you did not explicitly install it at least you expect to remove that instance of no - which was installed because of X Y Z package so that's where NPM comes in well for all of that it needs a file it needs somewhere to put that information because you know it cannot just remember everything we have files for that reason so that's what NPM actually complaints us for the first time that it does not has this package dot JSON file available with us so this package dot JSON is a special special file which contains a lot of information about your project but for the most part it is it is used by package managers like NPM and yon for you know just listing that what sort of packages what sort of dependencies your project has for the most part right so this this was a basic introduction to package dot JSON why it is needed and why you know it just complained said that you do not have this file that's all for this video I'll see you pretty soon in the next one alright everyone welcome back and in this video let's just go ahead and create a simple package.json file real quick and you can go ahead and create that manually nobody's stopping you to do that but you do not really need to do that what you can do is you can write NPM in it right and when you run this command it's going to ask you a lot of questions and you have to answer them and the values shown in the bracket is the default value right so I'm just going to keep hitting Enter because know no field is actually mandatory so just go ahead and keep hitting Enter if you want and you see that it asked you that it is it okay yep and yes it's done right so if I go ahead and see this file now package.json you're gonna see that it's a JSON file of course which has a bunch of keys and nothing special right one little quick tip is that what you can do to generate this file quickly is you can say that I want all the defaults to be available which is what we did last time but by just you know hitting Enter recursively and I don't want to mess around so there you go in one command you have your package to JSON file available so that's how you're gonna create a package to JSON and now if I go ahead and say n p.m. install Lu - what you're gonna see is that it does not complain about the first warning but it does give us this notice about created a lock file now this is something different I'm gonna come to that later on but yeah just keep that in mind that this is a notice which NPM told us so now the idea is that if you look into package dot JSON now you're gonna see this little section here called dependencies so we're gonna cover this in depth very soon what this is don't worry about that but yeah the idea is that NPM was able to edit this file by itself without you know requiring you to open text editor or you know make any sort of changes based on our installation of lodash package so it's pretty cool right so yeah that's that's basically it for the package.json initialization that's all for this video I'll see you pretty soon in the next one hey everyone my name is Miho and welcome back and in this video I want to formally introduce you to how to install packages now we have been installing packages in the last couple of videos but we haven't actually seen how to actually you know just just as a formal video how to do that so you already know that you can install it using NPM install or - right and we know that what happens under the hood above about the NPM view and all that stuff but yeah when you do that but it's what it do is that it fetches that URL does that think you know about that there's a shortcut actually to NPM install you can just leave the whole install word and just right eye and just lo - like that right and just go ahead and do that it will it will just work in a similar way and if you if you try to install a package again and again you're gonna see that you start getting this messages that updated one package it package on audited one package it's not installing it again and again right it knows that it is already installed it knows that it is present so it just stops and does not install it so you can safely you know if you're not sure if your package is available or not you can safely go ahead and install it so yep that's how NPM install works in a nutshell you can use the whole would npm install' or you can just trade the shortcut not as npm i and write the name of the package Snyder's name of package if it is available it will install if it is some garbage package name then NPM would just complain to you that this package is not available right it saves you that 404 this package is not found so yeah that's basically it how you gonna install packages with NPM that's all for this video I'll see you pretty soon in the next one everyone welcome back my name is Smith and in this video I want to show you pretty quickly how you can remove packages with NPM so it's just as simple as writing and being install and that is NPM remove and then the name of your package right so for the most part yeah I just got it so anyway if I want to remove lodash now I'm gonna write NPM remove lodash and you can see it shows me that it remove one package and in one second and if you take a look at package start JSON now you're gonna see that it has been removed from Baxter JSON file as well you cannot find the lodash keyword anymore now and you can also use uninstall right remove and uninstall both work but yeah if you try to uninstall a package which is not available NPM won't to complain it will just say that yeah it's all up-to-date it you don't need to worry about that a lot so yeah that's that was a quick little tutorial on how you can install and remove local packages in the next video we're gonna see what global packages are in NPM and what is the difference so yeah that's all for this video stay tuned I'm gonna see you really soon in the next one hey everyone welcome back my name is May hole and in this video I'm gonna show you what global packages are in NPM and how do they exactly differ from local packages and where they are anyway so starting off with local packages what we have been doing so far that is NPM install lodash and PM removal or - all this package dot JSON file and all that stuff it's basically local to this NPM basics folder right that is the universe of of this whole thing you see that when I'm using NPM install or - it's not modifying a single file out of this folder right similarly if I remove the package it's not modifying anything out of this folder so it has no system impact I can pretty much take go ahead and copy this folder right here and you know just just use it somewhere else obviously assuming that no - is completely JavaScript which it is so yeah I won't have any hardware issues so yeah that's the idea when you create a project when you create a local project what you do is that you install all the things that is required for that project using NPM so the idea of all this package manager and module system is that every time your project needs a module you install that that module would be placed very close to that project that is in the same folder in which you run npm install and you can access it using javascript you can access it using node all that stuff right about global modules the basic use for global modules the most common use is for the command line applications so you must have seen those create react app tutorials and installation where you can actually just write create - react - app write and it just works magically so what's happening is that this create react app is actually a global NPM module it is no different that than lodash installed right here on a module wise speaking on a module wise level but the difference the difference however was that it was installed using NPM install in no specific directory for example if I do a create react app only so it's installed in any directory does not matter in which directory you are the only difference be being that a - - global flag was passed and for short you can get rid of a - and global and just right G so when you do that when you do something like that what happens is that it installs the package it installs this NPM package as a global module and if your path is correct if you're you know if your environment variables are correct for the most part you should be able to directly access that particular package which you just installed obviously if it offers as a command line execution using your terminal itself right most of the packages which which actually say you to install them globally have a command line usage right create react app is one Cypress is another right so you have all these packages which can be installed globally and they have their command line usage statically available to you so what's different well first thing is that global packages can not only be just used as a command-line tool if they if they allow but they can actually work right out from any script any node script on your systems right for the most part you don't want to do that because that is not the convention your code should be you know you should be able to just put all your code except node modules and the other guys should be able to run it for that part if you have global modules it creates all sort of problems so yeah for the most part you should not have global modules dependency in your projects but yeah they are there for your convenience so that's how global modules work and if you are interested you can just go ahead and write NPM root - gee and will actually show you the node modules folder which is for all the modules which is for the global modules sorry so if I go ahead into this folder what you're gonna find is I have these other modules which are installed on my system as global right so of course I have n which is which was a package manager which we did very initially I have react native CLI I have NPM well NPM is itself you know a package for itself because then it makes it easier to upgrade NPM by just saying NPM latest so you can actually get the latest version of NPM installed using this little comma that is NP installed globally NPM and at the rate leaders well this is a convention we can get into that later on when we study about semantic versioning but for now I'm just gonna just give it to you like that so yeah that's that's basically that's how you find you know NPM Ruchi anywhere NPM Ruchi just works out of the box right so anywhere you run it it will give you the location where your node modules are installed so that's how you find them so that's all for this video I'm gonna get back to you in the next one really quick hey everyone welcome back my name is May hole and in this section we'll be taking a look at a lot of things about NPM how the dependencies work types of dependencies semantic versioning in NPM and how all of that works so this is going to be an interesting section stick along with me that's all for this video I'll see you pretty soon in the next one alright guys welcome back and in this video I want to start with something known as semantic versioning in NPM so whenever you install a package from NPM for example request what you're gonna see is that ok let's just pick a better package for example react why not so what you're gonna see is that every package you see is in the form of some number dot some number dot some number there would be always three numbers right and there would be always two dots for every package you cannot see a package with number one point three right it does not exist on NPM why because NPM follows semantic versioning of package what is semantic versioning semantic versioning is a standard to you know it has some guidelines to version your package how it works is that you have to follow this sort of notation major dot minor dot patch so the first number is your major number that a 16 is the react 16 version then that minor is the minor version that is 13 and the patch is the patched version that is one in this case now we can easily see that what semantics my semantic Guidelines tell us is that major version should be changed when there is an incompatible API changed that is if you update to that particular version you have to make some sort of changes in your old code as as a developer who is using that package right so for example if I update to react 17 I should expect that my existing code base and react could be broken right it's not required that it would be broken it could be broken if you know if we act has updated that particular thing which I was using semantic versioning means that if you're me if you are making use of a major upgrade just make sure you update your package to a major version to a different major version similarly there's a minor version which you know there's a say that if you add a backwards-compatible functionality for example if you react added a new feature what it could do is that it could just go ahead and include that in a minor version right so even though if I update it to the minor version it won't affect me effectively because that is just a feature which is being added and I'm not using it really it just says that patch version should be used when you're making a bug fix which is backward compatible as well so you know there's a difference between patch and major that is if a bug fixes or maybe if a new feature is incompatible with the previous versions you have to make a major version of create otherwise might minor and patch will work just fine now with that being said you don't have to really read this whole document i just opened the site for just follow a little fun that being said just forget about semantic versioning at all right because npm follows semantic versioning but no other developer on the planet does so effectively it does not make sense to actually stick to semantic versioning you should know however that a lot of packages do follow I'm not sure about react react earlier did not follow semantic versioning but I'm not sure now if they're following it not not I think they are because they do not really introduce any breaking change changes in the batch version as well so yeah definitely they are following but the idea is that semantic versioning is the most abused thing on NPM that is no developer on the planet follows it effectively that means that it is very much possible that there might be breaking changes in patch version update as well so it is very much possible that you you are installing a package for example if that package is sixteen point thirteen point one it is very much possible that the developer goes crazy and he updates the package to sixteen dot 14.1 however there is a breaking change in the API so you might update thinking about semantic versioning guidelines and you might think that okay if it is sixteen point fourteen it should not have a breaking version right because NPM follows semantic versioning and all that yada yada stuff but the truth is that NPM does not enforce it it cannot check that you know it has breaking compatibility or not so developers you know they do not know about semantic versioning they just think that this is some sort of joke or whatever so they just you know just go ahead and use any version they like so yeah I mean it's a pain but that's that's that's basically the idea and that is one of the reasons why there exist a file called package lock dot JSON which we'll discuss just after the semantic versioning because I wanted to you know just make a build up why that file was needed in the first place so yeah yeah that's that's basically it for this video and that's how semantic versioning works and that's how you should never really rely on packages using semantic versioning because nobody follows it but anyway you should know about that so that's all for this video I'm gonna see you in the next one really quick so what is going on everybody my name is Mei hole and welcome back and in this video we'll see why we need this nice little file which is created called package package Locker JSON so in the last video we saw how semantic versioning works right version sixteen point thirteen point one all that stuff now a lot of people who have been using NPM from version five that is we are using NPM version six right now a lot of people who have been using NPM version five and you know more than that don't really know that there was no package Locker JSON file before NPM five and why I don't know why but I think I understand why they did not choose it because NPM wanted to follow semantic versioning right now hear me out on this video when you have a project like this and if you do not have known modules folder with you but you do have these two files let's let's just forget about package lock let's just remove that for as a matter of fact right you do have this package dot JSON file right so if you see that it includes lodash as a dependency so you know NPM knows that lodash is required for this project so what happens is that when you run npm install it's going to read this package dot JSON file it's going to scan through all the dependencies and it's going to install all of them in an ideal world what should happen is that for example if you have an old version of lodash here for example for point zero point zero or for point zero point four point one point zero and there's this new version of lodash available that is for point 17.15 in an ideal world what should happen is that NPM should be really able to update this patched version you see not the major version the patch version that is it should be able to change that version from four point seven four point zero point zero to four point 17.15 so what I'm seeing is let's see let's hope that there's a version out there oops I think I'm doing something wrong anyway let's hope there's a version out there which starts with four point zero point zero or flourish right now if I go ahead and write npm install or let me just go ahead and remove the node modules for the first now if I go ahead and write npm install what's what's going to happen is that it's going to scan the package store JSON file it's going to read all the dependencies and it's going to install them one by one but pay close attention what happens to our package start JSON so if I go ahead and write package start json now you're gonna see that my lodash is actually four point zero point zero only fine nothing changed there let's go to node modules and let's open lodash and let's see the package dot JSON file inside lo - whoops you see that we actually have installed for point 17.15 as the lo - version we did not install for point zero point zero why is that that is because how NPM was designed to work when you do an NPM install what happens it goes to package dot JSON it asks for all the packages inside the dependencies and it says well you are four point zero point zero okay let me just go ahead and see the maximum version I which to which I can update you without actually breaking you right so this cat it right here has a special meaning we'll get to that later but what what NPM does is that it asked NPM registry hey this guy is running a very old version of low - to which version we can update this guy so that you know things don't burn but he's running on some latest as well so NPM says okay this is 4.17 go ahead and use this so what it does is that it keeps it here as four point zero point zero for reasons unknown I don't know maybe NPM should update it here as well but yeah they just keep it here and would it do what they do is that they actually installed the the higher upgraded version of the package now from my previous video you know that developers are actually insane and they do not follow semantic versioning in an ideal world this should create no problems because the major update to the package should only add new features and this should only fix compatible bugs right but this is not the case in the real world so people found that a lot of times when they just simply wrote npm install on a different system than the one built in which they were developing the whole builds crashed right the package did not work you know there were incompatibilities all that stuff was happening why was that because on their main systems while they actually had the real 4.00 installed because they installed it way way back when there was no 4.17 release now in the future when they changed systems and it did npm install and package to json well this still remain 4.0 point 0 but because npm the way npm works they updated it to 4.17 point whatever the version was and that caused the bills to break because developers weren't following semantic versioning so this is the reason this is like one of the reasons package start JSON was introduced package locked or JSON so if you see this this file package locked out JSON you're gonna see that usually you'll find that this file is very very large and for the most part you never really need to open this file at all but yeah right now you can see that our dependencies inside package doctor JSON you see we have the correct version and we do not have that caret symbol as well we also have the URL stored from where it was installed exactly and we have the sha-512 integrity hash in case we want to install it again so yeah that's that that's the main idea that packets locked our JSON is going to hold each and every dependency and that that would become very much clear if I add and dependency light Express because Express has a lot of its own dependencies right so now if I go ahead and take a look at package dot JSON you're gonna see that Express is running on four point 17.1 right but if I go ahead and look under package locked at JSON you're gonna see we have all sorts of dependencies now why is that what are all these dependencies you see that if I go ahead inside node modules you're gonna see we get a lot of different folders as well now why are they present we only needed Express so you see that Express if you take a look inside package dot JSON of Express you're gonna see it itself needs these many packages right so it needs these packages so it needs all these packages so they are also installed as a requirement for our project and you see that what happens is with semantic versioning because Express is using some packages we are using Express if I update Express to a if you do a newer version if npm install updates it to a newer version it might happen that that effect cascades into the linked dependencies and everything could set on fire right because nobody's respecting semantic versioning so what package lock dot JSON does is that when you install a package it will not only you know just we lock that package in space and time it will also lock all the other packages used by that particular package as well in space and time so you have the version number logged you have the actual URL from where it was fetched as locked and you have the integrity of the file locked as well so you see all those packages are locked Express is logged with the requires as well that is what it requires as an individual package and all these packages are listed as well so yeah that's that's the reason why package is locked Jason was needed I know it's a long video but it's important to understand why it is needed the only reason it is needed is that when you change systems when you shift the environments you want a consistent module behavior you do not want to work with debug two point three point one in development and suddenly you are using two point six point nine in production right because it might very well happen that two point six point nine is not backwards compatible with two point three point one it should have been compatible if debug was following the semantic versioning but unfortunately most of the developers do not follow that that is why NPM has to bring packets locked out JSON and that is why it did not had this feature baked in from the very start because obviously it expected developers to follow up on semantic versioning which should not have broken the things in the first place whoo so yeah that's that's basically it for this video I'm gonna see you pretty soon in the next one all right guys welcome back my name is me hole and there's one more thing you need to know about NPM which I missed in the semantic versioning video is how the package store Chaisson packages are actually installed so in the last video we saw how misleading this could be that is using lodash like this and it critics install basically a higher version so that's that's bad but there's a reason for that the reason NPM installs for point 17.3 instead of you know four point zero point zero is because of the scattered symbol so what happens is that the scattered symbol by default means two NPM that hey just go ahead and you know just consider this whatever the version number is for point X phonics as for products for X where this for there these two x's make sure to upgrade them as much as possible right so this is what the scattered symbol stands for keep the major number same just make sure to upgrade these two as much as you can if you change this carrot symbol to a tilde syllable that is like this things get interesting so let me just go ahead and remove known modules now and let me just actually let me just go ahead and remove Express as well because Express a dirty package it brings in a lot of a lot of you know oops I'm using women's in nano anyway so it brings a lot of packages with it that's what I was saying so if you see now you're gonna see we have just low - but now with this distilled assemble instead of gathered so if I go ahead and do an NPM install now okay I think we have some problems with okay I guess I just missed that opening bracket yep NPM install now what's going to happen is that that tilde symbol is going to mean something like this four point zero point X so it means that hey just keep your major and minor numbers same but go ahead and update the patch version to as much as you can so if I go ahead inside known modules now and if I take a look at lodash and take a look at its package.json file you're gonna see that we get four point zero point one instead of four point zero point zero right that was because of the tilde symbol if we used caret symbol we got four point 17 point whatever the version was so that's that's the thing with NPM NPM by default falls back to the updating of the patched version right so if I install a new package like Express you're gonna see what NPM does is that it falls back to actually as a till as a caret symbol so that is the default behavior in NPM right there's another behavior you can set that is just removing all these symbols altogether so you can just go ahead and remove the Express dependency for now I'm just gonna remove that and you can remove the symbol at all so what this would do is that this will install the exact package exact that package number only right so it won't install anything more anything less at all so now if I go ahead and remove known modules and if I go ahead and install you're gonna see that we actually get the real low - four point zero point zero for the first time right so if I go ahead and write package dot JSON you're gonna see now we have the version number as four point zero point zero nothing more nothing less so that's how semantic versioning works in NPM that's how you're gonna make use of that and that's it for this video I'm gonna see you pretty soon in the next one as well so what is going on everybody my name is Mei hole and welcome back and in this video we'll be seeing while that dependencies in your package start JSON let's just go ahead and open NBN basics real quick and I'm gonna open package start JSON as well you see we have a little dependencies here as a key which is our object which has the key value pair in in the form of the name of the package and the version number so what happens here is that these this is one of the sections one of the possible sections of dependencies in your program you can also have other sort of dependencies like dev dependencies peer dependencies all that stuff so we'll come to that as we proceed but let's start with the major dependencies now that is just the dependencies so when you install a package for example Express it goes directly inside the dependencies json key so if I write package JSON you're gonna see that it lands directly inside this dependencies json key this dependencies json key means that whenever you do npm install anywhere in any in any environment whatsoever it's going to install these two packages forever this might sound ridiculous right now but trust me this information would make sense after two videos when you watch dev dependencies and peer dependencies what happens with dependencies is when you run this command npm install on your server on your development environment on any owner potato wherever your npm is installed and node in this and installed this is going to install all the packages listed inside dependencies that's all you have to remember just remember to place the most critical parts of your application without which your application absolutely cannot work inside the dependencies and how you do that well it's very simple you have to do nothing just to npm install and package name every time you do that it's going to automatically go into the dependency section that's all you have to remember for now so yeah that was a quick video on dependencies let's hop into the next one really quick seeing what is the dev dependencies thing and why it is needed so that's all for this one I'll see you in the next video really quick hey everyone welcome back my name is Mei hole and in this video we want to see about dev dependencies so in the last video we saw how the dependency key works in Pakistan but what happens is a lot of times you use a lot of tooling you use a lot of NPM packages to you know speed up your development process or you know bundle files like Babel web pack stuff like that these files are not really required to run your application right for example if you are using lodash as a library in your main code your - is actually required to run your application right because your JavaScript would crash without lodash package because it cannot fight the underscore or low lash variable but tools like web pack tools like babel you know any sort of library which you use just in development is not really required in production right so you can safely not install it in a production environment because you will never be able you would never be making use of that anyway so how do you differentiate that how do you segregate that well you use something known as dev dependencies for that and what you do is you say npm install web pack but you know if you do this it's going to place that into the dependencies so you write a flag here and you say save - dev so what's it's going to do is that it's going to add web back to your project no worries about that but what it's going to do instead of adding it inside the dependencies object inside package.json it's going to add it into a section called dev dependencies so you see this is the dependencies object and this is the dev dependencies object again same thing nothing changed you have the version number you have the caret symbol in front which follows the miner patch update which we talked about earlier but yeah the idea now is that you are inside the step dependencies thing so what happens now well what happens now is that you suddenly have control over npm install' let me just go ahead and remove the whole node modules folder now and what I'm gonna do is I'm gonna see package store JSON you see we have dependencies and we have dev dependencies with us I'm gonna do one thing I'm gonna say echo node E and V here you see that it's black this environment variable is black so what I'm gonna say is I'm gonna say no dnb's production so that means I'm trickin NPM into believing that my computer is actually a server right and then what I'm gonna do is I'm gonna do an NPM install hit enter what's going to happen now is that if I go ahead into nor modules folder you see that we do not have any web pack folder right so web pack is not installed why is that well you see I'm in the production mode and when you are in the production mode only these dependencies are installed or just like I said dependencies would always be installed no matter where you are running right so when you're in production when this node E and B is set to production which is always you should always set that and put on as production on your production servers when you run npm install it's not going to install any dependency at all inside dev dependencies why because these are dev dependencies these are required just for developing the product not for using the product not for instantiating the scripts on the main server so this is the difference between dev dependencies and dependencies all the dev stuff all the stuff which you not do not really need on production goes inside dev dependencies they mostly include build tools and you know just just the what do you say it the package the combiners and minifiers all that stuff and most of the things are going into dependencies which are used by your application so yeah that's that's basically it for this video I'm gonna see you pretty soon in the next one hey everyone welcome back my name is Mei hole and in this video I want to cover about something known as peer dependency now peer dependency is something which is just like you know your regular dev dependency and dependencies with a little bit of difference first difference is you will never need to use peer dependencies if you are just creating your own app you would most likely need to use be a dependency if you're creating an NPM package now why is that well that is because how peer dependency work you see that peer dependency is not really a dependency which is strictly required but you expect that thing to be available from the host right so the idea is that let's say I go ahead and install NPM install react dawn right so for those of you who haven't worked with react react tom is a reconciler for react sorry it's not a reconciler it's a renderer for react for the rip so react Dom is basically a package which holds the instructions on how to take that virtual Dom tree which react creates and map it on the real Dom in the browser but it's it's useless if you do not have react installed in your application right and it would not be the best idea if you know if you bring your own if react Dom brings your brings its own react version with it as a dependency right because then you would have two dependencies you probably would have multiple reacts in your application so in this case what happens is that reacts Dom if you go ahead and take a look at that's its package dot JSON what it's going to do is that it's going to list react as its peer dependency so it means that hey we are Thomas saying that whenever you install it it's saying to NPM that hey I do not have react but I need react to work so just make sure to check that host that is the main application has react installed and npm would say yeah no problem I'll just go ahead and check that real quick and just scan the package.json check if react is available if not it's sure it's gonna show you a warning right so let's just go ahead and let me just go ahead and show you the package so chase on here real quick so we just have that pack and express an allure - install let's just go ahead and install react on google it's really quick and see what happens we do not have react install at the moment so just just make sure you understand it just make sure you have that in mind right so you see that we get this warning right here react on 16:13 one requires a peer of react this thing but none is installed you must install peer dependencies yourself right so again you can see that this is just a nice little warning not not a sort of a crash or any error so you know rienne p.m. is not really enforcing you to install react but it's just putting you out that hey react Dom probably wants react just make sure you have that if you want it to be working perfectly and yeah that the way it is specified here you can see 16-point 13.0 so basically react Dom would be happy with sixteen point twelve point zero as well as 16 point fourteen point zero right so you can see that we have a semantic versioning thing going on in here as well so even though if you have sixteen point three point zero as a react react Dom would be happy right npm would be happy react Dom might not be again that's what I'm saying nobody's following semantic versioning here the patch version and the minor version is not supposed to break the backwards compatibility but do not trust that on the NPM landscape because that is not happening so yeah that's that's basically it for the peer dependencies you can see it is in want a gist when you do not want to bring in your own package but expect that from the host mostly useful for people who are actually building NPM packages not for you as a regular person who is just building your own project but yeah you should know that as well when you see peer dependencies you should know you would be amazed to see there are so many packages out there which have millions and millions of downloads a week and they are not aware about this concept the authors are not aware about this so they do not have peer dependencies in their package.json they do not know about semantic versioning so you know the the situation is bad in the NPM ecosystem because the developers are not educated so I'm just trying to put one stone at a time for crossing that River so make sure if you develop packages later on in the future justjust do not forget about these little things your dependencies semantic versioning these are important things right so yeah that's that's basically it for this video I'm gonna see you pretty soon in the next one hey everyone welcome back to another section in this will be discussing about NPM scripts what that is how you can use that yourself and basically get started with using your own custom NPM scripts as well let's get started all right so what are nvm scripts well if we go ahead and go back into our package we're gonna see that if we got the package JSON file there's a section called scripts now this is this is an object in JSON so obviously it can hold key value pairs that's number one number two is that you have a certain script name as the key and a bash script as the value right so you see you can write actual terminal script here and of course if you are running it on Windows you can write you know your command line script or PowerShell if you are using that as your default shell or anything right so yeah so the second argument that is a value is the bash script it could very well be a Python script like by writing Python 3 and the name of your script or maybe an old script by erecting normal and something but the first the key is entrusting so if we go back on the dog so you're gonna see that NPM actually supports a bunch of these keywords out of the box right and they have a little bit of special meaning so you see if I have a pre published script it saves me that it will run that script before the package is packed and published right so what does that mean that means that if I go ahead and edit the package dot JSON file inside the script section if I go ahead and write something like pre publish but bless not whatever I wrote there and what it is going to do is for example if I write echo hundred here and if I try to publish this package and BM packages can be published if you are creating an actual package it won't be necessarily required for your main project but yeah if I try to publish a package then this script would be executed a better example for this video would be actually a pre install example so pre-install example you can see right here for pre-installed it runs before the package is installed right so for example if you are doing you know npm install of express write and express has a pre installed script then that particular script would run for example let's just take a look at this node sass repository which is a repository for bindings for using sass in your project right so notes ass is basically a project which exposes c++ bindings of the lips as library to node.js for you being able to use it right so because it is using a native C++ software it needs to do some work as a package so it has the script sections and you can see right here you have post install you have install scripts you have you know all these are the scripts as well you have pre published scripts as well which would be used by the developers when they are publishing and this post install script is used by you when you install the package so it kind of like setups the whole thing for you before you actually install the thing right so yeah that's that's for the available scripts you can also see the section npm pre test test and post test these scripts are run when you write npm test pre stop is run by when you write NPM stop npm start stuff like this so let's just go ahead and write start here and I'm gonna say echo this script was called right now if I go ahead and try to do NPM start here and hit enter you're gonna see that what NPM does is that it echoes out the script was called and why is that because if you take a look in the package store Chase and you can see inside the script section we have the start script listed now remember NPM start calls the script directly because this is how it is configured internally right it does not mean that you can have anything here and you know just write npm XYZ and if you have an XYZ script here it would be called there's a different procedure to do that so yeah NPM start can be used for that but if you want to have custom scripts what do you have to do is you can just go ahead and first of all let me just go ahead and create a custom script so we can go ahead and say custom script something like that and I can say echo this is oops a custom script right so obviously this this does not exist in NPM and it is a custom script so you cannot go ahead and run it custom script you cannot run it like this right because you see that NPM actually offers you did you mean this that is run script right so what you can do is you can just go ahead and write NPM brand before actually writing custom script and then you can go ahead and write custom script right so what run does is that it says that hey I'm trying to run a script that might not be available as a you know as a script which is you know already hard-coded into NPM like NPM start stop test pre publish restart stuff like that so for that you've make use of NPM run right so if you try to run XYZ which is not available you're gonna see that you do not have the script and if you try to just run npm run start you're gonna see that it kind of works just the way it worked before without without the run keyword right because at the end of the day it is also script so npm follows the same algorithm to take a look at start script in the section so yeah that that was the basic introduction to NPM scripts you're gonna find you using NPM scripts a lot of times why because you can set up small scripts like for example NPM runs over something like this and what this could do under the hood is that maybe it could run a command like I don't know like config gone fig web pack so with our chairs and I don't know node indexed Rogers for example a command like this so instead of writing this whole thing again and again what you can do is copy paste this inside package to JSON inside the server directive and go ahead just use that so that's how you're gonna make use of that's how to make the best use of NPM scripts so yeah that's that's pretty much it for the video I'm gonna see you in the next one really quick hey everyone welcome back and in this tutorial lets us take a look at what npx is so we have been taking a look at what NPM is for so long but there's another thing known as NP X which was introduced in npm 5.2 and above and although i don't think that there's any official full exfol form of this NP x where i like to think of this as NPM extended right hence the X so what NP x does is that it basically allows you to run NPM tools without actually installing them globally now what you're gonna see is that a lot of times for example there are tools like create react app right so this is one of the tools now create react app actually initializes your application your front-end web development project using the default configuration the default web pack Babel configuration all hidden from you and it is pretty handy packaged but this is a package which is not used very often because you won't be creating you know new react projects everyday from scratch right you're gonna either be working on a single or maybe two or three projects at a time so this is something you do not really need to have always on your computer as a dependency so to do kind of like improve the developer experience for that what NPM did is it came out with the tool known as NP x NP x basically what it would do is that it will allow you number one to run local binaries right so we're gonna cover that and number two to run global binaries from NPM without actually installing that so let's just come to point number one that is running local binaries so what happens is that if you take a look inside package dot JSON what you're gonna observe is that we have these three dependencies let me just go ahead and install something known as cow sales right so calluses is basically you know just a package which allow you to and it's cows say not cows ace this basically just right just creates a cow on the hit terminal and a bubble in which it's either speaking so anyway you'll just take a look now so what's happening now is that I have cows a installed but how do I make use of it directly you see if I try to use cows a directly my shell gives me the error that it is not found well one way is to go into node modules go into cows a go into I don't know let's see build and I don't really know what would work so let's see do something like this no not really so let's see cow say and let's take a look at the CLI so let's just go ahead and write CLI the chase and I'm gonna say hello so you see how much work I had to do for that let's just go back and try it from our root folder I'm gonna say node node modules cows say CLI door cheers hello right so this is inconvenient right because this is CLI DOJ's for some other file it might be configured that the package might be configured in some other way so it's not really developer friendly it's not very useful one way to fix this is to actually have a script inside NPM itself inside the package lock so when add one advantage advantage of script is that you can actually make use of the install packages so if I have say something and I do cows say hello what's going to happen is that if I run NPM run say something so you see that we execute cows say hello and it properly execute sit right but if I try to write cow say hello right here it won't work now the reason for that is when you run npm run and the script what npm would do is run the script with the all your packages inside the path environment environment path variable right so that is why it is able to find the correct cows they pack it's an executor this is one way and another way is to use NP x NP x would allow you to run your local scripts directly so if you run NP x cows say hello what's going to happen is NP x is going to see oh okay i am in a node project i have packaged and package locked-up json files with me i'm gonna go ahead and said node modules and crap this binary which you're saying so in px cow say you know anything how are you doing right so anything until work just out of the box this is one use of NP x status using it to run local packages another use of NP X is to actually run global binaries now you see that I'm out of my folder now and I do not have any node modules or any package start package locked out JSON files anything at all here so if I try to do cows say here it won't work again and I do not have any node modules so you can see that we do not have any npm installation in the folder but NP x cows say hello would still work now you see that it takes a little bit of time because it installs the package first execute sets and then removes the package that means NP x does not keep the package around for you so you won't find cows a again but if you try to run it again it's going to download it again it's going to install it it's going to run the script using your binary it is going to execute it and remove it at the end of the day so NP x cows say how are you and let's throw that in quotes and you're gonna see again it just downloads it installs its runs it executes sits just gets rid of it then so it's pretty convenient for things like create react app which you use very very less often right so that is like one of the use cases for NPM npx so yeah npx is basically just an extensible way of installing packages off in running scripts to be precise not really installing packages and yeah that's basically it for how npx could be used so it's it's usually useful as a you know a little utility it might save you a bunch of seconds and minutes and yeah that's basically it for this utility there so that's all for this video I'll see you in the next one hey everyone welcome back this is the miscellaneous section introduction here we will just cover topics which are single video not really you know cannot be embedded in a section and let's start so I'm gonna see you in the next video pretty soon all right so let's start with actually configuring your npm installation global packages location by that what I mean is that right now you can see that if you do in BM + BM root key you're gonna see that it is installed right here right now the thing is that you can actually change this location now why would you want to do that well one of the reasons is if your system is configured in such a way that this directory falls under root access or maybe you know you do not have sudo password and you do not want to use sudo to install modules which is always a good practice never to use I mean yeah like you sudo as less as you can because you don't want to give root privileges to unknown scripts so to do that what you can do is like first step first alternative is to either change the directory permissions or you can altogether move the global packages installation location itself so what you can do is that you can also see all of your configurations like NPM config LSL when you do this these this is all of your NPM configuration right so yeah for that part and what how you can get the prefix basically this prefix is responsible for their your global packages would be stored so we got to change this prefix we we change everything so you see that this folder is black right now I'm gonna make a folder here and I'm gonna say this is global node modules right you see the folder does not really mean anything I have just named it randomly but I want to make this directory as the you know just the root directory for global node modules so what I'm gonna do is I'm just gonna do a PWD which prints the working directory for me which gives me into this whole path which is always a good idea and the next thing you can do is just write NPM config set prefix and then this thing right and you're done so now if you go ahead and install something like Cousy globally what's going to happen is that it's going to install that inside this particular directory right so you can see that we have the global node modules we'll obviously we need to go into the lab and then we can find the node modules folder now say right so now if you add this node module spot this non modules path to your environment variable path your scripts would then be able to actually make use of the global module statically by requiring them so yeah that's how you change the global modules and I'm just gonna configure it back to my user local because it is perfect for me so I don't have any reason to change it but there you go if you want to change it right so that's all for this video I'm gonna see you in the next one alright so in this video let's just take a look at how NPM manages caching so caching is basically a technique of storing some of the modules which are you which you are installing locally on your system so that NPM does not have to hit the network every time without you know unnecessary downloading to prevent unnecessary downloading for example if you are downloading a package and it's version number is same and everything is same and NPM sees that it has that package already available in the cache it's not going to install it from the network but again this is just you know just completely depends on NPM and how it operates you should not really rely on cash a lot so well NPM by default what it does is that it would install it would create a folder called and as dot NPM inside your home directory itself right so if this folder would be automatically there you do not have to create it and when you just take a look at the contents for this this is all cash content right so if you delete this whole folder it's not going to matter a lot but you know you see that NPM is actually using this as caching mechanism for building binaries and you know just packages just heavy things which take long computation or maybe just heavy packages sizes as well to just cache them so as to speed up things so well you can go ahead and remove this cache it'll you know just save you some disk space and another reason for removing caching could be like clearing caching would be like if you have some problems with NPM install and you believe that there's a corrupted cache or anything like your network went off and now NPM install does not work the first step should be clearing the cache so how you can do that by doing NPM cache clean right and you can also add a force flag here so that you know you don't get this error message you see that it saves you that it actually can heal from corruption and you know all those issues but if you really want to you know forcefully clean the cache you can do NPM cache clean force now one thought of train train of thought whatever you want to say that do not try to clean your cache man leave without any reasons right so make sure you have a reason something is broken something is not working because NPM is good enough in managing its own cache so you do not really have to worry about this in most of the cases so yeah that's that's basically it for the caching video part and I'm gonna see you in the next one all right so that's where we end this little course of ours I hope you learned a lot of things all along I had a lot of fun creating this whole course and hopefully this was able to provide you a lot more in sites into NPM as a software how it works and how it can improve your daily toolkit Thanks and yeah the web development space is huge I mean you're gonna be using NPM all the times so this establishes a fundamental underlying understanding for you for using NPM so that's all for this video and if you like the series stay along on koat.com we're gonna have a lot more coming up very soon on the front end developer path on the back end full stack you know eventually DevOps cloud computing all that stuff so stay tuned that's all for this one I'm gonna see you very soon with the next course

Channel: codedamn

Views: 11,846

Keywords: npm, npm tutorials, npm crash course, npm content, npm beginner, npm tutorial, full npm, npm video, npm videos

Id: cjoTTSbOuG0

Length: 102min 6sec (6126 seconds)

Published: Sat Jun 27 2020