Writing & Publishing your First NPM Package!

today you're gonna learn how to create and publish your very own NPM package before we begin this video sponsor is Linode and they make it easy and affordable to host your site app or service on whatever technology stack you use unlike entry-level hosting services the note is a step up to powerful fast fully configurable cloud computing with server plans starting at just $5 plus no hidden fees or surprise outages Linode offers a no-nonsense hosting at a price you can afford so sign up now using the link below to get a $20 credit on your new Linode account hey everyone what's up Gary Simon of course cetra comm so today we're gonna be taking a look at how to create your very own NPM package now what is that so if you're at all familiar with JavaScript and you followed some of my other tutorials in the past you've probably used node packages and NPM is short for node package manager and basically what they are they're their packages or their little scripts or libraries that other people other developers have created to make your life easier in your own projects based on your needs so you don't have to write and do everything from scratch on your own so how do you create one of those well that's what we're gonna focus on today so the example that we're gonna be using is let's say for instance you're a bad designer in particular you really suck at creating shadows or box shadows right well that's what our little library is going to accommodate as you can see there's no shadows on here but when I enable our little package for this project right here and save and then refresh real quick we can see we have our little soft shadows we even have padding so that's what our little library is going to do and let me show you real quickly what this looks like in action so we're importing it and then we have our shadow wizard and we have our object of options here so as you can see shadow type is soft maybe we'll change this to hard all right so we have options as you can see padding let's make that false maybe we will go back to soft very exciting stuff it's you know a very silly sort of example nobody's going to use this of course but I you know just for this short tutorial to keep things you know as quick as possible we're gonna you know keep it to a minimum alright so make sure to subscribe if you haven't yet and let's get started alright so the first thing you want to do is create an NPM account if you don't yet have one so you go to NPM J Escom forward slash sign up and you put your full name your public email and your user name and password remember that username and password really need it in a second and then just create your account you're also gonna want to verify your email otherwise you won't be able to publish your package to NPM it'll warn you in the console so after you do those two things we can go ahead and then go to our console here and then you're gonna learn want to run the following commands here so let's get this a little bit bigger and we're just gonna type in MPM add user and it's going to ask you for the username the password that you specified just previously and also an email address and then it will you know tie that user to the you're currently logged in I your your NPM on your machine all right so I'm gonna exit out of here because I already did this all right so at this point let's go ahead and create a new folder for our package or our project here so make Durer I'm gonna call this shadow is 'red I guess and then we'll CD into shadow is 'red shadow wizard okay and so I at this point we'll go ahead and just start working on the actual I've code so we're going to let's here code period and that will open up the code editor visual studio code and we're going to create an index dot JSP so what we'll do is just define a regular JavaScript function for this so we're just gonna say function we'll call it a shadow wizard here and we're gonna allow people to pass in two parameters or through an options object all right so what we're going to do is we're going to get all the images that have a class attached to them so the part of the requirement for using this plug-in will or this library is that people can put a class on each image that they want to add this shadow effect to and it doesn't even have to be an image it could be anything really so we'll say let images equals document query selector all and we'll say shadow wizard just like that so after that we're going to check the options all right so we have two options one is and these are just this is like I said before this is a silly concept I just wanted to demonstrate you know how you can pass in options to your your your package so we'll say if options and if one option I will be shadow type so by default the shadow the Box shadow that we're gonna have is going to be really soft shadow so it's a wide blur radius of like 15 pixels if they don't want that anyone a heart shadow maybe you have 0 0 pixels then it could specify in the options and the parameters shadow type equals hard so we'll say shadow type hard so if it's hard then we can say options shadow type equals 0 pixels so we're putting in an actual value and you'll see how we'll use this in a second so we'll say else if it's anything else if they omit it if they choose not to you know specify it if it's anything else it's going to be option as a shadow type equals 15 pixels all right so now let's go through a for each from our images up top so images for each so we'll say image so now we have access to each image that it finds through document query selector all and we can just add a style to it so image stuff style and now we have access to why did it do that that's annoying style and then box shadow so now we have access to the CSS properties that we can update in JavaScript so one thing to note technically in CSS be a property for box shows box - shadow but you don't do that you use this camel case here for anything that has a - so box shadow equals so now we could say ten pixels from the X&Y and then also this is where we put in our options shadow so we're using back ticks so we can easily just reference the variable or property this way so options dot bought a shadow type rather right there and then we'll say I won pixel for the spread and then rgba 0 0 0 and then that's the that's black right there and then for the opacity 0.12 so it's just a soft very light shadow that will be applied all right so also we're gonna have a second option called padding so if they want to have padding okay we'll say if options stop padding and it's a boolean value so if it's true then we'll say image dot style dot padding equals 1 am sorry about that all right so by default it's going to be false but if they choose to say true in the options it's gonna add a 1 en padding to the images or whatever they place this shadow is 'red class onto and that's it for our code that's that's all it is except one final thing we're gonna do module exports shadow is 'red equals shadow is 'red all right so that's how they'll be able to import it into their project alright so now that we have this done let's go ahead and go to github i and you have calm so I'm going to assume up one second I have my incognito window open here let me just open this up there we go github comm I'm gonna assume you already have a github account if not go ahead to create one it's free we're gonna add a new repo I'll call this shadow wizard eye description whatever you want it to be public and it's create the repo we don't need we don't need to initialize it with a readme we're gonna create our own all right so here's our instructions here we're going to follow them almost to a tee all right let's close this out real quickly so what we want to do before we add our index we want to add a readme file into this folder right here so let's how to read me and that readme markdown file is what displays like I'm on github in this section right here so you definitely want to have it if you're going to be having any type of serious package that you want people to use so for the markdown very simple if you don't if not familiar with markdown templating and you know syntax I you can go ahead and just google that but for you know a caption or a heading right here what is this get perfect shadows every time for the non-designer I you usually have an installation that's of one thing people are always going to want to see so we'll say installation here and then we'll say if we want to show code we can see use the backtick so NPM eyeshadow is 'red save as a dev dependency by the way you can also take this index J s and you can just take this code alone without this module exports and you can host it on a CDN and that will give people who aren't using like a web pack or any type of JavaScript bundler the ability to use this just by a JavaScript source I tagged in their HTML but we're not we're not going to do that so you can see I and commonly with other packages that are more robust and than this one of course which most are people they give them multiple options in terms of how they choose to install it we're just going to give them the npm version so then we'll say then i'm if you want to show in markdown multiple code lines you can use these three back ticks and anything inside of it will be your little code i and they're just going to show you usage you know how do you use it so what you would do i'm gonna paste this in real quickly this is just a demo and we'll demo this in a real project to after we get it on npm then that's basically how you use it all right and then you can also specify options so shadows are supports two options both of which are optional of course shadow type hard and soft these right here just make this in markdown these little underscores this part will be that's Halla size so you'll see so let's go ahead and save that now we're ready to push this to github so we will get this up when open and so we're gonna say get in it alright and then we're going to get add all and then we're gonna get commit first commit all right so it's going to add these two files we need to go back to our right here we're gonna copy this and then we're going to run this line right here and then get push you origin mastered I'm putting in my password you're gonna have to set this stuff up yourself if you haven't done that yet and now we can refresh this and there we go so now we can see MPM ice shadow is 'red save then import blah blah blah now nobody you can actually do this yet because we haven't pushed it to npm and before we can actually publish it to npm we have to have a package that json file so i we will do npm in it and it's going to ask us a series of questions the package name the version this uses what's called semver alright so for the first one right here the first decimal it's the major version when you make incompatible API changes so these are major breaking changes the next one right here is based on the minor version when you want to add functionality in a backwards compatible manner and then finally right here this is the patch version when you make backwards compatible bug fixes alright so we're just going to leave it at one point zero point zero description add awesome shadows for the non-designer no entry point is indexed at JSS the file that we have right there and then test command we're going to omit this github repository so we already did that and therefore it's gonna put this in for us automatically keywords you know shadows I don't know author Gary Simon license we can leave that there is this okay hit enter yes all right so now we have our package JSON file and now we can run NPM and publish all right so I wanted to show this error mainly because this is this is something that you may run into not the first time running this but shadow wizard cannot be republished until 24 hours have passed so notice republished when I was setting this tutorial up I used the same name so what we'd have to do is just go to packs Jason shadow wizard I'll just call it wizardry there we go so now if we go back on one there we go and we run NPM publish now that we have a new name it's going to work this time there we go so shadow shadow wizardry that's what we're using so now if we go to NPM Jas MP MJS and we type in shadow wizardry it is there immediately for us to use and we can see the markdown the read media MD file with our options and all that stuff probably could be started a little bit better than that but now we can see also because we specified the github repo that's a part of this into package Jason this is the github page for it where people can go and learn how to use it so now let's actually use this as we would a regular end user alright so let's go ahead over to here we'll make a new directory we'll call it shadow tester and we'll CD into shadow tester and we will go ahead and we'll do NPM and NIT - why just to answer yes to all this stuff and then we're going to install it and based on the installation so it's NPM eye shadow wizard REE so this by the way this readme file would have to be updated because I changed that from shadow wizard to shadow wizardry no big deal and then save it as a dev dependency alright it's code period will open us up alright so we have our node modules we can see shadow wizardry right here alright very simple stuff all right so now we'll go ahead and create just an index dot HTML file alright let's go ahead and we're gonna have to have a couple images obviously for this to work correctly I'll just put in some placeholder image graphic right here now notice I've added class shadow wizard alright because that's what the code looks for on these two elements also we're going to use the parcel bundler for this so source equals this is going to go to our own custom index J s file has nothing to do with the one in here of course and we'll save this will create index dot at jsn our own project and inside of here this is how we use it which is in the the github readme empty as well so import shadow is 'red from shadow wizard re alright so now we can just call it so shadow wizard and we can in put in shadow type is soft or you can put in anything or just omit this the way we've had to setup the only one that it will look for specifically is if it's hard we'll change that and what if they take the value padding which just put by default it's false this is to true and that's all that's how we use it when world's most simple project ever I let's view the terminal real quick and I we're gonna use parcel for this like I said so if you don't have parcel NPM I parcel and then I - gee I already did that though after that's done parcel index.html alright so now created a dist folder and if we click here ctrl-click guess what tada we have done it notice the padding that adds is on on these some ugly placeholder graphics and our shadow so then if I move this over for instance and we come here let's get this out of way yeah if we come here and we change this to hard if I can type there's our hard ugly shadow and then put that back to soft and we'll make this false so there we go it just gets rid of that and that's exactly how you would go about using this to create your own packages in NPM alright so hopefully you learned a lot there and we just scratched the surface there's of obviously a lot more robust packages and a lot more different things you can do so it's just testing and all that but hopefully as a beginner you know intro that was good enough so if you did like it make sure to subscribe and I'll see you guys soon good bye [Music] [Music]

Channel: DesignCourse

Views: 65,727

Rating: 4.9449034 out of 5

Keywords: npm, npm tutorial, npm package, npm package tutorial, npm publish, npm publish tutorial, npm publish package, npm module, npm module tutorial, how to write an npm script, how to write an npm package, writing an npm package, npm github

Id: 4zzbNac6f6Q

Length: 19min 33sec (1173 seconds)

Published: Wed Aug 21 2019