Learn how to deploy an NPM Package

Key Takeaways

hello everyone and welcome to another javascript mastery video on this channel i help you encode the skills that last a lifetime in this video specifically i will teach you how to build and publish your own mpm package isn't that crazy also make sure to stay until the end of the video for a special surprise [Music] so what is mpm mpm is a package manager for node.js it was created in 2009 as an open source project to help javascript developers easily share code in form of packages since then thousands of packages have been published a nice representation of how many packages there are is this mpm drinking game the rules are simple write an english word in the input and if it exists in npm you must drink the creator of this package is so sure that there is a package for everything let's try searching some random words you can see i already tried searching for llama so if you do that oh no it exists wooly sure footed your next tool for the single page application development so there is a llama package there let's try some random words on top of my head let's do cars oh no a cli which shows you the name of the car so that works let's do something like running let's see check if a process is running there is an npm package for that let's do modal model is surely going to exist model exists yeah let's try something how to i'm just guessing offline wiki for programming guides oh that actually seems useful as you can see there is an npm package for everything i'm going to leave this link in the description so you can play with it yourself this video will walk you through how you can create and publish your own mpm package so what will we build the focus of this video is not to build a badass ambient package but instead teach you how you can build and publish any npm package the build and publish cycle is nearly the same for any other package once you understand how it is done for something as simple as what we will be building today you're good to go in this video we will be building a random number generator but as i mentioned once you know how to create and publish one package you can create and publish anything so let's get started all you need to build and then publish an npm package is the mpm command line tool which also goes by the name of mpm as soon as you install node.js npm will immediately get installed with it so if you don't already have node installed you can visit nodejs.org and install the current version to start creating the package you can create an empty folder on your desktop i'll call it js mastery rng rng stands for random number generator you'll need to call yours differently because all package names must be unique okay so we have it on our desktop and then we're going to open visual studio code once you have your visual studio code open you can simply drag and drop your folder right inside of there once that is done you can press ctrl backtick to open the terminal but you can also open it by going up and then going to view and then terminal that's going to show us that we have our terminal opened right here inside of there we can start typing some commands but first let's see if our npm is properly installed you can check that out by saying npm-v if you do that for me i get 6.14 6.14.5 you should be getting something different but if you get absolutely any kind of numbers that's good now what we're going to do is run mpm init dash y that's going to initialize a package.json file for us there we go package.json is the single and most important file as far as creating and publishing an npm package is concerned without it you won't be able to publish whatever you create to the npm registry i'm going to pull this down a bit so we can see what's happening i'm going to pull this down a bit so we can see what's happening and there we go this is our package.json note the main field in the package.json file it refers to the name of the file that would be loaded when your package is required by another application by default it points to index.js so let's create it we're going to create an index.js file okay now we can get back to the package.json in here you can change the name description and all other things regarding your project so let's do that right now i'm going to change the description to random number generator and i'm going to switch the author from julian to jsm javascript mastery and one thing we have to add if we want to use the new import and export syntax is type equal to module this is going to allow us to use imports and exports and not the required syntax you typically use in node for this to work you need to have the version of node higher than 14 so if you don't have it feel free to download it we are done with package.json let's start creating our mpm package for that we can go into index.js and start adding the code the project to be created is a very simple one in fact all the project code will be composed in a single file feel free to create something more complex we can do something like this const random number generator and that is going to be equal to an arrow function that arrow function is going to accept two parameters it's going to accept the min and also max minimum and maximum are numbers that are bound to a random number so if we have something like 5 and 100 then the random number must be in bounds from 5 or 6 all the way to 99 same case if we have something like from 5 and 10 in that case random numbers can only be 6 7 8 and 9. that is it we have the bounds for a random number by default using the default parameters we can set this to 0 and then to 100 if the user doesn't specify the bounds himself we're going to set this to 0 and 100 and then what is this function going to return well it is going to return we have to call the math.round so what do we round we round math.random we call it this is going to generate a random number we multiply it by max minus min and then we increment the min don't ask me this is just the math behind and the logic behind generating a random number in the bounds so we are creating a random number we are multiplying it by max minus min and then we are incrementing min i'm going to paste this in the description in case you miss a parenthesis or something the point of this video is not the logic behind this specific package it is how to create and publish your own mpm package so now let's test it out i'm going to call the random number generator function and let's start with something like 5 and 95 something like that now of course we have to console log the output of that so i'm going to say console.log and wrap it now we don't have to call this in chrome console we can immediately save it and just say node index.js this is going to run our file as you can see we get 67. if we call the same function one more time we get 24 29 90 95 so it is definitely changing let's try with five and ten in that case it must be from 5 to 10 and we get 7 8 10 7 5 5 6 as you can see it is in the bounds and it is random so our package is doing its thing so what do we have to do with it now well we don't have to call it we simply have to do export default random number generator we have to export the function we've just created now if you notice this export default at the bottom of the file whatever you're exporting here is what would be available for importing when others install the package and that is it when it comes to creating a package now we're moving to publishing the package to publish the package we are going to use this terminal we have opened and i'm going to expand it a bit to publish the package you need to create an account in the npm registry you can do that right here it is mpmjs.com forward slash sign up the link is going to be in the description as well you need to pass in your username email address and the password and that's it your account is going to be created i think you also need to validate your email once it comes just so they let you publish your package after creating an account go back to the command line and authenticate yourself with the command mpm login as you can see you're prompted to provide your details so let's provide our username and let's provide our password and we also have to provide their email and that is it if you successfully created the account and use the same credentials you should get the message logged in as and then your username here to test that the login was successful enter the command mpm who m i this is going to tell you that you're logged in or if you're not logged in as you can see it gives me my username that is great if this wasn't successful for you make sure to create the account properly validate the email and then make sure that you enter correct credentials like the username and the password great the last thing that we have to do before publishing a package is adding a readme.md file so right here in the root of our folder we're going to create a new file and the name is going to be readme.md in this readme file we can use the special markdown syntax and let's do something like this double hash sign or pound sign and then let's say what is this inside of there you can say a random number generator as simple as that then you can do another double hash sign in there say installation so in here we want to give the guide how users can create an user package in here you can say run and then use the backticks to say mpm i and then how do we call it well the name is the same as this name here in the package.json so i'm going to copy mine and paste there this needs to be unique so that is how we run it and then how do we actually use it so we can say use and then you can use triple backtick like this and close the triple backtick in here we can put our block of code so how are we going to use it well what we have to do is say import rng from and then we import it from the name of the package that's it you know for example when you use axios you say import axios from axios in this case we're importing our function from js mastery rng and then you have to call it rng and pass in the parameters for example 5 and 10. the last thing that we can do is add two more hash signs and say parameters in here we can say the random number generator accepts two parameters min and max values by default min is set to 0 and max is set to 100. that's it just so the users know that they don't even have to pass these parameters and that is it this is our readme.md file a documentation for our small package now let's save it and finally using the terminal let's publish our package here is just a friendly reminder before you try publishing your package you may not be able to publish the package if someone else already has a package with the same name in the registry in that case you can simply change the name of the package to something unique to make it publishable you can do that right here and the second thing is that your email must be validated so after you created your mpm account you need to validate your email by going there and then clicking the link that they sent you with that said to actually publish your package it is as simple as entering the mpm publish command that is it two words npm publish you can click enter and after the publish is done without any errors you can visit your account in the npm registry to see the package as you can see it is successfully published version 1.0.0 js mastery rng now let's visit our npm page if you visit npm and if you're already logged in this is how it should look like on the top right corner you should have your profile so you can click that and now we can click profile as you can see we have no packages right now but if you wait a moment or maybe a minute it should appear right here and there we go for me it appeared if i click on it we should get to the package page and as you can see there we go we have our readme what is this a random number generator we install it using mpmi js mastery rng and then we can use it like so and that is it your first mpm package is now live and published but now let's make sure that everyone can actually download and use your code for that let's do some proper testing we're going to go back on desktop and we're going to create a new folder in this case let's do something like test with this test folder we're going to do the same thing with it before take it and drag and drop it in your visual studio code after you do that you're going to have this test right there let's open our terminal and then in here you can run npm inet dash y this is going to run our package.json now let's see how can we install this well you just have to copy this mpmi js mastery rng let's do that and we just typed it in it is installed in a second because it's not a heavy package and let's check it out if you go to package.json you can see in here we have our main but we have dependencies js mastery rng and just so we can use that import syntax let's add that type which is going to be equal to module with that we can create a new file let's call it something like test.js and then in here oh how can we use our package let's go here to this well documented package and see that we installed it that's good and we can use it like this so i'm going to copy this paste it here import rng from js mastery rng and what we want to do is simply console login to make sure that it works let's try to run this file node test.js as you can see we get 7 9 7 seven it is random that is great so the point of this is you can see there is no code for actually making this random number we install the package that does that for us and more specifically we installed the package that we've built and published to the mpm registry that is amazing now you know how all of these packages you've been installing work somebody built them exported them and then they appear in node modules as you can see if we look into node modules this is where our actual project lies this is it this is the code for the project but we don't care about that nobody looks into node modules we simply have our code imported and then ran that is it by the way if you want to completely master javascript and start killing it with all other frameworks and libraries i have good news for you just a few days ago i released the complete path to javascript mastery course the premise of the course is to teach you in-web javascript like you haven't seen before starting now there is a limited time discount code the only thing you have to do is click the link in the description go to the checkout and apply the code and the code is jsm underscore yt underscore squad if you enter that code you're going to get 50 off of this comprehensive javascript course thank you so much for watching see you inside of the course or on the next javascript mastery video have an amazing day [Music] you